Giter VIP home page Giter VIP logo

blank-app-shell's Introduction

blank-app-shell's People

Contributors

yerkopalma avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar

blank-app-shell's Issues

Support prefixes

gh-pages for projects use as prefix the project name, so whiole navigating, the router overwrite it and popstate begin to fail

Add basic router

Router usage:

import RouterSingleton from './RouterSingleton'

// route definition
const router = RouterSingleton.getRouter()
router.addRoute('/', HomeView)
router.addRoute('/about', AboutView)
router.addRoute('/user/:id', UserView)

// programatic navigation
router.goTo(route) // could also receive a string for the route path

// current view
router.currentPath // Route object

// could also handle a state container
router.setStateManager(Store) 
// expect an object with a redux-like API
// in this case, the app state now has a 'currentRoute' object,
// if changed through an action or reducer, it trigers a route change

Views are supposed to be yo-yo functions

Anchor tags with a data-route property also trigger views, e.g.

<a data-route="/">Home</a>
<a data-route="/user/123">John Profile</a>

Route object

A route object has the following API

const route = new Route('/path/:id', viewFn)

route.pattern // something like '/path/:id', set on constructor
route.path // the current path, set on navigation
route.params // in this example, an object like { id: 'value' }, only set if path is set
route.view // the yo-yo function

Add basic Store container

It must have a redux like API

import createStore from './'

  const reducers = {
    increment (state, data) => data ? state + data : state++,
    decrement (state, data) => data ? state - data : state--
  }

  var state = 0
  const store = createStore(state, reducers)
  store.subscribe(() => console.log(store.getState()))

  store.dispatch('increment') // 1
  store dispatch('increment') // 2
  store.dispatch('decrement', 12) // -10

Should be offline firendly, save a copy of the state to IDB, always. Store is a singleton. Must have a way to change and interact with the router

Add a server

Use now to deploy a simple node server. This server will later send the push notifications

Explore improvements in the rendering process

Support prioritization of components using requestIdleCallback with requestAnimationFrame. After that implemented, move to a Progressive Booting, for that these (I hope) are the steps:

  1. Add some basic server rendering (not sure if necesary for a blank template, because the index.html is somewhat server rendered, but still going to add it as a proof of concept).
  2. Add some example pages with at least 2 different levels of prioritization.
  3. Measure and log the FMP and TTI times, also every component rendering time

Publish to gh-pages

  • To discard localhosting bugs
  • To manage production and development environments

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.