A practical guide to building your first EmberJS App

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

Based on my learning, 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: of "Convention over Configuration" which means that the framework should give as many tools as possible to the developer (of course, allowing flexibility).

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

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

• It has its own command line to 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 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, the 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

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 Handlebars.js is the template engine.

Models and Ember Data

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

__________________________________

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 appear 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 (In case of any error) 😅😆

Tutorial video:

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

_________________________________________________________________________________________

¡Thanks for reading!

meltstudio.co

📍 Connect with us on Instagram 👇