dynamizr is a website boilerplate built on top of some Backbone components. It's aim is to enhance a page-based web architecture (like a CMS) to dynamically load markup content and JavaScript modules. This let's you increase your sites experience and hopefully makes developing more fun ;)
The idea behind dynamizr is to structure all the websites "interactive parts" as Modules (actually extended Backbone Views) and to load them only if demanded (via requirejs). In the configuration file every Module is mapped to a specific selector path (i.e. #myWidget), so whenever a selector is located in the documents markup, corresponding Module(s) will be instantiated and thereby associated with the selectors element.
dynamizr knows two types of Modules: Frontend Modules, being initally instantiated, and Page Modules, being instantiated only in the areas of Dynamic Sections. A Dynamic Section is defined by a selector path – whenever a new page gets requested and fetched, the section elements content is being refreshed using AJAX. A Dynamic Sections markup gets parsed for Page Modules every time it refreshes.
By providing Dynamic Sections, dynamizr selectively refreshes contents by the use of AJAX (prevents the browser from reloading). Furthermore every Dynamic Section can be mapped to a Transition Module allowing you to orchestrate specific animations when moving between pages.
To install the required depencendies use npm install and bower install in your Terminal.
The folder example represents a scenario with three static HTML files. Just open the first file to navigate between them. Try something like http://localhost:8888/dynamizr/example/
There are two Dynamic Sections defined (main content and navigation), both using a crossfade transition. Whenever you click in a navigation link, the headers background color changes because of a Frontend Module which injected this functionality. On Page 2 a gallery is inserted as a Page Module which supports Fancybox.
Beside the html files, the example folder contains one build.js file, three configuration files and five folders:
-
Configuration Files
- config.js: the requirejs configuration including paths and dependencies
- website.js: the global website configuration including Module and Dynamic Section definitions
- main.js: the websites kick-off and event flow
-
Module Folders
- modules-fe: contains example projects Page Modules (just one)
- modules-pg: contains example projects Frontend Modules (just one)
-
Assets Folders
- libs: contains JavaScript libraries which are not that bower-friendly, i.e. require.js
- css: contains cascading stylesheets
While example folder only contains the project specific assets and configurations, the root folders core, managers and prototypes are containing dynamizrs main file set:
- core: contains the basic files to run the frontend
- managers: contains some helpful managers
- prototypes: contains the prototypes "module" and "transition" to extend project modules from