Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro to EmberJS

7,232 views

Published on

Introduction to EmberJS. Covers a broad overview of EmberJS for beginners. My focus is to help build your mental model of how Ember works.

Published in: Software

Intro to EmberJS

  1. 1. Introduction To Desert Code Camp October 18, 2014 Josh Padnick
  2. 2. You want to build the next great app.
  3. 3. Most of today’s apps use the same paradigm.
  4. 4. RESTful API Web Client Mobile Client Tablet Client
  5. 5. The app exposes a RESTful API. Then we can implement many potential clients against that API.
  6. 6. So what technologies should we use?
  7. 7. RESTful API For today’s talk, the API can be a black box. For Ember, it doesn’t even have to be RESTful, but we prefer that it is.
  8. 8. Tablet Client Mobile Client We could build native apps. But an HTML5 / CSS3 / JS web app will work, too.
  9. 9. Web Client For our web client, we have a few choices.
  10. 10. When does it make sense to choose Ember?
  11. 11. If you want to know what I think… Ember works great if: • You want to build a “desktop-app-like experience” in the browser • You’re dealing with moderate - high complexity in your app. • You want architectural guidance for the long-term at the cost of a steeper learning curve upfront. • You’re a javascript geek and want a “powerful framework” at your fingertips (API, great tools) and you don’t mind digging into the framework code base.
  12. 12. Actually, Ember works great for simple apps, too. But the question is: If you don’t know Ember already, when does it make sense to learn it?
  13. 13. Ember may not be worth the learning curve if: • Building a relatively simple app • You want to launch in less than 6 weeks from start. • You are brand new to javascript. • Ember works great for these use cases if you already know it! • Otherwise, Angular may be a better fit.
  14. 14. The Ember Learning Curve Easily Justify Your Salary! Productivity Key Concepts Understood Time for Ember Data Hello World Effort to Learn Week1 Week2 Week3 Week4 Week5 Week6 Week7 Week8 Week9 Informally based on my experience + 2 colleagues Discover The Ember Way for yourself…
  15. 15. The Ember vs. Angular debate is ongoing. Here are some links for viewing at home: • http://www.benlesh.com/2014/04/embular-part-1-comparing-ember-and.html • http://discuss.emberjs.com/t/why-i-m-leaving-ember/6361 • https://www.quora.com/Client-side-MVC/Is-Angular-js-or-Ember-js-the-better-choice- for-JavaScript-frameworks
  16. 16. My Goals for Today
  17. 17. 1. Get you excited about Ember 2. Give you a mental model that will accelerate your process of learning it.
  18. 18. What We’ll Cover Today
  19. 19. • Brief overview of the Ember ecosystem • See Ember in action • Show you the “Ember mental model” • Discuss The Ember Way™
  20. 20. About Me Josh Padnick josh.padnick@gmail.com 602.432.3789 http://JoshPadnick.com • About to launch medical appointment reminders product built in Ember. • Trained two engineers on Ember • Earned around 500 Stack Overflow reputation points for Ember answers. • Using Ember for a new startup project. • Professional AWS Consultant & Professional Trainer for EmberJS.
  21. 21. Special Thanks to the Ember Community! • I have had 100% of questions asked on StackOverflow and discuss.EmberJS.com answered. • I especially appreciate the responses of:
  22. 22. Overview
  23. 23. Three Players in the Ember Ecosystem
  24. 24. Ember Ember Data Ember CLI
  25. 25. Ember A framework for building ambitious web applications. • Helps you easily manage app state • Handles the boilerplate of building a web app • Gives you lots of tools to get your job done Ember Ember Data Ember CLI
  26. 26. Ember Data A library for robustly managing model data in your Ember.js applications. • Represents models in local browser store • Read/write with any persistence store (most commonly a RESTful API) • Kind of like an ORM for Javascript Ember Ember Data Ember CLI
  27. 27. Ember CLI The command-line interface for Ember • Instantly scaffold a new ember project • CLI-based unit and integration tests • One-command deployment • ES6 transpiling Ember Ember Data Ember CLI
  28. 28. Let’s See a Real Ember App
  29. 29. Later on, we’ll deal live with Ember code.
  30. 30. Mental Model
  31. 31. How We Go From… http://MyEmberApp.com/cats To… http://MyEmberApp.com/cats Trending Cat Pictures
  32. 32. GET http://MyEmberApp.com/cats User makes an HTTP GET Request
  33. 33. GET http://MyEmberApp.com/cats Router (router.js) Ember looks up /cats in the Ember App’s router.js
  34. 34. GET http://MyEmberApp.com/cats Router (router.js) Ember looks up this URL in the Ember App’s router.js
  35. 35. GET http://MyEmberApp.com/cats Router (router.js) Ember looks up this URL in the Ember App’s router.js ECMAscript 6 imports! ECMAscript 6 export Tells the Ember router how to handle URL changes (use the browser “history”, use a “#”, etc.)
  36. 36. GET http://MyEmberApp.com/cats Router (router.js) Ember looks up this URL in the Ember App’s router.js Ember uses lines 9 - 11 to map a given URL to a particular “state” in the app.
  37. 37. For now, you can think of “state” as the value of various properties, as well as the “currently active URL.”
  38. 38. Visualizing an Ember Routes File SOURCE: Ember.js in Action. Chapter 3.3. Joachim Haagen Skeie.
  39. 39. =
  40. 40. GET http://MyEmberApp.com/cats Router (router.js) Ember looks up /cats in the Ember App’s router.js
  41. 41. GET http://MyEmberApp.com/cats Router (router.js) Ember looks up this URL in the Ember App’s router.js Ember finds a “cats” route!
  42. 42. GET http://MyEmberApp.com/cats Router (router.js) Cats Route (e.g. /routes/cats.js) Ember looks for a file corresponding to the cats route. It finds one, it loads the cats route.
  43. 43. GET http://MyEmberApp.com/cats Router (router.js) Cats Route (e.g. /routes/cats.js) Ember looks for a file corresponding to the cats route. It finds one, so it loads the cats route. If Ember didn’t find a cats route, it would use Convention over Configuration to create one!
  44. 44. GET http://MyEmberApp.com/cats Router (router.js) Cats Route (e.g. /routes/cats.js)
  45. 45. This shows a common use of the “model hook”. We tell Ember Data here to make an API call to GET /cats and then we’ll have these cats available for local use as Ember Records.
  46. 46. GET http://MyEmberApp.com/cats Router (router.js) Cats Route (e.g. /routes/cats.js)
  47. 47. GET http://MyEmberApp.com/cats Router (router.js) Cats Route (e.g. /routes/cats.js) Ember Data makes an HTTP GET request for “all cats” RESTful API
  48. 48. GET http://MyEmberApp.com/cats Router (router.js) Cats Route (e.g. /routes/cats.js) The API responds. Ember Data stores the response locally as cat models. RESTful API
  49. 49. What’s a model? • A model is a class that defines the properties and behavior of the data that you present to the user. • Basically, a javascript object plus some Ember fanciness. • In Ember, models are defined by extending DS.Model. • An instance of a model is known as a “record” but it’s still just an instance of a DS.Model
  50. 50. Ember Model Basics • A model’s property can be a literal (as we saw with all of cat’s properties). • Or a model’s property can be to another model
  51. 51. ’s Take on Ember Models • Your Ember models are a projection of your API’s models. • Your Ember models should be the projection of your “real” data model that makes sense for a local user. • My RDBMS may have a bunch of tables which I JOIN in a query, and I might represent that as a single Ember model. • Basically, think about how you want your data locally, and model accordingly.
  52. 52. Ember hopes you’ll give it JSON, but really it can handle anything. • Ember’s default adapter is called the DS.RESTAdapter and is based off of Ruby on Rails conventions. • I built an API using Play Framework (Java) and it was easy to tweak it to speak Ember. • If you can’t change the API, Ember provides serializers which let you do custom transforms between the API data that you actually get and the data format that Ember expects.
  53. 53. GET http://MyEmberApp.com/cats Router (router.js) Cats Route (e.g. /routes/cats.js)
  54. 54. GET http://MyEmberApp.com/cats Router (router.js) Cats Route (e.g. /routes/cats.js) Cats Controller (e.g. /controllers/cats.js) The route sets up the cats controller
  55. 55. Ember Controllers • “Controller” is probably the wrong term. • It’s really more of a view-model. • The controller’s job is to decorate the model. • If there’s a property that’s primarily for the UI, model it in the controller.
  56. 56. Ember Controllers • In a moment, we’re going to render our template. • When we do, the template will look to the controller to see what model is associated with this route. • You could either have a single model (e.g. one cat) or an array of models (e.g. many cats) associated with the route’s model. • Single cat —> Ember.ObjectController • Many cats —> Ember.ArrayController
  57. 57. GET http://MyEmberApp.com/cats Router (router.js) Cats Route (e.g. /routes/cats.js) Cats Controller (e.g. /controllers/cats.js) The route sets up the cats ArrayController
  58. 58. GET http://MyEmberApp.com/cats Router (router.js) Cats Route (e.g. /routes/cats.js) Cats Controller (e.g. /controllers/cats.js) The route sets up the cats ArrayController If Ember didn’t find a cats controller, it would use CoC to create one!
  59. 59. This property only makes sense in the UI. We wouldn’t store this in a database. This is known as a computed property. It updates when any property in the property() method changes.
  60. 60. GET http://MyEmberApp.com/cats Router (router.js) Cats Route (e.g. /routes/cats.js) Cats Controller (e.g. /controllers/cats.js)
  61. 61. GET http://MyEmberApp.com/cats Router (router.js) Cats Route (e.g. /routes/cats.js) Cats Controller (e.g. /controllers/cats.js) Cats View (e.g. /views/cats.js) The route sets up the cats view.
  62. 62. Ember Views • Ember views render a Handlebars template and insert it into the DOM. • I do occasionally use views to handle basic jQuery • But you’ll be surprised how rarely you use them. • That’s why I show the view in gray. You should be surprised that you’re using it.
  63. 63. GET http://MyEmberApp.com/cats Router (router.js) Cats Route (e.g. /routes/cats.js) Cats Controller (e.g. /controllers/cats.js) Cats View (e.g. /views/cats.js)
  64. 64. GET http://MyEmberApp.com/cats Router (router.js) Cats Route (e.g. /routes/cats.js) Cats Controller (e.g. /controllers/cats.js) Cats View (e.g. /views/cats.js) The view renders the cats Handlebars Template Cats Template (e.g. /templates/cats.js)
  65. 65. Ember Templates • Ember uses Handlebars to render templates. • Ember embraces the “logicless templates” paradigm, perhaps to a fault. • Templates are easy to learn, so I won’t spend much time on them, but here’s a quick example.
  66. 66. I want to show pictures of cats, so let’s add a pictureUrl property to the cat model.
  67. 67. For demo purposes only, we’re going to fudge the model in our route
  68. 68. And finally here’s our Handlebars template.
  69. 69. And now the cats themselves!
  70. 70. To summarize, here’s the flow we saw…
  71. 71. GET http://MyEmberApp.com/cats Router (router.js) Cats Route (e.g. /routes/cats.js) Cats Controller (e.g. /controllers/cats.js) Cats View (e.g. /views/cats.js) Cats Template (e.g. /templates/cats.js)
  72. 72. What We Didn’t Cover
  73. 73. Here’s the Ember universe of concepts.
  74. 74. • Templates • Components • Views • Naming Conventions (Resolver) • Ember Objects • Helpers • Routes • Router • Controllers • Models • Testing • Ember Data • Local Store • Initializers • Dependency Injection / Container • Run loop • Promises • Adapters • Serializers • Mixins
  75. 75. And here’s what we covered today…
  76. 76. • Templates • Components • Views • Naming Conventions (Resolver) • Ember Objects • Helpers • Routes • Router • Controllers • Models • Testing • Ember Data • Local Store (indirectly) • Initializers • Dependency Injection / Container • Run loop • Promises • Adapters (briefly) • Serializers (briefly) • Mixins
  77. 77. Those other concepts will be part of your learning curve.
  78. 78. Ember makes extensive use of promises. Once you understand them, they’re a pleasure, but until you do, things can feel hard. So spend time really getting familiar with them.
  79. 79. The Ember Way™
  80. 80. Ember is an opinionated framework. That means that it wants you to use a certain architecture.
  81. 81. The various ways in which you embrace Ember’s underlying opinions on architecture are known collectively as The Ember Way.
  82. 82. ’s Take on The Ember Way 1. It’s not authoritatively outlined anywhere. But be thinking about The Ember Way while you learn. 2. Avoid direct DOM manipulation. Use Ember’s state management instead. This means avoiding jQuery plugins that do DOM manipulation. 3. Leverage Ember’s bindings, computed properties, and observers. Update your templates by updating properties, not the DOM. 4. Ember has lots of async going on, but if you learn each of the event hooks, it won’t bite you. 5. Use your routes to update “model state” and controllers to update “view state”. Try to avoid handling model state in controllers.
  83. 83. Next Steps
  84. 84. Learning Ember • I find the CodeSchool.com EmberJS tutorial among the best. It’s $29/month. Stat here. • The EmberJS.com Guide is excellent, but only give you “the top 70% of the iceberg”. But use this as your starting point for reference. • The EmberJS API is indispensable. It’s important you learn how to use it. Also, always know what this refers to so that you can look up available properties in Ember.
  85. 85. Learn How to Debug Ember! • If you learn this skill, your ability to “fill in the mental model gaps” will be much easier, and your learning curve will shorten dramatically. • Everything you need is at this outstanding 12 minute video by Robin Ward: http://eviltrout.com/2014/08/16/debugging-ember- js.html
  86. 86. Ramping Up on Ember • If you’re stuck, go to StackOverflow • If you’re curious about best practices or have a general question, use the Ember Discussion Forum.
  87. 87. Advanced Ember Here are some great resources for when you’re ready to dig in to the next level: • http://balinterdi.com/ • http://www.toptal.com/emberjs/a-thorough-guide- to-ember-data • http://emberwatch.com/ • http://eviltrout.com/
  88. 88. Thank you, Now go build something cool! Josh Padnick josh.padnick@gmail.com 602.432.3789 http://JoshPadnick.com

×