I like the direction author is going. I have used similar methodology designing my applications (for mobile), simple, micro libraries, one way data binding.
* I have bunch of helper functions (UI and non-UI). Each function define in its own file and independent (easy to unit test). Personal library like jQuery but not a jQuery replacement.
* App is route based. One route to many controllers. Each controller is a page/screen on mobile.
* There is only one model (API) that interface with 3rd party library. API layer talks to 3rd party library to get data or gets data from server directly, caches data, etc. Provides sync (Cached data) and async (Cached data or fresh from server) interface to controllers.
* There is a app class or I call it a page manager. Responsible for managing pages like ordering, loading, unloading etc (Kind of big and complex 200+ lines of logic).
- Decides which page to animate in which direction on mobile (Loading new page or going back).
- Order of pages (Back button)
- Passes events to its controllers
- Decides which pages to keep in DOM, and which to remove.
--- If you go from homepage to comments to profile page, all pages are in DOM.
--- When you go back to comments page from profile page, profile page will be destroyed and controller will be notified. Same happens when you go from comments to home page.
--- If you go to same comments page again, it will be loaded as a new page.
* Controller:
- Each controller may have multiple CSS and templates
- Controller uses its template to render
- Using sync API to get data to renders page.
- If sync API returns no data, renders empty page with loading, and makes async API call.
- Controller are idle when transitioning (animating) from one page to another on mobile. (Very important for smooth animation)
- Simple but fat controllers
- Controller handles events, UI logic
- Self cleaning so that browser can collect garbage when necessary
I package app using node/gulp. Anything that is not specific to page/app related, it becomes part of a helper library. Each app has its own model (Data layer), and controllers. I use micro templates, precompile using node for faster performance.
Thanks for creating hn.premii.com! About half my use of Hacker News is through your web app. I even wrote a little bookmarklet that turns all links on hn.algolia.com and hckrnews.com into links to your app when I happen to be browsing on mobile! And I'm always happy to find out you introduced a new feature (which I would like to see more regularly, not that I'm complaining!).
Alongside Alien Blue, your app is my most used app on my phone. Your work is very appreciated!
I use hn.premii.com all the time. One of the best mobile web apps I have used. Any chance of open sourcing it? Would love to see how you solved some of these problems in detail.
http://hn.premii.com/
http://reddit.premii.com/
* I have bunch of helper functions (UI and non-UI). Each function define in its own file and independent (easy to unit test). Personal library like jQuery but not a jQuery replacement.
* App is route based. One route to many controllers. Each controller is a page/screen on mobile.
* There is only one model (API) that interface with 3rd party library. API layer talks to 3rd party library to get data or gets data from server directly, caches data, etc. Provides sync (Cached data) and async (Cached data or fresh from server) interface to controllers.
* There is a app class or I call it a page manager. Responsible for managing pages like ordering, loading, unloading etc (Kind of big and complex 200+ lines of logic).
- Decides which page to animate in which direction on mobile (Loading new page or going back).
- Order of pages (Back button)
- Passes events to its controllers
- Decides which pages to keep in DOM, and which to remove.
--- If you go from homepage to comments to profile page, all pages are in DOM.
--- When you go back to comments page from profile page, profile page will be destroyed and controller will be notified. Same happens when you go from comments to home page.
--- If you go to same comments page again, it will be loaded as a new page.
* Controller:
- Each controller may have multiple CSS and templates
- Controller uses its template to render
- Using sync API to get data to renders page.
- If sync API returns no data, renders empty page with loading, and makes async API call.
- Controller are idle when transitioning (animating) from one page to another on mobile. (Very important for smooth animation)
- Simple but fat controllers
- Controller handles events, UI logic
- Self cleaning so that browser can collect garbage when necessary
I package app using node/gulp. Anything that is not specific to page/app related, it becomes part of a helper library. Each app has its own model (Data layer), and controllers. I use micro templates, precompile using node for faster performance.