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

Taller de Introducción a Ember.JS

Sergio Arbeo
November 22, 2014
Programming
1
160

Taller de Introducción a Ember.JS

Slides en baja resolución (~12MB) del taller de introducción a Ember.JS presentado en codemotion 2014.

Sergio Arbeo

November 22, 2014
Tweet

More Decks by Sergio Arbeo

See All by Sergio Arbeo
Testing sin Dogmas
serabe
0
160
Decorating JavaScript - source{d} edition
serabe
1
80
Componentes: DD
serabe
0
170
Introducción a JSONAPI
serabe
1
110
Bienvenidos a Ember Madrid
serabe
2
190
Lo que la cafeína le hizo a JS
serabe
1
190
Lo que la cafeína le hizo a JS
serabe
1
2.9k
Generadores en JavaScript
serabe
1
490
El diablo está en los detalles
serabe
0
370

Other Decks in Programming

See All in Programming
鹿児島からRubyではじめるスタートアップ
yoshikouki
0
720
TokyoR#104_DataProcessing
kilometer
1
330
SymfonyLive Paris 2023: Scheduler
fabpot
2
850
Eloquentとクエリビルダを両方使った実装の失敗例 - 第150回 PHP勉強会 #phpstudy
kotomin_m
0
170
CSC308 Lecture 23
javiergs
PRO
0
180
Flaky Tests - Fighting Nightmares
leichteckig
0
200
Lightweight Architectures With Angular's Latest Innovations
manfredsteyer
PRO
0
310
改めて整理するWebアプリのビルド・デプロイの基本【コンテナ編】
os1ma
2
260
Dart3を試す
masumitsu
0
170
ヘッドレスCMSのリッチエディタを支えるヘッドレス○○
microcms
1
180
Money Forward XでのGo利用事例について
keitaro1020
3
320
NOT A HOTEL
AIコンシェルジュ「Kevin」の開発秘話
codehex
2
2.4k

Featured

See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
14
5.6k
Designing for Performance
lara
600
65k
Atom: Resistance is Futile
akmur
256
24k
WebSockets: Embracing the real-time Web
robhawkes
58
6.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
The World Runs on Bad Software
bkeepers
PRO
59
5.8k
Support Driven Design
roundedbygravity
88
8.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
50k
The MySQL Ecosystem @ GitHub 2015
samlambert
240
11k
How To Stay Up To Date on Web Technology
chriscoyier
779
250k
How to Ace a Technical Interview
jacobian
270
22k
Code Review Best Practice
trishagee
50
12k

