Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Middle-Scale F2E Application

Saito
May 11, 2013

Middle-Scale F2E Application

Ruby Salon in HangZhou

Saito

May 11, 2013
Tweet

More Decks by Saito

Other Decks in Programming

Transcript

  1. Middle-Scale F2E Application

    View Slide

  2. problems
    • Loader
    • NameSpace
    • Dependency
    • Component/widgets (HTML & Javascript & CSS)
    • Unit/Component Test (Fixture)
    • Build (Strategy)
    • UX (Speed & LiveReload & ...)

    View Slide

  3. Ways to solve each problem
    •Loader
    LABjs
    headjs
    yepnopejs ( modernizr.load )

    View Slide

  4. Ways to solve each problem
    •NameSpace
    http://addyosmani.com/blog/essential-js-namespacing/
    •Single global variables
    •Object literal notation
    •Nested namespacing
    •Immediately-invoked Function Expressions (IIFE)s
    •Namespace injection
    https://github.com/jashkenas/coffee-script/wiki/FAQ#unsupported-features
    •CoffeeScript

    View Slide

  5. •Component
    Ways to solve each problem
    component/component

    View Slide

  6. •Dependency
    Ways to solve each problem
    requirejs (AMD)
    component/component (CMD)

    View Slide

  7. •Unit/Component Test
    Ways to solve each problem
    component/component

    View Slide

  8. •Build
    Ways to solve each problem
    r.js (require.js)
    builder ( component/component )
    sprockets

    View Slide

  9. •LiveReload
    Ways to solve each problem
    LiveReload 2

    View Slide

  10. Crossroad
    •Chef of Puppet
    •github or gitlab ?
    •AMD or CMD or UMD ?

    View Slide

  11. Crossroad
    • It doesn't matter.

    View Slide

  12. Diglett
    • Demo time!

    View Slide

  13. Framework based on Component
    • HTML5 Web Component
    • AuraJS
    • Component
    • Twitter flight
    • MontageJS
    • And more...

    View Slide

  14. Thanks

    View Slide