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

Building iWitness with Ember.js

Adam McCrea
May 10, 2012
Technology
6
550

Building iWitness with Ember.js

Ember.js is one of the latest fish to enter the sea of options for client-side JavaScript frameworks. Like the others, it aims to provide structure and maintainability to your JavaScript-heavy apps and to help you build complex functionality quickly. Unlike many of the others, it comes with a substantial learning curve and an unimpressive amount of guidance to help you along your way. In this talk I’ll walk you through the basics of Ember, then dive into the the guts of a real application to see Ember code in the wild.

Adam McCrea

May 10, 2012
Tweet

More Decks by Adam McCrea

See All by Adam McCrea
In the beginning, there was require...
adamlogic
0
220

Other Decks in Technology

See All in Technology
LINEヤフーにおけるPrerender技術の導入とその効果
narirou
2
1.5k
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
180
OCI Security サービス 概要
oracle4engineer
PRO
0
6.6k
A Tour of Anti-patterns for Functional Programming
guvalif
0
1.4k
Chasing the White Whale of Open Source - ROI
mrbobbytables
0
120
もし大規模障害が、10分で解決できたら？
masaaki_k
0
100
OCI 運用監視サービス 概要
oracle4engineer
PRO
0
4.9k
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
1.1k
Android 15 でウィジェットピッカーのプレビュー画像をGlanceで魅せたい/nikkei-tech-talk-27-1
nikkei_engineer_recruiting
0
100
FlutterアプリにおけるSLI/SLOを用いたユーザー体験の可視化と計測基盤構築
ostk0069
0
230
Next.jsとNuxtが混在？ iframeでなんとかする！
ypresto
2
1.6k
複雑なState管理からの脱却
sansantech
PRO
1
180

Featured

See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Fireside Chat
paigeccino
34
3k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Bash Introduction
62gerente
608
210k
Embracing the Ebb and Flow
colly
84
4.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Ruby is Unlike a Banana
tanoku
97
11k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
Done Done
chrislema
181
16k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
850

Transcript

  1. Building iWitness with Ember.js Adam McCrea

  2. None
  3. None
  4. None

  5. Frustration Exploration Clarity

  6. None
  7. None
  8. None

  9. Agenda • Ember.js basics • iWitness • iWitness Ember.js

  10. Ember.js

  11. Ember.js SproutCore

  12. Ember.js SproutCore SproutCore 2.0

  13. Ember.js SproutCore SproutCore 2.0 Amber.js

  14. <!DOCTYPE html> <html> <head> <script type='text/javascript' src="jquery.js"></script> <script type='text/javascript' src="ember.js"></script>

    <script type="text/javascript"> window.App = Ember.Application.create(); App.greeter = Ember.Object.create({ greeting: 'Hello StirTrek!' }); </script> </head> <body> <script type='text/x-handlebars'> <h1>{{App.greeter.greeting}}</h1> </script> </body> </html>

  15. <!DOCTYPE html> <html> <head> <script type='text/javascript' src="jquery.js"></script> <script type='text/javascript' src="ember.js"></script>

    <script type="text/javascript"> window.App = Ember.Application.create(); App.greeter = Ember.Object.create({ greeting: 'Hello StirTrek!' }); </script> </head> <body> <script type='text/x-handlebars'> <h1>{{App.greeter.greeting}}</h1> </script> </body> </html>

  16. <!DOCTYPE html> <html> <head> <script type='text/javascript' src="jquery.js"></script> <script type='text/javascript' src="ember.js"></script>

    <script type="text/javascript"> window.App = Ember.Application.create(); App.greeter = Ember.Object.create({ greeting: 'Hello StirTrek!' }); </script> </head> <body> <script type='text/x-handlebars'> <h1>{{App.greeter.greeting}}</h1> </script> </body> </html>

  17. <!DOCTYPE html> <html> <head> <script type='text/javascript' src="jquery.js"></script> <script type='text/javascript' src="ember.js"></script>

    <script type="text/javascript"> window.App = Ember.Application.create(); App.greeter = Ember.Object.create({ greeting: 'Hello StirTrek!' }); </script> </head> <body> <script type='text/x-handlebars'> <h1>{{App.greeter.greeting}}</h1> </script> </body> </html>

  18. <!DOCTYPE html> <html> <head> <script type='text/javascript' src="jquery.js"></script> <script type='text/javascript' src="ember.js"></script>

    <script type="text/javascript"> window.App = Ember.Application.create(); App.greeter = Ember.Object.create({ greeting: 'Hello StirTrek!' }); </script> </head> <body> <script type='text/x-handlebars'> <h1>{{App.greeter.greeting}}</h1> </script> </body> </html>

  19. <!DOCTYPE html> <html> <head> <script type='text/javascript' src="jquery.js"></script> <script type='text/javascript' src="ember.js"></script>

    <script type="text/javascript"> window.App = Ember.Application.create(); App.greeter = Ember.Object.create({ greeting: 'Hello StirTrek!' }); </script> </head> <body> <script type='text/x-handlebars'> <h1>{{App.greeter.greeting}}</h1> </script> </body> </html>

  20. DEMO

  21. iWitness Constraints • 100% client-side • open-source • free to

    use

  22. The Ember Way • How can properties and observers help

    solve your problem? • Declarative templates • You gotta keep ‘em separated (concerns)

  23. iWitness Launch

  24. iWitness Launch two weeks away

  25. iWitness Launch two weeks away follow @adamlogic for announcement

  26. iWitness Launch two weeks away follow @adamlogic for announcement USE

    IT!

  27. iWitness Launch two weeks away follow @adamlogic for announcement USE

    IT! Thanks!