A practical guide to building your first EmberJS App

Updated: May 25

Let's build a mini TODO APP with EmberJS 👨‍💻

This post was created based on my learning recently, so I explain the getting started steps for a simple CRUD app built in Ember.js


First, let me introduce Tomster the Ember.js pet, that will tell you a few things about Ember:

This OpenSource framework was created in 2011 by Yehuda Katz a developer (member of Ruby on Rails and jQuery Core Teams), under the philosophy: "Convention over Configuration" which means that the framework should give as many tools as possible to the developer (of course, allowing flexibility).


Is an MVC (Model-View-Controller) JavaScript framework, that gives you the ability to write organized and structured code.


Ember.js it's considered an All-in-One framework due to its tools. For example Ember CLI:

  • Has its own command line to do build, test, or generate everything you need

  • A development server

  • Includes its own testing engines

  • Its own Addons library, some of these created by the community

In general, Ember.js:

  • Works on Glimmer engine, a faster HTML engine on the market.

  • Templating engine, with a more or less its own language HTMLBars

  • Works based on components with its own routing solutions

And Ember Data, which is basically the ember store:

  • Allows you to create models for the app's data

  • Handle async requests

  • Connect middlewares

  • and maintain the continuous synchronization.

I decided to learn about Ember.js motivated by its big players: Netflix, LinkedIn, Microsoft, Apple, Twitch, RiotGames...


EmberJS

TALK OF THE WEEK



In Ember.js, the route is used as a model, handlebar template as views and controllers manipulate the data in the model. Let’s take a closer look at each of the MVC components.



Controller layer

Built with a combination of routes and controllers

View layer

Built with a combination of templates and views

Model layer

Built with a combination of model and Ember Data

Controllers and the Ember Router

Is the layer between the model and view, is the mechanism that updates your application URLs and listens to URL changes.


Views and Handlebars.JS

Render a hierarchy of Views that connect to the browser’s DOM. And the Handlebars.js is the template engine.


Models and Ember Data

Manage any server-side communication and use Ember Data to dramatically simplify code


__________________________________


How to start

Run in your terminal:

npm install -g ember-cli

Then, to create a new project use Ember CLI, and the new command:

ember new todo-app

In ember, every new app generates the following files and directories:

|--app
|--|--Components
|--|--Controllers
|--|--Helpers
|--|--Models
|--|--Routes
|--config
|--node_modules
|--public
|--tests
|--vendor
<other files>

- App: Where folders and app files are stored. The project happens in this folder.

- config: Contains the environment.js file where you can configure settings for your app.

- nodemodules/package.json: Any Ember CLI addons you install will also show up here.

- tests/testem.js: Automated tests and Ember CLI's test runner is configured.

- ember-cli-build.js: This file describes how Ember CLI should build our app.



Running

Once we have a new project and confirm everything is working, start the development server:

ember serve

or, for short:

ember s

Visit your app on http://localhost:4200, for the welcome screen.



Demo pre-requisites


  • GitHub

  • Node.js (with NPM)

  • Ember CLI

  • Search on Google (Just in case any error) 😅😆



Tutorial video:

If there is an error with the player, you can watch the video at the following LINK.


_________________________________________________________________________________________


¡Thanks for reading!


📍 Connect with us on instagram👇


28 views

Join our newsletter to receive information about latest technologies trends and job offers

Thanks for subscribing!