Embracing Ember Conventions: Loading and Error Substates

Slide 1

Slide 1 text

Embracing loading and error substates Conventions

Slide 2

Slide 2 text

Hi cball_ ! cball.me "

Slide 3

Slide 3 text

What We’ll Cover Why we need conventions Conventions in Ember Application States / Substates Substates in Ember How to implement them # # # # #

Slide 4

Slide 4 text

Why do we need conventions? #

Slide 5

Slide 5 text

We often encounter hard problems.

Slide 6

Slide 6 text

Even simple tasks are hard to get right.

Slide 7

Slide 7 text

What if some of these decisions could be made for you? correctly ^

Slide 8

Slide 8 text

Conventions.

Slide 9

Slide 9 text

“Conventions are too restrictive!”

Slide 10

Slide 10 text

The “Wild West” put files anywhere! name anything! fetch data your way! byo build tools! complete control!

Slide 11

Slide 11 text

Freedom.

Slide 12

Slide 12 text

The “Wild West” real ^

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

How do we avoid the mess?

Slide 15

Slide 15 text

Extract common pain points.

Slide 16

Slide 16 text

Use them to create conventions.

Slide 17

Slide 17 text

Let developers focus on the hard stuff.

Slide 18

Slide 18 text

Bring organization.

Slide 19

Slide 19 text

How?

Slide 20

Slide 20 text

The “Collective Mind”

Slide 21

Slide 21 text

A naming structure Asset concatenation Ways to install addons Serialize/Deserialize JSON A folder structure Asset minification Front-end App Needs

Slide 22

Slide 22 text

○

Slide 23

Slide 23 text

Your app is not a special flower.

Slide 24

Slide 24 text

Spend the bulk of your time where it counts.

Slide 25

Slide 25 text

Rails is proof that this works

Slide 26

Slide 26 text

More benefits please.

Slide 27

Slide 27 text

Conventions breed efficiency.

Slide 28

Slide 28 text

“For us, the biggest unexpected benefit has been leveraging Ember’s framework conventions to just get work done.” - Allen Cheung, Square http://www.talentbuddy.co/blog/building-with-ember-js-advice-for-full-stack-developers-and-more-with-allen-cheung-engineering-manager-at-square/

Slide 29

Slide 29 text

Conventions give you superpowers. http://realitypod.com/wp-content/uploads/2011/03/super-strength.jpg

Slide 30

Slide 30 text

“That just works?! I only wrote 2 lines!” - Me

Slide 31

Slide 31 text

Easy to know your way around projects.

Slide 32

Slide 32 text

Why Conventions? Take away common pain points. Bring organization. Make you more efficient. Give you superpowers. Reduce boilerplate code. Help you know your way around. ⋆ ⋆ ⋆ ⋆ ⋆ ⋆

Slide 33

Slide 33 text

Ember is packed with conventions! #

Slide 34

Slide 34 text

Conventions in Ember come from many real-world apps.

Slide 35

Slide 35 text

I asked for community favorites.

Slide 36

Slide 36 text

Loading/Error Substates Pods Routing Data Binding Naming Conventions Promises Everywhere ember-cli Computed Properties outlet The Resolver Standardized Naming Yes Resource Name -> API Url & Yes, you still made the slides.

Slide 37

Slide 37 text

Powerful.

Slide 38

Slide 38 text

.save() with Ember Data - Transforms Ember Model -> JSON - Figures out POST/PUT - Deals with host, namespace, headers - Handles error/success response - Translates JSON -> properties - Updates Model with new values

Slide 39

Slide 39 text

Slide 40

Slide 40 text

# Let’s talk application state.

Slide 41

Slide 41 text

Buckets of things that occur in your app. Add to cart Pay View item View cart

Slide 42

Slide 42 text

User moves between buckets. Add to cart Pay ' ' ' View item View cart

Slide 43

Slide 43 text

When moving buckets, things can happen. Add to cart View cart ' ' ( ' '

Slide 44

Slide 44 text

Add to cart View cart ' ' ) When moving buckets, things can happen.

Slide 45

Slide 45 text

Inform your user about this!

