43,19 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
Arm yourself with over 65 hands-on recipes to master the skills of building scalable web applications with Ember.js
About This Book
- This book is your one-stop solution to the key features of Ember.js. Become skilled in the art of building web-apps in a fraction of the code you'd write in other frameworks.
- Build JavaScript apps that don't break the web! Our 100 recipes will make this a cakewalk for you!
- This books makes learning Ember.js easy by breaking down each topic into simple-to-understand recipes
Who This Book Is For
Anyone who wants to explore Ember.js and wishes to get hands on making sophisticated web apps with less coding will find this book handy. Prior experience in Coding and familiarity with JavaScript is recommended. If you've heard of Ember.js or are just curious on how a single-page application framework works, then this book is for you.
What You Will Learn
- Skip the boilerplate code with Ember CLI generators
- Create a component with actions and events
- Set up a model with Ember Data using fixture data
- Create several different types of test cases and run them
- Manage and set up user authentication using Ember Simple Auth
- Add animated transitions to your app with Liquid Fire
- Set up a service and initializer with dependency injection
- Create a working chat application
- Set up an Ember Service and initializer with dependency injection
- Create a working chat application
In Detail
Ember.js is an open source JavaScript framework that will make you more productive. It uses common idioms and practices, making it simple to create amazing single-page applications. It also lets you create code in a modular way using the latest JavaScript features. Not only that, it has a great set of APIs to get any task done. The Ember.js community is welcoming newcomers and is ready to help you when needed.
This book provides in-depth explanations on how to use the Ember.js framework to take you from beginner to expert. You'll start with some basic topics and by the end of the book, you'll know everything you need to know to build a fully operational Ember application.
We'll begin by explaining key points on how to use the Ember.js framework and the associated tools. You'll learn how to effectively use Ember CLI and how to create and deploy your application. We'll take a close look at the Ember object model and templates by examining bindings and observers. We'll then move onto Ember components, models, and Ember Data. We'll show you examples on how to connect to RESTful databases. Next we'll get to grips with testing with integration and acceptance tests using QUnit. We will conclude by covering authentication, services, and Ember add-ons. We'll explore advanced topics such as services and initializers, and how to use them together to build real-time applications.
Style and approach
Each recipe in this book will make it that much easier to understand Ember.js. Recipe after recipe, you will learn the concepts of Ember.js by following the simple step-by-step processes
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 289
Veröffentlichungsjahr: 2016
Ähnliche
Table of Contents
Ember.js Cookbook
Ember.js Cookbook
Copyright © 2016 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: February 2016
Production reference: 1220216
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78398-220-2
www.packtpub.com
Credits
Author
Erik Hanchett
Reviewer
Zoltan Debre
Commissioning Editor
Amarabha Banerjee
Acquisition Editor
Manish Nainani
Content Development Editor
Preeti Singh
Technical Editor
Suwarna Patil
Copy Editor
Tasneem Fatehi
Project Coordinator
Dinesh Rathe
Proofreader
Safis Editing
Indexer
Monica Ajmera Mehta
Graphics
Disha Haria
Production Coordinator
Conidon Miranda
Cover Work
Conidon Miranda
About the Author
Erik Hanchett is a software developer, blogger, and perpetual student who has been writing code for over 10 years. He currently resides in Reno, Nevada, with his wife and two kids. He blogs about software development at ProgramWithErik.com.
I would like to thank my wife, Susan, for helping me stay motivated, my friend, F. B. Wood, for all his help on the English language, and Dr. Bret Simmons for teaching me the value of a personal brand.
I would also like to thank all my friends and family who encouraged me along the way.
About the Reviewer
Zoltan Debre is a lecturer, economist, journalist, and software engineer. He has been building websites and web applications since 1997 for big corporations and small start-ups worldwide in Budapest, Dublin, and recently in Wellington, New Zealand. Furthermore, he is researching at Victoria University of Wellington. As a full stack software engineer, Zoltan uses various tools and languages such as Ruby, JavaScript, Java, PHP, Dart, Lua, and Go. He is an advocate of efficient development tools and frameworks, and for this reason, he is an active supporter of Ruby on Rails and a committed evangelist of Ember.js.
He's been working with Ember.js since 2012, and he follows the evolution of the framework and its influence on the whole JavaScript ecosystem. His mission is to teach and show how quickly developers can deliver a project with a very efficient framework. For this reason, he voluntarily runs workshops and gives presentations, and he teaches Ember.js to junior and senior developers and students. He writes tutorials, shares examples, and tirelessly helps other developers. Follow his work or contact him on www.yoember.com, www.zoltan.nz, and www.emberjs.nz.
www.PacktPub.com
eBooks, discount offers, and more
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <[email protected]> for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
https://www2.packtpub.com/books/subscription/packtlib
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.
Why Subscribe?
Preface
Single-page, client-side JavaScript frameworks may possibly be the future of the Web. Client-side frameworks have matured a lot in the last few years. They've made creating web applications easier and more responsive. Ember.js has been one of the leading frameworks behind this movement.
This book provides in-depth explanations of how to use the Ember.js framework to take you from being a beginner to an expert. You'll start with the basics, and by the end of the book, you'll have a solid foundation in creating real-time web applications in Ember.
We'll begin by explaining key points on how to use the Ember.js framework and associated tools. You'll learn how to use Ember CLI effectively and how to create and deploy your application. We'll take a close look at the Ember object model and templates by looking at bindings and observers. We'll move on to Ember components and models and Ember Data. Next, we'll look at testing with integration and acceptance tests using QUnit. Afterward, we'll take a look at authentication and services and working with Ember add-ons. We'll explore advanced topics such as services and initializers and how to use them together to build real-time applications.
What this book covers
Chapter 1, Ember CLI Basics, shows you how to use the Ember CLI command-line tool and deal with upgrading and deploying your project.
Chapter 2, The Ember.Object Model, demonstrates how to create Ember objects and instances and use bindings, mixins, and enumerables.
Chapter 3, Ember Templates, tells you how to use templates and template helpers.
Chapter 4, Ember Router, demonstrates how to set up your model and work with loading states and redirection.
Chapter 5, Ember Controllers, explains how to use properties and manage dependencies between controllers.
Chapter 6, Ember Components, covers passing properties, events, and actions.
Chapter 7, Ember Models and Ember Data, explains how to manipulate records and customize adapters.
Chapter 8, Logging, Debugging, and Testing, demonstrates how to create acceptance and unit tests as well as the Ember Inspector.
Chapter 9, Real-Life Tasks with Ember.js, discusses how to use services, authentication, Bootstrap, and Liquid Fire.
Chapter 10, Awesome Tasks with Ember, explains how to use Ember validations, Firebase, WebSockets, and server-side rendering.
Chapter 11, Real-Time Web Applications, discusses how to use dependency injection, application initializers, run loops, and create add-ons.
What you need for this book
Who this book is for
Anyone who wants to explore Ember.js and wishes to get hands-on experience making sophisticated web apps with less coding will find this book handy. Prior experience of coding and familiarity with JavaScript is recommended. If you've heard of Ember.js or are just curious on how a single-page application framework works, then this book is for you.
Sections
In this book, you will find several headings that appear frequently (Getting ready, How to do it..., How it works..., There's more..., and See also).
To give clear instructions on how to complete a recipe, we use these sections as follows:
Getting ready
This section tells you what to expect in the recipe, and describes how to set up any software or any preliminary settings required for the recipe.
How to do it…
This section contains the steps required to follow the recipe.
How it works…
This section usually consists of a detailed explanation of what happened in the previous section.
There's more…
This section consists of additional information about the recipe in order to make the reader more knowledgeable about the recipe.
See also
This section provides helpful links to other useful information for the recipe.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.
To send us general feedback, simply e-mail <[email protected]>, and mention the book's title in the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the example code
You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the ErrataSubmissionForm link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy
Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
Questions
If you have a problem with any aspect of this book, you can contact us at <[email protected]>, and we will do our best to address the problem.
Chapter 1. Ember CLI Basics
In this chapter, we will cover the following recipes:
Introduction
Ember CLI is a Node.js-based command-line interface tool designed for application programming in Ember.js. Since its creation, this tool has become the preferred method to create Ember applications.
Simply put, Ember CLI makes starting a new Ember application easy. In other frameworks, you might need to learn gulp or grunt as your task runners. In Ember CLI, this is all built-in for you. Having Ember CLI in the Ember.js ecosystem is a game changer and makes this framework stand out above the rest.
Ember CLI handles testing, compiling, and upgrading, and even has a built-in web server. Ember CLI not only generates boilerplate code for you, but it also integrates nicely with many testing frameworks. It has a robust add-on system that extends the functionality well beyond its current capabilities.
Installing Ember CLI
The installation of Ember CLI is essential to learning Ember and will be used throughout this book.
Getting ready
Before the installation of Ember CLI, we must have the Node Package Manager (npm) installed. npm is a package manager for JavaScript and is installed by default with Node.js.
You must install version 0.12 or later of Node.js for Ember CLI to run. If you can, try to install version 4.0.0 or higher. This is the preferred version.
Node.js is available in several major platforms including Windows, Mac, and Linux. There are several ways to install Node.js:
A one-click installer for Windows or Mac
This method is by far the easiest. To install node, you'll need to open the node website at http://nodejs.org/download. Click on the pkg, msi, or exe installer for Windows or Mac. Run it after it's downloaded.
Homebrew or MacPorts for Mac
If you already have Homebrew installed, just run the following command:
On the other hand, if you are running MacPorts, you can use the port install command:
Tip
MacPorts can be installed from http://www.macports.org. Homewbrew can be installed from http://brew.sh. Both offer simple package management for OS X systems.
A TAR file
A TAR file is a type of archive file. To install node via a TAR, you will need to download the TAR file from the Node.js website and extract and install it. One way of doing this is to use curl.
I would only recommend this method if you are using a Linux distribution. If you are running on Linux, you'll need the right tools installed to compile from source. On Ubuntu, you'll need to install the build-essential and curl packages:
The Linux package manager
All major Linux distributions offer Node.js packages. In Ubuntu, you can simply use apt-get:
In Fedora, you can use yum:
Check with your Linux distribution to find out more details on how to install packages such as Node.js. Be aware that some distributions might offer outdated versions of Node.js. In this case, I would recommend that you use the Node Version Manager (NVM) installation method that will be discussed later.
Test installation
To test your installation, run the –v command:
This will show the current installed version. Keep in mind that you must run v0.12 or above to run Ember CLI. If possible, try to run v4.0.0 or above.
Tip
The NVM is a bash script that helps manage multiple active Node.js versions. NVM offers a very simple command-line interface to install any version of Node.js without having to visit the Node.js website. It separates each installation making it very easy to change between versions. I would recommend most beginners on Mac and Linux to run this. You can download NVM at https://github.com/creationix/nvm.
How to do it...
We'll need to use npm to install Ember CLI. We'll install it globally with the –g option so that it can be run anywhere from the command line.
If NVM was installed, you don't need sudo at the start of the command.
After Ember CLI is installed, we'll need to download Bower. Bower is a package manager for client-side programming and another essential component of Ember.js. Node.js and npm must be installed before beginning the installation of Bower. We'll be using Bower to install all our client-side libraries:Similar to the last command, you don't need sudo at the start of the command if Node.js was installed via NVM.
The last step is to install PhantomJS. PhantomJS is a scripted headless browser used to automate and test web pages. It's preferred by Ember CLI and needs to be installed:Note
Working with Windows
Build times on Windows can be longer then Mac or Linux. The Ember CLI Windows tool can help speed up and optimize build performance. Just run it in the project directory. You can also download it as an add-on instead.
Another way to help with performance is to always run PowerShell/CMD with elevated privileges. Otherwise, performance issues and errors might occur. Lastly, try to use npm version 3 or higher. You may run into issues with long file paths with older versions in Windows.
Another handy tip is as follows:
Tip
Optional: Install Watchman
Watchman is a file-watching service for OS X and UNIX-like operating systems. It was developed by Facebook and is a more effective way for Ember CLI to watch project changes. If it's not installed, Ember CLI will fall back to using NodeWatcher. NodeWatcher is more error-prone and has trouble observing large trees. Install Watchman if your platform supports it. To download and configure Watchman, visit https://facebook.github.io/watchman/.
How it works...
Ember CLI is written in Node.js and can be installed via npm. The tool interprets commands from the user to help create an Ember.js application. Each command from the user is looked up and then executed. Ember CLI relies on several other dependencies including Bower, Lodash, Broccoli, and Babel, to name a few.
There's more...
Let's take a look at commands and aliases.
Commands
Once Ember CLI is installed, we'll have access to several commands. Here is a short list of some of the more important ones:
Command
Purpose
ember
This prints a list of available commands
ember new <name-of-app>
This creates a directory called <name-of-app> and creates the application structure
ember init
This creates an application in the current directory
ember build
This builds the application in the /dist folder
ember server
This starts a web server
ember generate <generator-name>
This runs a generator that builds scaffolding for the project
ember destroy <generator-name>
This uninstalls the module that was created by the generator
ember test
This runs tests using Testem
ember install <addon-name>
This installs add-ons
Aliases
Keep in mind that for every command, there is an alias. These aliases make it a little quicker to run commands. Suppose that you wanted to build a new project. Normally, you would type this:
This will work and is fine. It will generate a new project and application structure. You can also use an alias.
Here is a list of some common aliases that you can use. This is optional.
Command
Alias
ember build
ember b
ember generate
ember g
ember init
ember i
ember server
ember s
ember destroy
ember d
ember test
ember t
ember version
ember v
Creating your first project
In this recipe we'll create our first project.
How to do it...
We'll begin with the Ember CLI tool to create our first project.
This will create a brand new project called my-project. The project structure will have everything that we need to get started.
To display this project, we can simply run the server command:The ember server command will start up a web server on port 4200. You can access this port by opening http://localhost:4200. You should see the default Welcome to Ember website.
Tip
It is a good idea to keep the Ember server running while developing your application. Ember CLI uses a tool called LiveReload to refresh the web browser when changes are made. This can be useful to see how new changes are affecting your application. To run LiveReload, simply type ember server. This will start the server with LiveReload.
This will start the server on port 1234 instead of the default 4200.
Another useful option is the --proxy argument. This will proxy all Asynchronous JavaScript and XML (Ajax) requests to the given address. Let's say that we have a node server running on port 8080. We can run the server as follows:For every Ajax request, Ember now will send these requests to the localhost at port 8080.
Tip
Keep in mind that as of Ember 2.0, Internet Explorer (IE) 8 support has been dropped. All modern web browsers and versions of IE after 8 work fine. If by chance IE 8 support is needed, Ember.js version 1.13 has extended browser support and should work with it.
How it works...
The ember server command creates a Node.js Express server. This server uses LiveReload and refreshes the web page whenever any changes are made. The server command accepts different arguments, including --proxy and --port.
There's more...
When running the server, you have access to tests. After you start the server, you'll have access to the QUnit interface. QUnit is a JavaScript unit testing framework. It is used to run your integration and acceptance tests. To access the interface, navigate your browser to http://localhost:4200/tests. This will show all your tests in the project. From here, you can see which tests passed and which failed. We will cover this in the later chapters:
Asset compilation
In this recipe we'll take a look at how assets are added to a project.
How to do it...
In your
