bevry-archive/client-side

Bevry's approach to the client-side

Bevry's Client Side Approach

December 4th, 2013 @ Co-Up Berlin Hosted by Hacker Retreat Sponsored by Zanox

Slides + Notes:

https://github.com/bevry/client-side

Agenda

1. Introduction, why we are here
   1. Helping Bill Murray
   2. Hacker Retreat
   3. Good idea to do a talk about this, to help others too, not just Bill Murray
2. Where did my knowledge come from
   1. Many years doing javascript
   2. 15th most active user on GitHub
3. Why is this stuff important?
   1. Overwhelmingly fragemented
4. What is our approach on it?
   1. Simplify, unite, make stuff
5. Let's take a look

History

• 2006
  • Got into AJAX, Prototype, MooTools
• 2007
  • Got into jQuery (created August 26, 2006)
• 2008
  • Built jQuery Smarty, first javascript templating engine (even reactive)
• 2009
  • Switched to JavaScript full-time
• 2010
  • Dev Lead for Aloha Editor for a few months
• 2011
  • Built Buildr for Aloha Editor
  • Built History.js
  • Built DocPad
  • Started CoffeeScript
  • Built TaskGroup
  • Government projects with Backbone
• 2012
  • BugHerd.com with Backbone and QueryEngine
  • DocPad re-written with Backbone instead of vanilla classes
• 2013
  • DocPad full-time
  • Two failed projects with Backbone
    • Views are to blame
  • Looked into alterantives
    • Discovered Spine, the models sucked
    • Discovered MicroJS, spent all the time researching incompatible modules
    • Discovered component, bower - too complex
  • Came up with a good architecture
    • DocPad
    • NPM + Browserify
    • Backbone Models
    • QueryEngine Collections
    • Spine Views + Routing
      • Now bevry/spine-route and bevry/miniview

Available Architectures

• Building

  • Task based build tools
    • [Make](http://en.wikipedia.org/wiki/Make_(software)
      • Not friendly to web developers
    • [Ant](http://en.wikipedia.org/wiki/Ant_(software)
      • Make + XML configuration file
    • Grunt
      • Make in javascript + JSON configuration file
    • Brunch
      • Grunt in coffeescript
    • Cake
      • Make in coffeescript
  • Resource based build tools
    • DocPad
      • Next generation web architecture

• PreProcessors

  • HTML
    • jQuery Smarty, Jade, Handlebars
      • Did people forget about no smarty?
      • Don't created a new interpreted syntax to stop templating errors
      • Just use a common better language, run tests, and train your developers
    • Eco
      • Like erb, and phtml, but with coffeescript
    • CoffeeKup
      • All coffeescript
  • JavaScript
    • CoffeeScript
      • Expressive
    • LiveScript
      • Safe
    • ClojureScript
      • Functional
  • CSS
    • LessCSS
      • JavaScript
    • Stylus
      • Like LessCSS + Expressive
    • SASS
      • Ruby

• Packaging

  • Bower
    • Clones out git repositories, either add your built files to the repo, or get bower to build it after clone
  • Component
    • Clones out git repositories, add your built files to the repo
  • NPM / Browerserify / Ender
    • Publish your built files to the NPM registry, bundle them with browserify or ender

• DOM

  • jQuery/Zepto
  • MicroJS Selector Engines (Sizzle, Qwery, etc)

• Business Logic

  • Backbone Views + Controllers, Marionette, Chaplin
  • Spine Controller
  • Ember/Angular
  • MiniView

• Data Logic

  • Backbone Models
  • Ember/Angular Models

• Templating

  • Jade/Handlebars/Etc
    • Write your template in a special markup, only to re-render all of it on a minor change
  • ECT/Eco
    • Write your template in a familiar markup, only to re-render all of it on a minor change
  • Facebook React, Knockout, Enddash
    • Write your template in a special markup, to pollute the rendered dom, so minor changes are handled fast
  • Vanilla jQuery
    • Write your template in normal markup, and write a lot of custom javascript, so minor changes are handled fast
  • Pointers
    • Write your template in normal markup, and write minimal code, so minor changes are handled fast

• Server Side Communication

  • Backbone Sync
  • Angular/Ember Data
  • Web Sockets
  • jQuery AJAX

• Routing / State Management

  • PJAX
  • History.js
  • Backbone/Spine/MVC Router
  • MicroJS Routers (Crossroads)

Bevry's Architecture

WebWrite InlineGUI

• Building

  • Bevry's Base Cake + DocPad's HTML5 Boilerplate Skeleton + DocPad LiveReload Plugin

   npm install -g docpad
   mkdir myapp; cd myapp
   docpad run
   docpad install livereload

• Pre-Processors

  • CoffeeScript
  • CoffeeKup
  • Stylus

   docpad install coffeescript coffeekup stylus

• Packaging

  • NPM + Browserify

   npm install --save browserify safeps
   open "https://github.com/webwrite/inlinegui/blob/4676a090365ef15c5479e3b92e1e2250255a9176/docpad.coffee#L110-L143"

• DOM

  • jQuery/Zepto

   open "https://github.com/webwrite/inlinegui/blob/4676a090365ef15c5479e3b92e1e2250255a9176/docpad.coffee#L51-L52"

   $ = window.$

• Business Logic

  • MiniView

   npm install --save miniview

   MiniView = require('miniview').View

• Data Logic

  • Backbone's Model + QueryEngine's QueryCollection

   npm install --save query-engine
   open "https://github.com/webwrite/inlinegui/blob/4676a090365ef15c5479e3b92e1e2250255a9176/docpad.coffee#L54-L58"

   class Model extends require('backbone').Model
  
   class Collection extends require('query-engine').QueryCollection

• Templating

  • Pointers

   npm install --save pointers
   open "https://github.com/bevry/pointers#usage"

• Server Side Communication

  • jQuery AJAX then to Primus

   open "https://github.com/webwrite/inlinegui/blob/4676a090365ef15c5479e3b92e1e2250255a9176/src/documents/scripts/views/app.js.coffee#L353-L393"

• Routing

  • Spine Route

   npm install --save spine-route
   open "https://github.com/bevry/spine-route#usage"