Intro toEmberJS8 Lessons in Ember
by Sean Goresht
Things I wish I knew when I started learning
Overview
- What is EmberJS?
- EmberJS, vs. other libraries
- When to use EmberJS
- Architecture, structuring an application
- Routes
- Models
- Controllers
- Components
- 8 Lessons Learned
- Questions
About Me
Disclaimer
The Problem
- 'Divitus'
- 'Classitus'
- Heavier AJAX-based apps, more client-focused
- Lack of structure
- Abundance of frameworks
So You're Starting a New Project
Your Options
Introducing EmberJS
Emberjs is ahigh-level javascript library for "ambitious applications"
EmberJS is a framework for ambitious applicationsThe EmberJS website
When to Use Ember?
Content-heavy applications:
- Client-heavy applications: ex. job boards, forums, time tracking software, real-time data visualization, dashboards
- Blogs
- E-Commerce Sites
- CMS
Don't use ember if you're building a:
- Game
- Traditional website
- (an) upgrade to an existing website
- Complex server-side application (comparing data)
EmberJS is MVC
What Makes Ember
- Ember (core) RunLoop(Backburner JS)
- Router
- Handlebars(soon to beHTMLBars)
- View Layer (engine)
- *jQuery
- Model Layer
- Build tools
- Bower
- Brocoli
- ES6 resolver
A Sample Ember App
8 Useful Ember Tips I wish I'd Known
Documentation is for Pussies
- If you have to look it up,you're probably doing it wrong
- Don't access a parent controller's property from a component
- Don't perform a transition from a component's controller
- As a general rule, if it was easy, you did it right
Sharing Can Be Easier
- You should probably not use
needs: []
- instead, put all shared logic in the implicitly-shared controllers: ex.
index
orApplicationController
Bubbling up Actions
4 Simple steps...
- Wire up action normally under actions hash
- Put in
@sendAction("{passedInAction}")
- Pass in the action, to the component (hbs) – make sure to include quotes!
- Code in the actions hash of your controller
Authenticated Routes
All you need to do is use beforeModel: function(){}
@route() vs. @resource()
@resource
was depreciated in 1.7+- difference:
@route
preserves scope;@resource
'resets' scope
Keeping Components Dumb
Ask yourself these three questions:
- Are components as “dumb” as possible? Are they read-only, and encapsulated?
- Have you created more than 1 route for a given functionality? If so, have you grouped them together, using template partials?
- Are shared functionalities and properties created under shared controllers and routes? For example, application controller and application route. (See checking for admin access)
Engaging the Community
- Follow emberjs on twitter
- Join the IRC:#emberjs
- Post onstackoverflowandEmber Discuss
- Surround yourself with ember people (hard), or check out services like codementor
- Find yourself an ember guru
Working with Ember Data
- Ember Data is tricky!
- Be prepared to look at source code
- Must have access to API specification
- Be prepared to write serializers (either way!)
- Embedded records: natively work, but with caveats
- In general: ember data works, but use at your own risk