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

Middle-Scale F2E Application

7777fbc132a52a9e5f71812645dc534d?s=47 Saito
May 11, 2013
Programming
3
6.2k

Middle-Scale F2E Application

Ruby Salon in HangZhou

7777fbc132a52a9e5f71812645dc534d?s=128

Saito

May 11, 2013
Tweet

More Decks by Saito

See All by Saito
How Gitlab Works
7777fbc132a52a9e5f71812645dc534d?s=48 saito
34
3.7k

Other Decks in Programming

See All in Programming
Keep Your Cache Always Fresh With Debezium
8e25c0ca4bf25113bd9c0ccc5d118164?s=48 gunnarmorling
0
180
Git Rebase
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
7
1k
もしも、 上司に鬼退治を命じられたら~プロジェクト計画編~
Fb0a40e5e7a9dc85520f1646fd41eb44?s=48 higuuu
0
270
C言語でメモリ管理を考えた話
F17bbe02fb6dda24d29196c2479121b1?s=48 hkawai
0
180
Securing Kafka Connect Pipelines with Client-Side Field Level Cryptography @ Kafka Summit London 2022
744f1c2c6cbea2ff5104b0ac512936bd?s=48 hpgrahsl
0
310
Reactでアプリケーションを構築する多様化
2917a3c430817eb71086f8973c06ebba?s=48 sakito
4
3.2k
脱オブジェクト指向講座(5分LT資料)
9e840766611f942c7c0a9ad6987a5d78?s=48 kishida
8
11k
How useEvent would change our applications
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
1
1.5k
Micro Frontends with Module Federation: Beyond the Basics @jax2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
280
LOWYAの信頼性向上とNew Relic
F95bdf0d9003fa506a9f7448335da1af?s=48 kazumax55
4
340
近況PHP / PHP in now a days
271fad8d53cd1f12f2b4b6d38e3d7bd3?s=48 uzulla
4
1.6k
Is Rust a great language for building Kubernetes ecosystem
7f408bc67dc9ae3b288ee92d16d3c4c2?s=48 deepu105
0
140

Featured

See All Featured
Web development in the modern age
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
197
9.3k
Optimizing for Happiness
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
365
63k
YesSQL, Process and Tooling at Scale
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
157
12k
Art Directing for the Web. Five minutes with CSS Template Areas
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
196
9.4k
The Illustrated Children's Guide to Kubernetes
0438ae60cde4c7add6f9da48f28c15cc?s=48 chrisshort
14
34k
Reflections from 52 weeks, 52 projects
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
337
17k
The Pragmatic Product Professional
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
19
2.9k
Put a Button on it: Removing Barriers to Going Fast.
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
56
2.3k
How STYLIGHT went responsive
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
85
3.9k
Visualization
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
124
11k
Gamification - CAS2011
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
75
3.9k
Designing Dashboards & Data Visualisations in Web Apps
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
224
49k

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