A mini but full-fledged SPA framework and boilerplate to build SPAs fast and scalable
Take a SPA with Knockout.
knockout-spa.mybluemix.net (demo/doc site built using this framework itself)
A mini but full-fledged SPA framework and boilerplate to build SPAs fast and scalable.
require-css
and require-text
AMD plugins to load CSS and HTML templates dynamically ondemand along with the JS modules requiring them; these CSS and HTML template files will be inlined and minified into the corresponding JS modules for production build.require-i18n
for scalable internationalization/localization.build.js
. Just figure out a config-based way to serve the assets from /build
folder for production./js
, /css
, /html
, /template
, etc, as files belonging to the same module/component are easier to navigate when grouped together under the same folder. If a part of the app should be removed, in theory you just need to delete the corresponding module/component folder, and touch very few other places.node
and npm
if you haven't.npm install knockout-spa
to install from NPM, then manually move knockout-spa
folder out of the node_modules
folder to where your projects are normally located.cd
into the repo's folder in your OS terminal and run npm install
. Run npm start
to run the app in DEV mode, or run npm run prod
to run the app in PROD mode.index.html
will be served for all 404s.server.js
so that it can proxy your CORS requests to endpoints which don't have CORS header present.TODO
s in the bootstrapped setup, and use your browser devtool of choice to poke around - you'll figure out everything in 10 minutes or less (assuming you know Knockout and Require fairly well). Use Show Page Source toggle on each page to quickly review the JS
, HTML
, CSS
files of the page.
Files
page is a great example that demonstrates almost all of the SPA development aspects: routing and url query handling; using ko
component to encapsulate reusable logic, and using custom tag file
in the page's template and pass observable params to initialize the component; using ko
custom binding highlight
to display the highlighted file source; using the api-file
api client to make api calls easier, etc.
Files Dependencies
page shows the modules dependencies graph of the repo. You can observe how the 2-tier build structure changes the graph from DEV mode to PROD mode
npm run build
in the repo's folder from command line to build assets for production, or run the combo command npm run prod
to build and start the app in PROD mode. See http://requirejs.org/docs/optimization.html for complete optimization guide.
/build
folder of the repo. The build is setup as 2 tiers: 1 common module that contains modules that will be required by most page modules, and page modules (1 per page) excluding common dependencies. Each built module will have all the declared dependencies recursively minified and inlined.css!
and/or text!
prefixes to add them as the JS module's dependencies) for pure modularization/portability, and reduce HTTP requests to improve app performance.build.js
, and add their common dependencies to the common
module.
app/shared/routes.js
.app/files
.
css!
prefix in the AMD dependencies array in the JS file.init
, afterRender
, dispose
, controllers
, see app/home/home.js
for detailed explanation.<html>
element. It's the dasherized version of the page folder's relative path to app root, without the 'app' part.build.js
.npm install dependency-package-name --save
to install the package and save dependency entry to package.json
, then alias the lib file in common.js
(so that you don't have to type the long relative path everywhere when using the lib).lib-ext/knockout-custom-bindings-lib.js
for examples and detailed instructions.component/file-display/file-display.js
and component/page-source-display/page-source-display.js
.
lib-ext/knockout-extended.js
. This allows the component modules to be loaded dynamically ondemand only when the custom tags are found in your app's templates, improving performance and app scalability. Modify the convention to your needs if desired.