Building Web Apps with Ember.js: Write Ambitious JavaScript

187 Pages·2014·11.75 MB·English

by  Jesse Cravens

Building Web Apps with Ember.js
B
If you’re a web developer interested in building scalable single-page
u
applications—full-stack, browser-based apps that connect to a backend—
i
this practical guide shows you how to use Ember.js, the popular JavaScript l
d
framework based on the model-view-controller (MVC) architectural pattern.
i
n
Through the course of the book, you’ll learn how to build a prototype
g
Ember application (a musician index called Rock’n’Roll Call), using routers,

W
templates, models, controllers, and views. You’ll also understand how
Ember’s convention over configuration approach helps you persist data, e
build backend technologies, and create widgets for developing production- b
capable applications that behave like desktop software. A
p
■ Set up workflow management and boilerplate code creation p
■ Learn how Ember’s “developer ergonomics” help you use s

less code w
Building
■ Write templates for the book’s prototype with Handlebars.js i
t
■ Use routers to manage application states without reloading h

the page E
■ Connect controllers and views with events, and sync data with m Web Apps with
data-binding
b
■ Build an Ember backend with a RESTful API or Ruby on Rails e
r
■ Use the Ember Data library to persist data and talk to the .j
s E mber.js
backend
■ Write reusable encapsulated widgets to extend your applications
Jesse Cravens, a principal web engineer at frog design, works with leading
companies to design, engineer, and bring meaningful products and services to
market. Jesse is currently focused on single-page web applications, the mobile
web, and HTML5.
Thomas Q Brady, Technology Director at Reaction, Inc., has built back-office
software, business simulations, interactive marketing, high-fidelity prototype
hardware and software, Arduino-powered bluetooth caller ID watches, and web &C WRITE AMBITIOUS JAVASCRIPT
applications for clients and for fun. Bra
rv
ae
dn
ys
JAVASCRIPT Twitter: @oreillymedia
facebook.com/oreilly
US $29.99 CAN $31.99
ISBN: 978-1-449-37092-3
Jesse Cravens & Thomas Q Brady
www.it-ebooks.info
Building Web Apps with Ember.js
B
If you’re a web developer interested in building scalable single-page
u
applications—full-stack, browser-based apps that connect to a backend—
i
this practical guide shows you how to use Ember.js, the popular JavaScript l
d
framework based on the model-view-controller (MVC) architectural pattern.
i
n
Through the course of the book, you’ll learn how to build a prototype
g
Ember application (a musician index called Rock’n’Roll Call), using routers,

W
templates, models, controllers, and views. You’ll also understand how
Ember’s convention over configuration approach helps you persist data, e
build backend technologies, and create widgets for developing production- b
capable applications that behave like desktop software. A
p
■ Set up workflow management and boilerplate code creation p
■ Learn how Ember’s “developer ergonomics” help you use s

less code w
Building
■ Write templates for the book’s prototype with Handlebars.js i
t
■ Use routers to manage application states without reloading h

