Middle-Scale F2E Application

Transcript

1. Middle-Scale F2E Application

2. problems • Loader • NameSpace • Dependency • Component/widgets (HTML

   & Javascript & CSS) • Unit/Component Test (Fixture) • Build (Strategy) • UX (Speed & LiveReload & ...)

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

   modernizr.load )

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

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

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

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

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

   component/component ) sprockets

9. •LiveReload Ways to solve each problem LiveReload 2

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

    CMD or UMD ?

11. Crossroad • It doesn't matter.

12. Diglett • Demo time!

13. Framework based on Component • HTML5 Web Component • AuraJS

    • Component • Twitter flight • MontageJS • And more...

14. Thanks