Slide 46

Slide 46 text

= bad.

Slide 47

Slide 47 text

# Things that happen between states are called substates.

Slide 48

Slide 48 text

# How do substates work in Ember?

Slide 49

Slide 49 text

Ember generates loading and error substates for all routes.

Slide 50

Slide 50 text

// router.js Router.map(function() { this.resource('artist', { path: '/artists/:artist_id' }, function() { }); this.resource('albums', { path: '/artists/:artist_id/albums' }, function() { this.route('popular'); }); this.resource('album', { path: '/albums/:album_id' }, function() { this.resource('comments', function() { }); }); }); & function passed, routes generated & no function, no generated routes

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No conventions = No Ember Inspector!

Slide 53

Slide 53 text

Loading substates

Slide 54

Slide 54 text

Route transitions. * /posts * /posts/2 ' + model:

Slide 55

Slide 55 text

If model hooks return normal objects, transition completes immediately.

Slide 56

Slide 56 text

If model hooks return a promise, transition will wait.

Slide 57

Slide 57 text

Route transitions. * /posts * /posts/2 ' ' API ' + model:

Slide 58

Slide 58 text

Transitions that wait are lazy. (default)

Slide 59

Slide 59 text

If you provide loading route/template, they become eager.

Slide 60

Slide 60 text

(demo lazy / eager)

Slide 61

Slide 61 text

The router automatically transitions to/from the loading substate.

Slide 62

Slide 62 text

Remember ) ?

Slide 63

Slide 63 text

The router automatically transitions to an error substate if there is an error/rejected promise.

Slide 64

Slide 64 text

# How do you implement substates?

Slide 65

Slide 65 text

Now things get fun.

Slide 66

Slide 66 text

> ember g template loading Root Loading Template

Slide 67

Slide 67 text

Any loading substate will show this template unless overridden.

Slide 68

Slide 68 text

(demo)

Slide 69

Slide 69 text

> ember g template albums/loading Sibling Loading Template

Slide 70

Slide 70 text

Loading substate will show this template instead of the root.

Slide 71

Slide 71 text

(demo)

Slide 72

Slide 72 text

> ember g template comments/loading Nested Loading Template > ember g template album/loading

Slide 73

Slide 73 text

Loading substate will show comment loading template.

Slide 74

Slide 74 text

(demo)

Slide 75

Slide 75 text

To render substate templates into named outlets, override the route and the renderTemplate hook. Named Outlets

Slide 76

Slide 76 text

// routes/albums/loading.js export default Ember.Route.extend({ renderTemplate: function() { this.render({ outlet: 'albums'}); } }); Named Outlets

Slide 77

Slide 77 text

> ember g route albums/index Use Actions Loading Sibling

Slide 78

Slide 78 text

Use Actions Loading Sibling // routes/albums/index.js actions: { loading: { doStuff(); return true; } } & return true to use default substate behavior & time slow actions, custom behavior, etc.

Slide 79

Slide 79 text

(demo)

Slide 80

Slide 80 text

Remember, route actions bubble up to parents until handled.

Slide 81

Slide 81 text

Implement templates/routes the same way as loading substates. Error Substates

Slide 82

Slide 82 text

Use {[statusText}}, {{message}} or {{stack}} for extra info in development. Error Substates

Slide 83

Slide 83 text

Error Substates // error.hbs

Mike is sorry. We’ve told him about the error.

{{#if development}} Hey dev. Here’s some more info:

Slide 84

Slide 84 text

Error Substates // controllers/application.js import Ember from 'ember'; import ENV from 'appname/config/environment'; export default Ember.Controller.extend({ development: Ember.computed.equal(ENV.environment, "development"); });

Slide 85

Slide 85 text

(demo)

Slide 86

Slide 86 text

Use Actions Error // routes/application.js actions: { error: { if (tooManyErrors) { userHavingBadTime(); } return true; } } & return true to use default substate behavior

Slide 87

Slide 87 text

Implement Substates Override template/route Event hooks Nested template/route Named outlets Error Substate Bonuses ⋆ ⋆ ⋆ ⋆ ⋆