the page E
■ Connect controllers and views with events, and sync data with m Web Apps with
data-binding
b
■ Build an Ember backend with a RESTful API or Ruby on Rails e
r
■ Use the Ember Data library to persist data and talk to the .j
s E mber.js
backend
■ Write reusable encapsulated widgets to extend your applications
Jesse Cravens, a principal web engineer at frog design, works with leading
companies to design, engineer, and bring meaningful products and services to
market. Jesse is currently focused on single-page web applications, the mobile
web, and HTML5.
Thomas Q Brady, Technology Director at Reaction, Inc., has built back-office
software, business simulations, interactive marketing, high-fidelity prototype
hardware and software, Arduino-powered bluetooth caller ID watches, and web &C WRITE AMBITIOUS JAVASCRIPT
applications for clients and for fun. Bra
rv
ae
dn
ys
JAVASCRIPT Twitter: @oreillymedia
facebook.com/oreilly
US $29.99 CAN $31.99
ISBN: 978-1-449-37092-3
Jesse Cravens & Thomas Q Brady
www.it-ebooks.info
Building Web Apps with
Ember.js
Jesse Cravens and Thomas Q Brady
www.it-ebooks.info
Building Web Apps with Ember.js
by Jesse Cravens and Thomas Q Brady
Copyright © 2014 Jesse Cravens and Thomas Q Brady. All rights reserved.
Printed in the United States of America.
Published by O’Reilly Media, Inc. , 1005 Gravenstein Highway North, Sebastopol, CA 95472.
O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are
also available for most titles (http://my.safaribooksonline.com). For more information, contact our corpo‐
rate/institutional sales department: 800-998-9938 or [email protected].
Editors: Simon St. Laurent and Brian MacDonald Indexer: Judy McConville
Production Editor: Kara Ebrahim Interior Designer: David Futato
Copyeditor: Jasmine Kwityn Cover Designer: Ellie Volckhausen
Proofreader: Amanda Kersey Illustrator: Rebecca Demarest
July 2014: First Edition
Revision History for the First Edition
2014-07-07: First Release
See http://oreilly.com/catalog/errata.csp?isbn=9781449370923 for release details.
Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of
O’Reilly Media, Inc. Building Web Apps with Ember.js, the image of a wood dormouse, and related trade
dress are trademarks of O’Reilly Media, Inc.
Many of the designations used by manufacturers and sellers to distinguish their products are claimed as
trademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trade‐
mark claim, the designations have been printed in caps or initial caps.
While every precaution has been taken in the preparation of this book, the publisher and authors assume
no responsibility for errors or omissions, or for damages resulting from the use of the information con‐
tained herein.
978-1-449-37092-3
[LSI]
www.it-ebooks.info
Table of Contents
Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii
1. Introducing Ember.js and Ambitious Web Applications. . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
What Is an “Ambitious Web Application”? 1
Ambitious Web Applications Are Not Documents 2
Ambitious Web Applications Are Stateful 2
Ambitious Web Applications Are Long-Lived 4
Ambitious Web Applications Have Architecture 5
What Is Ember.js? 7
Why Choose Ember? 7
Developer Ergonomics? 8
What’s an ORM? 8
What Is Ruby on Rails? 9
What Is Node.js? 9
Express.js 9
2. The Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Hello, World Wide Web 11
SimpleHTTPServer: Just Like It Says on the Tin 13
Data Binding 15
But Where’s All the Code? 16
Uh, What’s a Router? 17
Ember in Action 18
Wrapping Things Up 21
3. Ember Boilerplate and Workflow. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Git 25
What Is Yeoman? 26
iii
www.it-ebooks.info
Installing Yeoman 26
Using Yo’s Ember Application Generator 27
Installing Dependencies 27
Install the Generator 28
Running the Generator 29
Using Bower 33
Grunt 34
Build, Run, Test 35
Debugging with the Ember Inspector for Chrome and Firefox 38
Wrapping Things Up 43
4. Building the RocknRollCall Prototype: Templates. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Rock ‘n’ Roll 45
Starting with HTML 47
The Basics of Handlebars.js 48
Variables 51
Linking with the {{link-to}} Helper 52
Input with the {{input}} Helper 53
Lists with the {{each}} Helper 56
Conditionals with the {{if}} and {{else}} Helpers 58
Capturing User Interaction with the {{action}} Helper 59
Bound Attributes 60
Creating Custom Helpers 62
Wrapping Things Up 65
5. Building the RocknRollCall Prototype: The Router, Routes, and Models. . . . . . . . . . . . . 67
URLs : The Web :: “Saved Game Passwords” : The Nintendo Entertainment
System 68
Routing 69
The Router 71
Dynamic Routes 75
Routes 76
Models 78
Promises, Promises 80
The model() Method 81
Wrapping Things Up 83
6. Building the RocknRollCall Prototype: Controllers, Views, Data Binding, and Events. . 85
Controllers 85
Computed Properties 89
The Power of Promises and the model Method 90
Views 97
iv | Table of Contents
www.it-ebooks.info
Wrapping Things Up 98
7. Persisting Data. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Not Rolling Our Own Ajax 99
There Must Be a Better Way 102
Ember Client-Side Persistence Libraries 102
Ember Data 102
Ember Model 102
Ember Restless 103
Ember Persistence Foundation 103
An Ember Data Deep Dive 103
Setting Up the Router and Activity View for the Activity State 103
Models 104
Persisting Records Based on User Interaction 106
Abstraction Layers: Store, Serializers, and Adapters 109
Ember Data Store 109
Serializer 110
Adapters 111
Wrapping Things Up 115
8. Building an Ember Backend. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
RESTful Web Service APIs 118
Ember Data RESTAdapter 118
EAK (Ember App Kit) API Stubs with Express 118
Why Use Rails? 123
Managing Dependencies with RVM (Ruby Version Manager) and Bundler 123
Installing Rails 124
Generating the Initial Application 124
Updating the Gemfile 125
Removing TurboLinks 126
Understanding Rails MVC and the Single-Page Application 127
Running Tests 129
Adding Ember 130
Wrapping Things Up 136
9. Ember Components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
The Anatomy of an Ember Component 138
Create a Template 138
Extending Ember.Component 140
Building a Heat Map Visualization with D3 141
Table of Contents | v
www.it-ebooks.info
Wrapping Things Up 145
10. Ember Testing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Ember Testing with Ember App Kit, Qunit, and Testem 148
Testem and QUnit Test Runners 150
Ember Client-Side Integration Testing 152
Helpers 153
Testing the Index Page 153
Testing the Activities Route 155
Ember Unit Testing 158
Using Ember-Qunit 160
Unit Testing Routes 161
Using Fixtures 162
Unit Testing Models 164
Wrapping Things Up 164
Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
vi | Table of Contents
www.it-ebooks.info
Preface
Building Web Apps with Ember.js
Welcome to Building Web Apps with Ember.js! This book is largely about building
production-capable, browser-based appplicatons. Some might call these single-page
apps while others say HTML5 apps, client MVC apps, or rich Internet apps; but in the
end, these types of applications are one and the same: the web browser is the applica‐
tion platform, and the server provides remote service endpoints. After years of writ‐
ing and using many of the solutions available to manage complex applications of this
type, we have settled on Ember.js as our primary toolset. In this book, we will attempt
to both teach you what we know about Ember, and, along the way, demonstrate for
you why it has become our primary toolset for building web applications.
In 2005, I (Jesse) discovered JavaScript and the XMLHttpRequest object while working
at a digital agency that deployed .NET and Drupal applications with rich, Flash and
web frontends. At the time, JavaScript was a disrespected “toy” language used to
sprinkle functionality onto the top of traditional web applications. Ironically, much of
the JavaScript work I did then involved using flashvars to create a bridge between
PHP and browser-based Flash applications.
But, at the time, Flash frontends were a necessary evil. Browsers were largely incapa‐
ble of supporting rich, interactive experiences, and respectable JavaScript libraries
like MooTools, YUI, and Dojo were only beginning to mature.
As I began taking additional risks by using more and more JavaScript in my applica‐
tions, I started to find other like-minded developers that also believed that browsers
would evolve and that JavaScript was more than just a toy language. We believed Java‐
Script was a full-featured, object-oriented, professional language that was capable of
being used to build high-performing production applications. A strong community
began to evolve, fueled largely by pioneers like Douglass Crockford, John Resig, Paul
Irish, and Christian Heilmann to name a few, and eventually frontend developer be‐
came a professional job class in many organizations.
vii
www.it-ebooks.info
In 2007, I took my JavaScript skills to the enterprise. I was hired to begin building a
complex, rich Internet application within an enterprise J2EE stack. This introduced
me to many of the most common challenges presented by large-scale development:
lack of JavaScript and frontend expertise, server-centric web legacy, complex cross-
browser and mobile-web fragmentation compatibility requirements, and lack of pro‐
visioned desktop and development tooling for frontend developers, just to name a
few. Being faced with all these limitations was some of the most challenging work of
my career—not to mention overcoming the naysayers that didn’t want to see the end
of safe, traditional web applications.
Over the next couple of years, I focused solely on implementing and deploying a sol‐
ution that was in many ways before its time. Many of the tools that are available today
were nascent, or nonexistent at the time, including client MV* libraries, client-side
routing and object relational mappers (ORMs), JavaScript templates, JavaScript
promises, async flow control libraries, and web components. Nevertheless, my team
and I dreamed up and implemented custom solutions within the parameters of the
project timelines and requirements. Overall it was a success, and our client MVC
framework still remains in production today.
Since 2009, I have worked on numerous applications using Backbone, Angular, and
Ember. But today, I often recommend Ember.js to the clients I work with. This is pri‐
marily due to the fact that the conventions support well-known web application de‐
velopment patterns that I have custom written or pieced together from multiple open
source libraries. Here, are the high level concepts that, in my opinion, make Ember so
valuable:
• Ember’s object model supports a classic and well understood, object-oriented
pattern of class inheritance through extend, object initialization, getters and set‐
ters, and class monkey patching.
• Ember models, controllers, and components extend the Object class, which en‐
sures that these objects inherit Ember’s powerful default data binding.
• The router supports complex nesting for URL-driven applications that manage
application state in a conventional way that can be understood by those with
web-server-routing backgrounds.
• Recently, build, workflow, and testing tools in Ember have matured and become
intuitive.
• Ember’s only dependencies are on jQuery and Handlebars.js, two very well-
known and documented libraries.
• Finally, the community is vibrant, passionate, and extremely active.
In late 2012 and 2013, Thomas Brady and I found ourselves working on numerous
ambitious web UIs in our work at frog design. Despite the nascency of the framework
viii | Preface
www.it-ebooks.info