Building Web Apps with Ember.Js
Total Page:16
File Type:pdf, Size:1020Kb
Building Web Apps with Ember.js Building Web Apps with Ember.js with Apps Web Building 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 Building ■ 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 Web Apps with 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 Ember .js software, business simulations, interactive marketing, high-fidelity prototype Cravens hardware and software, Arduino-powered bluetooth caller ID watches, and web & Brady applications for clients and for fun. WRITE AMBITIOUS JAVASCRIPT JAVASCRIPT Twitter: @oreillymedia facebook.com/oreilly US $29.99 CAN $31.99 ISBN: 978-1-449-37092-3 Jesse Cravens & Thomas Q Brady Building Web Apps with Ember.js Building Web Apps with Ember.js with Apps Web Building 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 Building ■ 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 Web Apps with 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 Ember .js software, business simulations, interactive marketing, high-fidelity prototype Cravens hardware and software, Arduino-powered bluetooth caller ID watches, and web & Brady applications for clients and for fun. WRITE AMBITIOUS JAVASCRIPT JAVASCRIPT Twitter: @oreillymedia facebook.com/oreilly US $29.99 CAN $31.99 ISBN: 978-1-449-37092-3 Jesse Cravens & Thomas Q Brady Building Web Apps with Ember.js Jesse Cravens and Thomas Q Brady 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] 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 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 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 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 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.