Falcon Front-end Web development Framework

Functional Progressive Web Application framework. That has all the basics, like state management and routing.

The aim of this framework is to aid web developers to focus on the front-end development not needing so much of a tweak.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

• via npm

  • npm install --save @falconjs.io/falcon

• via yarn

  • yarn add @falconjs.io/falcon

For the TL;DR people read this portion :P

You can Clone the boilerplate :)!

• git clone https://github.com/jmdisuanco/falconjs.io-boilerplate.git BOILERPLATE
• npm install
• npm start
• browser will open up the Boilerplate App
• edit the files inside src folder

Usage

Stateless

import {h, Render} from '@falconjs.io/falcon'

const view = count =>
  h("div", {}, [
    h("h1", {}, count),
    h("button", { onclick: () => render(count - 1) }, "-"),
    h("button", { onclick: () => render(count + 1) }, "+")
  ])

const render = Render(view, document.body)

render(0)

with State and JSX

import {h, Render, Observable} from '@falconjs.io/falcon'

let StateStore = {
        data: {
            fName: 'FalconJS',
            lName: 'Framework',
            age:25,
            fullName () {
                    return this.fName + ' ' + this.lName
                },
            old () {
                let oldornot='Young'
                if(this.age > 50){
                    oldornot = 'Old'
                }
                return oldornot
            }
        }
}

let App = new Observable(StateStore)

let Display = () => {
    return(
      <div onupdate={console.log('Display Component has been updated')}>
        <h1>{App.state.fullName}</h1>
        <div>{App.state.age}</div>
        <div>{App.state.old}</div>
      </div>     
    )
}
    
let Controller = () =>{      
      return(
        <div >
          <input value = {App.state.fName} oninput={(e)=>{App.state.fName = e.target.value }}></input>
          <input value = {App.state.lName} oninput={(e)=>{App.state.lName = e.target.value }}></input>
          <input type='range' value={App.state.age}  oninput={(e)=>{App.state.age = e.target.value }} ></input>
        </div>
      )
}

let View = ()  => {
      return(
        <div>
         <Display/>
         <Controller/>
        </div>
      )
} 
    
const render = Render(View, document.getElementById('root'))

render(App)
App.observe('fName', () =>{render(App)} )
App.observe('lName', () =>{render(App)} )
App.observe('age', () =>{render(App)} )

working with Routes

import {h, Render, Observable, Router, Navigate, Utils} from '@falconjs.io/falcon'

//location : window.location.pathname This line make sure FalconJS. will serve the right component base on the initial browser access
let StateStore = {
        data: {
            seconds:'',
            location : window.location.pathname,
            routes:{},
            router(){ return Router(this.routes) },
            render:null
        }
}

let App = new Observable(StateStore)

//COMPONENTS
let View  = (Component) => {
      return(
        <div>
          <Header/>
          <Component/>
        </div>
      )
} 
let Header = () =>{
  return(<div><a href="/">Home</a> <a href="/1">One</a> <a href="/2">Two</a> <a href="/3">Three</a> <a href="https://falconjs.io"> Will go to external site</a>  <a href="/4">Not Found</a></div>)
}


let Home =() => { return(<div><h1>Home</h1></div>)}
let noPageFound = ()=> {return(<div><h1>404</h1></div>)}
let One = () => {return(<div><h1>One!</h1></div>)}     
let Two = () => {return(<div><h1>Two!</h1></div>)}     
let Three = () => {return(<div><h1>Three!</h1></div>)}  

//Load Renderer in App state
App.state.render = Render(View, document.getElementById('root'))

//Load route rules to state
App.state.routes = {
  '/': Home,
  '/1': One,
  '/2': Two,
  '/3': Three,
  '*': noPageFound
}

//initial navigation
Navigate(App)

//Utils Helper to transform all <a> Anchor tags that starts with "/" to activate Navigation otherwise it will perform the default method
Utils.transLink(App)
App.observe('location', () =>{Navigate(App)} )

Prerequisites

What things you need to install the software and how to install them

npm i -g parcel-bundler

• to use JSX feature

place .babelrc on your development folder with the contents below

{
    "plugins": [
      ["transform-react-jsx", {
        "pragma": "h"
      }]
    ]
}

Installing

clone a copy git clone https://github.com/jmdisuanco/falcon

On the cloned directory type in the commands below to start the the development server yarn start or npm start

Running this command will also open up your browser to http://localhost:9999

Components for FalconJS

components will be publish in npm with a prefix of falconjs-component ex. falconjs-component-flexgrid

• Flexgrid Component

Contributions are most welcome

Please Fork and Send Pull Request for the improvement of this library.

Built With

• Superfine - A minimal view layer for creating declarative web user interfaces.
• url-mapper - The main purpose of url-mapper is to match given URL to one of the routes.

Author

• JM Disuanco - :) - (https://jm.disuan.co)

License

This project is licensed under the MIT License - see the LICENSE file for details