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

New to Ember: What ARE All These Things?

Jenn
March 20, 2019

New to Ember: What ARE All These Things?

New to Ember? So am I! What are all these things? A new code base often means unfamiliar words and paradigms. I definitely had my share in this Ember new world. When I saw mut, I thought of adorable dogs. When I saw can I thought of soup.

Eventually, I realized the mystery words are part of Ember addons! But with so many to learn, I was quickly overwhelmed. Let me walk you through my exploration of addons. How do you balance code time with addon learning time? From ember-a11y-testing to zoey, we’ll dig into Ember & its addons, and strategies for persistent, sustained learning anyone can rely on

Jenn

March 20, 2019
Tweet

More Decks by Jenn

Other Decks in Technology

Transcript

  1. New to
    What are all of these things?
    Jennifer Wong
    @mybluewristband

    View full-size slide

  2. The ABCs
    of Ember
    aka

    View full-size slide

  3. ADD AN IMAGE OF CAT

    View full-size slide

  4. MUSHROOM MUSHROOM!

    View full-size slide

  5. WHAT IS EMBER?
    • Coming from a React background
    • Rock & Roll with Ember.js
    • Version 20180104 - lol oops!
    • Version 20180801 - yay!
    • Envoy administrative web app
    • The deep end…

    View full-size slide

  6. A?
    • Array?
    • Function that creates an
    Ember.NativeArray from an Array-like
    object
    • Ember arrays allow you to use observable
    methods

    View full-size slide

  7. Basic Dropdown
    • “…why would you want to use a third party
    addon for such a simple thing?”
    • “Well, there are two kinds of people. Those
    who think that dropdowns are an easy thing
    and those who have actually built one.”
    • Indeed.

    View full-size slide

  8. Thomas Altfather Good

    View full-size slide

  9. Can
    • Simple authorization add-on for Ember
    • Abilities!

    View full-size slide

  10. Computed Property
    • Lets you declare functions as properties
    Erik Charlton
    DOES COMPUTE

    View full-size slide

  11. Changesets
    • https://github.com/poteto/ember-
    changeset
    • Set of valid changes to be applied onto any
    Object
    • Each change is tested against an optional
    validation, and if valid, the change is stored
    and applied when executed.

    View full-size slide

  12. (Ember) Data
    • DS = Data Store
    • … I think?
    • “…a powerful set of tools for formatting
    requests, normalizing responses, and
    efficiently managing a local cache of data.”

    View full-size slide

  13. Decorators!
    • Me: “Hmm people are really excited about
    this. It must be important.”
    • “…provide a set of decorators which can be
    used to write native classes with every
    standard feature that is available in Ember.”

    View full-size slide

  14. Ember the
    Movie!

    View full-size slide

  15. Flash Messages
    • https://github.com/poteto/ember-cli-flash
    • “…adds a simple flash message service and
    component to your app.”
    • Actually, Envoy’s homegrown flash
    messages!
    Chris Hunkeler

    View full-size slide

  16. Glimmer
    • Glimmer is a rendering engine used in
    Ember.
    • “However, in order to build Ember apps,
    you don't need to know anything about
    Glimmer, other than it's super fast and that
    the contributors to the core codebase love
    to geek out about it.”

    View full-size slide

  17. Helpers
    • Composable Helpers
    • Helpers that enable more declarative
    templating
    • Truth Helpers
    • HTMLBars template helpers for additional
    truth logic in if and unless statements
    • Test Helpers
    • A test-framework-agnostic set of helpers
    for testing Ember.js applications.

    View full-size slide

  18. Inject (as Service)
    • A Service is an Ember object that lives for
    the duration of the application
    • Can be made available in different parts of
    your application.
    • Useful for features that require shared state
    or persistent connections.

    View full-size slide

  19. JSON API Adapter
    • By default, Ember Data is designed to work
    out of the box with JSON:API.
    • JSON:API is a formal specification for
    building conventional, robust, and
    performant APIs.
    • Not an Ember-specific thing!
    • https://jsonapi.org/
    Rodrigo Paredes

    View full-size slide

  20. Ember.K
    I DON’T KNOW.

    View full-size slide

  21. Link-to
    • Component!
    • Creates a link to a route!
    Gage Skidmore

    View full-size slide

  22. Mirage
    • A client-side server to help you build, test and demo your
    Ember app
    • A fake server that runs in the client, and can be used in
    both development and testing

    View full-size slide

  23. Naming Conventions

    View full-size slide

  24. Outlet
    • Each template will be rendered into
    the {{outlet}} of its parent route's template
    • Parents (templates) are an outlet for their
    children (templates) ;)

    View full-size slide

  25. Power Select
    “This project aims to build a select
    component that has all the features of existing
    libraries but allows you to leverage Ember's
    primitives.”

    View full-size slide



  26. ☹ ☹






    View full-size slide

  27. QUnit
    • QUnit
    • A JavaScript Unit Testing Framework
    • Ember QUnit
    • Provides QUnit-specific wrappers
    around ember-test-helpers
    Q
    S.C. Atkinson

    View full-size slide

  28. RSVP
    • Simple tools for organizing asynchronous
    code
    • Created before Promises were in browser
    • “A tiny implementation of Promises/A+”
    Tim Pierce

    View full-size slide

  29. • Ember CLI command
    • Starts the server.
    • Aliases: ember s, ember serve
    ember s(erver)
    Roberto Faccenda

    View full-size slide

  30. • Ember Concurrency
    • An Ember Addon that makes it
    easy to write concise, robust, and
    beautiful asynchronous code
    • Task primitive ✨
    Task

    View full-size slide

  31. Ember View
    • https://www.emberjs.com/api/ember/2.8/
    classes/Ember.View
    DEPRECATED

    View full-size slide

  32. Wormhole
    • Provides a component that allows for
    rendering a block to a DOM element
    somewhere else on the page.
    • …but why?
    • Because Ember Modal Dialog

    View full-size slide










  33. ☹ ☹

    View full-size slide

  34. X-Select
    • A select component based on the
    native HTML select that worked with
    Ember actions
    • Couldn’t use the native
    • Mutant

    View full-size slide

  35. Yield
    • Block form components can be passed a
    Handlebars template
    • That template is rendered inside the
    component's template wherever
    the {{yield}} expression appears.

    View full-size slide

  36. How do we
    keep
    learning?

    View full-size slide

  37. Learning!
    • Stay diligent! Ask questions!
    • Pop into the Discord!
    • Don’t be afraid to ask your coworkers!
    • Check out the Ember Guides!
    • Subscribe to The Ember Times!
    • Use Ember Observer!
    • Sign up for Ember Map!

    View full-size slide

  38. Thanks to
    Bill, Chris, Eric, & Esteban
    Ryan, Steve, Tom, & Yohan

    View full-size slide

  39. Thank you!
    Jennifer Wong
    @mybluewristband

    View full-size slide