Knockout/Browserify base app — MVVM with an event layer.
g5-knockout.js — an app/module scaffold based on a tried and proven application architecture and solid development patterns.
Concept
- Get started in seconds with a clean, proven, well documented, and testable structure. Install the package and use it as a scaffold for an app or module.
- Maintain simplicity, main focus is on the JavaScript architecture.
- Encourage good development patterns.
Application Flow
An event layer allows for a clear separation of concerns, solid architecture, and clean code which is easier to visualize.
The “EventTower” is used as a central communication hub. An applications Model and viewModel may dispatch events to the EventTower, however may never speak directly with each other. The EventTower simply acts as a mediator of events, and should not contain any other logic.
All application events are defined in a single location, which allows a developer to easily envision the flow of functionality, and is especially helpful to new developers on the project.
The core g5-knockout module binds itself to the EventTower, which allows the EventTower access to model and viewModel references kept on the core module. It may also emit events itself, in cases where it’s necessary to communicate with external modules.
The model is a plain old JavaScript Object.
The master viewModel contains internal logic and keeps track of data received from the model. That data can then be easily passed off to a component, allowing for a great structure that is easily understood. For consistency, all data is stored under a $data Object.
Components
Working with Knockout components allows us to easily encapsulate functionality specific to a component and keep our markup super clean at the same time.
Index
Because all data is stored under a $data Object, we can simply pass that in as a param to any component.
Component viewModel
Component Template
Component Register
Since Browserify is a build-time tool, it doesn’t really need any special integration with KO components, and there’s no need to implement any kind of custom component loader to work with it. You can simply use Browserify’s require statements to grab instances of your component viewmodels, then explicitly register them:
All components must be registered within the g5-brko-component module, each component requires a template — if no viewModel is provided, $data will be inherited from the master viewModel. The register method is called before bindings are applied.
Dependencies
Browserify
- Use define/require for truly modular code.
- Avoid crazy configs (i.e. like RequireJS).
- Take advantage of the tens of thousands of modules on NPM.
- Use core NodeJS modules on the client. For example g5-knockout relies heavily on the “events” module. This is also a win-win because learning more about these modules will help you down the road when you are doing some server side work with NodeJS.
Knockout
- Dynamic UI, MVVM pattern.
- Pure JS, great documentation.
- Fantastic implementation of web components (read more).
- If good patterns are followed, markup remains semantic, clean, readable, and expressive. Dirty markup is one of the main problems people (including myself) have with MVVM libraries, most (i.e. Angular) make reading markup almost unbearable.
Lodash
- Super performant utility library.
- Used internally in g5-knockout to maintain clean code and good patterns.
- Will already be included when you are ready to manipulate data from your Model (this is where Lodash shines).
Motivation
I truly believe that 2015 is the end of the monolithic JavaScript framework.
I was excited to work on this project because it consists of a set of tools I love to work with and development patterns I believe in. I wanted to contribute my workflow to the community as (what I believe to be) a high quality package.
Also, as a huge fan of Knockout, I don’t think it gets enough love from the development community. I constantly see different articles and code about Angular, React, Backbone, etc… but not much quality material out there about Knockout. I believe Knockout fits the mantra of development using small modules instead of huge frameworks, it helps you get a grip on the viewModel layer of your application and allows you to worry about the remaining parts which are often much harder to produce.
More than anything, I think g5-knockout can be really useful to developers. Even if you don’t subscribe to everything it attempts to provide, hopefully you can take away something positive, even if it’s a line of code.
Name
Around 2010/2011 I released a website boilerplate called “G5 Framework”. The name g5-knockout came to mind immediately when working on this project because both share a similar idea of providing a rock solid starting point. I also thought it was a fun way to pay homage to my “G5 Framework”. It’s interesting to see how much the development community has changed in the time span between both projects, majority of the tools we rely on today did not (and could not…?) exist back then.
Links
Notes
The project is still a work in progress, I’m currently accepting comments and suggestions to improve the module.