Transcript

  1. MADRID · NOV 21-22 · 2014
    Introducción a
    Ember
    Sergio Arbeo
    {Back,Front}-end developer at codecantor
    @Serabe

    View Slide

  2. MADRID · NOV 21-22 · 2014
    Ember

    View Slide

  3. MADRID · NOV 21-22 · 2014
    Ember
    •  Convention over Configuration
    •  Stability without Stagnation
    •  Uses ES6 modules
    •  6 week release cycle (Chrome-style)
    •  Ember-CLI
    •  Tomster

    View Slide

  4. MADRID · NOV 21-22 · 2014
    Overview
    •  Routes are the entry points for your app.
    •  Models are in charge of persistance/raw
    data.
    •  Controllers contain logic.
    •  Views will not exist.
    •  Templates are HTML + Handlebars

    View Slide

  5. MADRID · NOV 21-22 · 2014

    View Slide

  6. MADRID · NOV 21-22 · 2014

    View Slide

  7. MADRID · NOV 21-22 · 2014

    View Slide

  8. MADRID · NOV 21-22 · 2014
    Log your users in!

    View Slide

  9. MADRID · NOV 21-22 · 2014
    ember g route index

    View Slide

  10. MADRID · NOV 21-22 · 2014

    View Slide

  11. MADRID · NOV 21-22 · 2014

    View Slide

  12. MADRID · NOV 21-22 · 2014

    View Slide

  13. MADRID · NOV 21-22 · 2014

    View Slide

  14. MADRID · NOV 21-22 · 2014

    View Slide

  15. MADRID · NOV 21-22 · 2014
    ember g route login

    View Slide

  16. MADRID · NOV 21-22 · 2014

    View Slide

  17. MADRID · NOV 21-22 · 2014

    View Slide

  18. MADRID · NOV 21-22 · 2014
    ember g controller auth

    View Slide

  19. MADRID · NOV 21-22 · 2014

    View Slide

  20. MADRID · NOV 21-22 · 2014

    View Slide

  21. MADRID · NOV 21-22 · 2014

    View Slide

  22. MADRID · NOV 21-22 · 2014
    ember server

    View Slide

  23. MADRID · NOV 21-22 · 2014
    http://localhost:4200/

    View Slide

  24. MADRID · NOV 21-22 · 2014

    View Slide

  25. MADRID · NOV 21-22 · 2014
    ember g model user

    View Slide

  26. MADRID · NOV 21-22 · 2014

    View Slide

  27. MADRID · NOV 21-22 · 2014

    View Slide

  28. MADRID · NOV 21-22 · 2014

    View Slide

  29. MADRID · NOV 21-22 · 2014
    Using LocalStorage

    View Slide

  30. MADRID · NOV 21-22 · 2014
    Persistence
      DS.Models know nothing about persistence.
      DS.Adapters do.

    View Slide

  31. MADRID · NOV 21-22 · 2014
    ember g adapter user

    View Slide

  32. MADRID · NOV 21-22 · 2014

    View Slide

  33. MADRID · NOV 21-22 · 2014

    View Slide

  34. MADRID · NOV 21-22 · 2014

    View Slide

  35. MADRID · NOV 21-22 · 2014
    The Road so Far
    •  Routes and transition
    •  Controller
    •  The router
    •  Templates
    •  Model and attributes
    •  Adapter

    View Slide

  36. MADRID · NOV 21-22 · 2014
    Let’s add some logic

    View Slide

  37. MADRID · NOV 21-22 · 2014

    View Slide

  38. MADRID · NOV 21-22 · 2014

    View Slide

  39. MADRID · NOV 21-22 · 2014

    View Slide

  40. MADRID · NOV 21-22 · 2014

    View Slide

  41. MADRID · NOV 21-22 · 2014

    View Slide

  42. MADRID · NOV 21-22 · 2014
    Conventions rule

    View Slide

  43. MADRID · NOV 21-22 · 2014

    View Slide

  44. MADRID · NOV 21-22 · 2014

    View Slide

  45. MADRID · NOV 21-22 · 2014

    View Slide

  46. MADRID · NOV 21-22 · 2014

    View Slide

  47. MADRID · NOV 21-22 · 2014

    View Slide

  48. MADRID · NOV 21-22 · 2014

    View Slide

  49. MADRID · NOV 21-22 · 2014

    View Slide

  50. MADRID · NOV 21-22 · 2014

    View Slide

  51. MADRID · NOV 21-22 · 2014

    View Slide

  52. MADRID · NOV 21-22 · 2014
    ?

    View Slide

  53. MADRID · NOV 21-22 · 2014

    View Slide

  54. MADRID · NOV 21-22 · 2014

    View Slide

  55. MADRID · NOV 21-22 · 2014

    View Slide

  56. MADRID · NOV 21-22 · 2014

    View Slide

  57. MADRID · NOV 21-22 · 2014

    View Slide

  58. MADRID · NOV 21-22 · 2014

    View Slide

  59. MADRID · NOV 21-22 · 2014
    Auth Controller

    View Slide

  60. MADRID · NOV 21-22 · 2014
    Auth Controller

    View Slide

  61. MADRID · NOV 21-22 · 2014
    Auth Controller

    View Slide

  62. MADRID · NOV 21-22 · 2014
    Auth Controller

    View Slide

  63. MADRID · NOV 21-22 · 2014
    Auth Controller

    View Slide

  64. MADRID · NOV 21-22 · 2014
    Auth Controller

    View Slide

  65. MADRID · NOV 21-22 · 2014
    Auth Controller

    View Slide

  66. MADRID · NOV 21-22 · 2014

    View Slide

  67. MADRID · NOV 21-22 · 2014

    View Slide

  68. MADRID · NOV 21-22 · 2014

    View Slide

  69. MADRID · NOV 21-22 · 2014

    View Slide

  70. MADRID · NOV 21-22 · 2014

    View Slide

  71. MADRID · NOV 21-22 · 2014

    View Slide

  72. MADRID · NOV 21-22 · 2014
    Change the id of the created user

    View Slide

  73. MADRID · NOV 21-22 · 2014
    ember g route zones

    View Slide

  74. MADRID · NOV 21-22 · 2014
    ember g controller zones

    View Slide

  75. MADRID · NOV 21-22 · 2014

    View Slide

  76. MADRID · NOV 21-22 · 2014
    How do we get the user model?

    View Slide

  77. MADRID · NOV 21-22 · 2014

    View Slide

  78. MADRID · NOV 21-22 · 2014

    View Slide

  79. MADRID · NOV 21-22 · 2014
    Getting data from a REST API

    View Slide

  80. MADRID · NOV 21-22 · 2014
    ember g model zone

    View Slide

  81. MADRID · NOV 21-22 · 2014

    View Slide

  82. MADRID · NOV 21-22 · 2014

    View Slide

  83. MADRID · NOV 21-22 · 2014

    View Slide

  84. MADRID · NOV 21-22 · 2014

    View Slide

  85. MADRID · NOV 21-22 · 2014

    View Slide

  86. MADRID · NOV 21-22 · 2014

    View Slide

  87. MADRID · NOV 21-22 · 2014

    View Slide

  88. MADRID · NOV 21-22 · 2014
    No controllerName
    No setupController

    View Slide

  89. MADRID · NOV 21-22 · 2014

    View Slide

  90. MADRID · NOV 21-22 · 2014

    View Slide

  91. MADRID · NOV 21-22 · 2014
    ember g adapter application

    View Slide

  92. MADRID · NOV 21-22 · 2014
    Why not zone?

    View Slide

  93. MADRID · NOV 21-22 · 2014

    View Slide

  94. MADRID · NOV 21-22 · 2014

    View Slide

  95. MADRID · NOV 21-22 · 2014

    View Slide

  96. MADRID · NOV 21-22 · 2014

    View Slide

  97. MADRID · NOV 21-22 · 2014

    View Slide

  98. MADRID · NOV 21-22 · 2014

    View Slide

  99. MADRID · NOV 21-22 · 2014

    View Slide

  100. MADRID · NOV 21-22 · 2014
    Linking zones

    View Slide

  101. MADRID · NOV 21-22 · 2014
    ember g route zone

    View Slide

  102. MADRID · NOV 21-22 · 2014

    View Slide

  103. MADRID · NOV 21-22 · 2014

    View Slide

  104. MADRID · NOV 21-22 · 2014

    View Slide

  105. MADRID · NOV 21-22 · 2014

    View Slide

  106. MADRID · NOV 21-22 · 2014

    View Slide

  107. MADRID · NOV 21-22 · 2014

    View Slide

  108. MADRID · NOV 21-22 · 2014

    View Slide

  109. MADRID · NOV 21-22 · 2014
    Relationships

    View Slide

  110. MADRID · NOV 21-22 · 2014

    View Slide

  111. MADRID · NOV 21-22 · 2014

    View Slide

  112. MADRID · NOV 21-22 · 2014

    View Slide

  113. MADRID · NOV 21-22 · 2014

    View Slide

  114. MADRID · NOV 21-22 · 2014

    View Slide

  115. MADRID · NOV 21-22 · 2014

    View Slide

  116. MADRID · NOV 21-22 · 2014

    View Slide

  117. MADRID · NOV 21-22 · 2014

    View Slide

  118. MADRID · NOV 21-22 · 2014

    View Slide

  119. MADRID · NOV 21-22 · 2014
    Side loading!

    View Slide

  120. MADRID · NOV 21-22 · 2014

    View Slide

  121. MADRID · NOV 21-22 · 2014

    View Slide

  122. MADRID · NOV 21-22 · 2014

    View Slide

  123. MADRID · NOV 21-22 · 2014

    View Slide

  124. MADRID · NOV 21-22 · 2014

    View Slide

  125. MADRID · NOV 21-22 · 2014

    View Slide

  126. MADRID · NOV 21-22 · 2014

    View Slide

  127. MADRID · NOV 21-22 · 2014
    Keeping it apart with components

    View Slide

  128. MADRID · NOV 21-22 · 2014

    View Slide

  129. MADRID · NOV 21-22 · 2014

    View Slide

  130. MADRID · NOV 21-22 · 2014
    ember g component zones-list

    View Slide

  131. MADRID · NOV 21-22 · 2014
    ember g component zones-list

    View Slide

  132. MADRID · NOV 21-22 · 2014

    View Slide

  133. MADRID · NOV 21-22 · 2014

    View Slide

  134. MADRID · NOV 21-22 · 2014

    View Slide

  135. MADRID · NOV 21-22 · 2014

    View Slide

  136. MADRID · NOV 21-22 · 2014

    View Slide

  137. MADRID · NOV 21-22 · 2014

    View Slide

  138. MADRID · NOV 21-22 · 2014

    View Slide

  139. MADRID · NOV 21-22 · 2014

    View Slide

  140. MADRID · NOV 21-22 · 2014

    View Slide

  141. MADRID · NOV 21-22 · 2014

    View Slide

  142. MADRID · NOV 21-22 · 2014

    View Slide

  143. MADRID · NOV 21-22 · 2014

    View Slide

  144. MADRID · NOV 21-22 · 2014

    View Slide

  145. MADRID · NOV 21-22 · 2014

    View Slide

  146. MADRID · NOV 21-22 · 2014

    View Slide

  147. MADRID · NOV 21-22 · 2014
    The Road Ahead
    •  Mixins, to reuse code.
    •  Transforms, to {,de}serialize custom field
    types.
    •  Utils, for sharing fns in Ember-CLI.
    •  Ember-CLI add-ons, reusable libraries.
    •  Helpers, fns in Handlebars.

    View Slide

  148. MADRID · NOV 21-22 · 2014
    The Road to Be Built
    •  Ember 2.0, Stability without Stagnation
    •  HTMLBars
    •  Engines
    •  Routable components
    •  Better binding with streams
    •  Better component syntax and encapsulation

    View Slide

  149. MADRID · NOV 21-22 · 2014
    Questions?

    View Slide

  150. MADRID · NOV 21-22 · 2014
    Thank you!
    @Serabe
    [email protected]

    View Slide