Building Web Apps with Ember.js: Write Ambitious JavaScript

by Jesse Cravens, Thomas Q Brady

Overview

If you’re a web developer interested in building scalable single-page applications—full-stack, browser-based apps that connect to a backend—this practical guide shows you how to use Ember.js, the popular JavaScript framework based on the model-view-controller (MVC) architectural pattern.

Through the course of the book, you’ll learn how to build a prototype Ember application (a musician index called Rock’n’Roll Call), using routers, templates, models, controllers, and views. You’ll also understand how Ember’s convention over configuration approach helps you persist data, build backend technologies, and create widgets for developing production-capable applications that behave like desktop software.

• Set up workflow management and boilerplate code creation
• Learn how Ember’s “developer ergonomics” help you use less code
• Write templates for the book’s prototype with Handlebars.js
• Use routers to manage application states without reloading the page
• Connect controllers and views with events, and sync data with data-binding
• Build an Ember backend with a RESTful API or Ruby on Rails
• Use the Ember-Data library to persist data and talk to the backend
• Write reusable encapsulated widgets to extend your applications

Product Details

ISBN-13:	9781449370886
Publisher:	O'Reilly Media, Incorporated
Publication date:	07/09/2014
Sold by:	Barnes & Noble
Format:	eBook
Pages:	188
File size:	11 MB
Note:	This product may take a few minutes to download.

About the Author

Jesse is a Principal Web Engineer at frog where he works with the world’s leading companies, helping them to design, engineer, and bring to market meaningful products and services. With 12 years of experience in web application development, Jesse is currently focusing on single page web applications, the mobile web, and HTML5.

Thomas Q Brady has been sketching and prototyping since he was barely able to read, starting with the Commodore Vic 20. Considering his prototypes more toys than anything else, he assumed his collegiate training should be in something more employable, like a double-major arts degree in psychology and philosophy. Later, Thomas fell backward into a legitimate career as a design technologist at frog. Along the way, he has built run-the-business back-office software, business simulations, interactive marketing, high-fidelity prototype hardware and software, Arduino-powered bluetooth caller ID watches and even some web applications for clients and for fun. Along the way, Thomas has enjoyed the opportunity to blog, both independently and for-hire, author a couple whitepapers and even file a couple patents.

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 Arc Stateful 2

Ambitious Web Applications Arc 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

Expresses 9

2 The Basks 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

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

Wrapping Things Up 98

7 Persisting Data 99

Not Rolling Our Own Ajax 99

There Must Be a Belter 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

Seriattzer 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 MVO 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

Wrapping Things Up 145

10 Ember Testing 147

Ember Testing with Ember App Kit, Qunit, and Testem 148

Testem and QUnit lest 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