Middle-Scale F2E Application

Ruby Salon in HangZhou

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