Documents : Developer Guide

Architecture

How Did We Evolve?

The architecture is a result of the learning extracted from various models of development. This can be defined as a solution to:-
  • Common errors in patterns of development.
  • Standard code guidelines that often go for a toss in timelines to delivery.
  • Huge teams and Big Team of Developers that may cause regression issues in large projects.

It is a result of our past learning, observations and fruitful feedback that we have received for our work.

The base

StaticFrame is based on NodeJS + ExpressJS. NodeJS being the obvious choice of singleton server and ExpressJS because of its roubustness and flexibility. For serverside templating we choosed EJS(Embeded Javascript) which has more familar syntax to PHP/JSP, and above all its verbose, and made of javascript which makes it easier to understand. We intentionally avoided Jade to make HTML retain its beauty. Other templating systems that we recommend is Handlebars which is easy to understand and does not polute HTML tags.

EJS is mostly used to include html partials, components, while the main HTML file remains with .html extension. The partials and components files contain .ejs claiming their inclusion nature

StaticFrame has two modes of accessing the site. One is production and another is development. While default mode is development(dev), production mode can be accessed in a page when its access via extra query ?prod=true . This allows to test your js and css files in minified version.

What All is Packaged?

HTML

A lot of coding best practices emphasize on keeping code lean and well organized. The goal is to write well-structured and standards-compliant markup. Static Frame will help to achieve modularity with the way we propose to organize your HTML code:-
  • Story/ Module / Component based structuring.
  • Defining global components that enable re-usability
  • EJS – EJS combines data and a template to produce HTML. Here, our example data has a title and a list of supplies. EJS is much more than just providing markup template. You can explore more of EJS at http://www.embeddedjs.com/

CSS

SMACSS – Scalable and Modular Architecture for CSS is an attempt to document a consistent approach to site development when using CSS. Here in Static Frame we have implemented this approach with the help of SCSS. Explore more on how SASS is used – http://sass-lang.com/

JavaScript

In StaticFrame we have tried to include the best practices and preferred ways of developing javascript / jQuery code, based on our opinions, experience and reviews. Some of the key points we have focused here in this sections are:
  • Module + Reveal pattern – Easy to Understand, Debug, Track, and Fix.
  • Pub-Sub Pattern for inter-component and inter-module communication – an easy way to globally communicate without attaching to any specific object.