Ember.js Guides - Guides and Tutorials - Ember Guides (2024)

Ember is a JavaScript front-end framework designed to help you build websites with rich and complex user interactions.It does so by providing developers both with many features that are essential to manage complexity in modern web applications,as well as an integrated development toolkit that enables rapid iteration.

Some of these features that you'll learn about in the guides are:

• Ember CLI - A robust development toolkit to create, develop, and build Ember applications. When you see an $ ember <command> instruction throughout the guides, that's Ember CLI!
• Routing - The central part of an Ember application. Enables developers to drive the application state from the URL.
• Templating engine - Use Handlebars syntax to write your application's templates
• Data layer - Ember Data provides a consistent way to communicate with external APIs and manage application state
• Ember Inspector - A browser extension, or bookmarklet, to inspect your application live. It's also useful for spotting Ember applications in the wild, try to install it and open up the NASA website!

On the left side of each Guides page is a table of contents,organized into sections that can be expanded to show the topicsthey cover. Both the sections and the topics within each section areordered from basic to advanced concepts.

The Guides are intended to contain practical explanations of how tobuild Ember apps, focusing on the most widely-used features of Ember.js.For comprehensive documentation of every Ember feature and API, see theEmber.js API documentation.

The Guides begin with an explanation of how to get started with Ember,followed by a tutorial on how to build your first Ember app.If you're brand new to Ember,we recommend you start off by following along with these first two sections of the Guides.

While we try to make the Guides as beginner-friendly as we can,we must establish a baseline so that the guides can keep focused on Ember.js functionality.We will try to link to appropriate documentation whenever a concept is introduced.

To make the most out of the guides, you should have a working knowledge of:

• HTML, CSS, JavaScript - the building blocks of web pages. You can find documentation of each of these technologies at the Mozilla Developer Network.
• Promises - the native way to deal with asynchrony in your JavaScript code. See the relevant Mozilla Developer Network section.
• ES2015 modules - you will better understand Ember CLI's project structure and import paths if you are comfortable with JavaScript Modules.
• ES2015 syntax - Ember CLI comes with Babel.js by default so you cantake advantage of newer language features such as arrow functions, templatestrings, destructuring, and more. You can check theBabel.js documentation or read Understanding ECMAScript 6online.

Ember will do a lot to help you write fast apps, but it can't prevent you fromwriting a slow one. This is especially true on mobile devices. To deliver a greatexperience, it's important to measure performance early and often, and with a diverseset of devices.

Make sure you are testing performance on real devices. Simulated mobileenvironments on a desktop computer give an optimistic-at-best representation ofwhat your real world performance will be like. The more operating systems andhardware configurations you test, the more confident you can be.

Due to their limited network connectivity and CPU power, great performance onmobile devices rarely comes for free. You should integrate performance testinginto your development workflow from the beginning. This will help you avoidmaking costly architectural mistakes that are much harder to fix if you onlynotice them once your app is nearly complete.

In short:

1. Always test on real, representative mobile devices.
2. Measure performance from the beginning, and keep testing as your appdevelops.

These tips will help you identify problems early so they can be addressed systematically, rather thanin a last-minute scramble.

Typos, missing words, and code samples with errors are all considereddocumentation bugs. If you spot one of them, or want to otherwise improvethe existing guides, we are happy to help you help us!

Some of the more common ways to report a problem with the guides are:

• Using the pencil icon on the top-right of each guide page
• Opening an issue or pull request to the GitHub repository

Clicking the pencil icon will bring you to GitHub's editor for thatguide so you can edit right away, using the Markdown markup language.This is the fastest way to correct a typo, a missing word, or an error ina code sample.

If you wish to make a more significant contribution be sure to check ourissue tracker to see if your issue is already beingaddressed. If you don't find an active issue, open a new one.

If you have any questions about styling or the contributing process, youcan check out our contributing guide. If yourquestion persists, reach us in the #dev-ember-learning channel on the Ember Community Discord.

Good luck!