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

Taller de Introducción a Ember.JS

Sergio Arbeo
November 22, 2014

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

Other Decks in Programming

Transcript

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

    View full-size slide

  2. MADRID · NOV 21-22 · 2014
    Ember

    View full-size 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 full-size 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 full-size slide

  5. MADRID · NOV 21-22 · 2014

    View full-size slide

  6. MADRID · NOV 21-22 · 2014

    View full-size slide

  7. MADRID · NOV 21-22 · 2014

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. MADRID · NOV 21-22 · 2014

    View full-size slide

  11. MADRID · NOV 21-22 · 2014

    View full-size slide

  12. MADRID · NOV 21-22 · 2014

    View full-size slide

  13. MADRID · NOV 21-22 · 2014

    View full-size slide

  14. MADRID · NOV 21-22 · 2014

    View full-size slide

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

    View full-size slide

  16. MADRID · NOV 21-22 · 2014

    View full-size slide

  17. MADRID · NOV 21-22 · 2014

    View full-size slide

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

    View full-size slide

  19. MADRID · NOV 21-22 · 2014

    View full-size slide

  20. MADRID · NOV 21-22 · 2014

    View full-size slide

  21. MADRID · NOV 21-22 · 2014

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. MADRID · NOV 21-22 · 2014

    View full-size slide

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

    View full-size slide

  26. MADRID · NOV 21-22 · 2014

    View full-size slide

  27. MADRID · NOV 21-22 · 2014

    View full-size slide

  28. MADRID · NOV 21-22 · 2014

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. MADRID · NOV 21-22 · 2014

    View full-size slide

  33. MADRID · NOV 21-22 · 2014

    View full-size slide

  34. MADRID · NOV 21-22 · 2014

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. MADRID · NOV 21-22 · 2014

    View full-size slide

  38. MADRID · NOV 21-22 · 2014

    View full-size slide

  39. MADRID · NOV 21-22 · 2014

    View full-size slide

  40. MADRID · NOV 21-22 · 2014

    View full-size slide

  41. MADRID · NOV 21-22 · 2014

    View full-size slide

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

    View full-size slide

  43. MADRID · NOV 21-22 · 2014

    View full-size slide

  44. MADRID · NOV 21-22 · 2014

    View full-size slide

  45. MADRID · NOV 21-22 · 2014

    View full-size slide

  46. MADRID · NOV 21-22 · 2014

    View full-size slide

  47. MADRID · NOV 21-22 · 2014

    View full-size slide

  48. MADRID · NOV 21-22 · 2014

    View full-size slide

  49. MADRID · NOV 21-22 · 2014

    View full-size slide

  50. MADRID · NOV 21-22 · 2014

    View full-size slide

  51. MADRID · NOV 21-22 · 2014

    View full-size slide

  52. MADRID · NOV 21-22 · 2014
    ?

    View full-size slide

  53. MADRID · NOV 21-22 · 2014

    View full-size slide

  54. MADRID · NOV 21-22 · 2014

    View full-size slide

  55. MADRID · NOV 21-22 · 2014

    View full-size slide

  56. MADRID · NOV 21-22 · 2014

    View full-size slide

  57. MADRID · NOV 21-22 · 2014

    View full-size slide

  58. MADRID · NOV 21-22 · 2014

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  66. MADRID · NOV 21-22 · 2014

    View full-size slide

  67. MADRID · NOV 21-22 · 2014

    View full-size slide

  68. MADRID · NOV 21-22 · 2014

    View full-size slide

  69. MADRID · NOV 21-22 · 2014

    View full-size slide

  70. MADRID · NOV 21-22 · 2014

    View full-size slide

  71. MADRID · NOV 21-22 · 2014

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  75. MADRID · NOV 21-22 · 2014

    View full-size slide

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

    View full-size slide

  77. MADRID · NOV 21-22 · 2014

    View full-size slide

  78. MADRID · NOV 21-22 · 2014

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  81. MADRID · NOV 21-22 · 2014

    View full-size slide

  82. MADRID · NOV 21-22 · 2014

    View full-size slide

  83. MADRID · NOV 21-22 · 2014

    View full-size slide

  84. MADRID · NOV 21-22 · 2014

    View full-size slide

  85. MADRID · NOV 21-22 · 2014

    View full-size slide

  86. MADRID · NOV 21-22 · 2014

    View full-size slide

  87. MADRID · NOV 21-22 · 2014

    View full-size slide

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

    View full-size slide

  89. MADRID · NOV 21-22 · 2014

    View full-size slide

  90. MADRID · NOV 21-22 · 2014

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  93. MADRID · NOV 21-22 · 2014

    View full-size slide

  94. MADRID · NOV 21-22 · 2014

    View full-size slide

  95. MADRID · NOV 21-22 · 2014

    View full-size slide

  96. MADRID · NOV 21-22 · 2014

    View full-size slide

  97. MADRID · NOV 21-22 · 2014

    View full-size slide

  98. MADRID · NOV 21-22 · 2014

    View full-size slide

  99. MADRID · NOV 21-22 · 2014

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  102. MADRID · NOV 21-22 · 2014

    View full-size slide

  103. MADRID · NOV 21-22 · 2014

    View full-size slide

  104. MADRID · NOV 21-22 · 2014

    View full-size slide

  105. MADRID · NOV 21-22 · 2014

    View full-size slide

  106. MADRID · NOV 21-22 · 2014

    View full-size slide

  107. MADRID · NOV 21-22 · 2014

    View full-size slide

  108. MADRID · NOV 21-22 · 2014

    View full-size slide

  109. MADRID · NOV 21-22 · 2014
    Relationships

    View full-size slide

  110. MADRID · NOV 21-22 · 2014

    View full-size slide

  111. MADRID · NOV 21-22 · 2014

    View full-size slide

  112. MADRID · NOV 21-22 · 2014

    View full-size slide

  113. MADRID · NOV 21-22 · 2014

    View full-size slide

  114. MADRID · NOV 21-22 · 2014

    View full-size slide

  115. MADRID · NOV 21-22 · 2014

    View full-size slide

  116. MADRID · NOV 21-22 · 2014

    View full-size slide

  117. MADRID · NOV 21-22 · 2014

    View full-size slide

  118. MADRID · NOV 21-22 · 2014

    View full-size slide

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

    View full-size slide

  120. MADRID · NOV 21-22 · 2014

    View full-size slide

  121. MADRID · NOV 21-22 · 2014

    View full-size slide

  122. MADRID · NOV 21-22 · 2014

    View full-size slide

  123. MADRID · NOV 21-22 · 2014

    View full-size slide

  124. MADRID · NOV 21-22 · 2014

    View full-size slide

  125. MADRID · NOV 21-22 · 2014

    View full-size slide

  126. MADRID · NOV 21-22 · 2014

    View full-size slide

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

    View full-size slide

  128. MADRID · NOV 21-22 · 2014

    View full-size slide

  129. MADRID · NOV 21-22 · 2014

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  132. MADRID · NOV 21-22 · 2014

    View full-size slide

  133. MADRID · NOV 21-22 · 2014

    View full-size slide

  134. MADRID · NOV 21-22 · 2014

    View full-size slide

  135. MADRID · NOV 21-22 · 2014

    View full-size slide

  136. MADRID · NOV 21-22 · 2014

    View full-size slide

  137. MADRID · NOV 21-22 · 2014

    View full-size slide

  138. MADRID · NOV 21-22 · 2014

    View full-size slide

  139. MADRID · NOV 21-22 · 2014

    View full-size slide

  140. MADRID · NOV 21-22 · 2014

    View full-size slide

  141. MADRID · NOV 21-22 · 2014

    View full-size slide

  142. MADRID · NOV 21-22 · 2014

    View full-size slide

  143. MADRID · NOV 21-22 · 2014

    View full-size slide

  144. MADRID · NOV 21-22 · 2014

    View full-size slide

  145. MADRID · NOV 21-22 · 2014

    View full-size slide

  146. MADRID · NOV 21-22 · 2014

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide