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).
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
and maintain the continuous synchronization.
I decided to learn about Ember.js motivated by its big players: Netflix, LinkedIn, Microsoft, Apple, Twitch, RiotGames...
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.
Built with a combination of routes and controllers
Built with a combination of templates and views
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.
Once we have a new project and confirm everything is working, start the development server:
or, for short:
Visit your app on http://localhost:4200, for the welcome screen.
Node.js (with NPM)
Search on Google (Just in case any error) 😅😆
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👇