Every framework has its pros and cons , this post deals with ember and goodness of ember ..

I have been working with ember for almost 4 years now (other frameworks too including angular, react etc.) , its one of the if not the best front end frameworks available right now , If you are a front end developer in 2016 when you try to find a framework for developing a web application, you might end up catching with a virus called JS fatigue , Java Script is more powerful than every before with ES2015 and with other new tools its getting bigger and better, so you need a framework which

1. Evolves along JS    2. Supports TDD   3. Address all the problems that comes with setting up , developing , testing  and  deploying a project 4. Code that is easily understandable as well as reusable 5. Backward compatible And Many More ….

Why Ember  in 2016?

  1. Ember Routing is awesome :)(dynamic routing , life cycle hooks etc..)
  2. Ember-CLI ( working on any other framework after that ,will look like a tedious task because Ember-CLI lets you eliminate all the problems that comes with setting up,writing code and deploying code etc.., as well as ember cli keeps evolving as a community not an individual written generator  )
  3. Convention over Configuration(this is one of the best feature of ember once you are aware of how ember works , you can look into any project written in ember and understand how it is working(at least the flow ),Its strict for a good reason ).
  4. Ember Data (one awesome way to handle data flow in your front end app)
  5. Ember Components
  6. Ember embraced ES2015 for development long back ( instead of writing a non backward compatible new version of the framework  .. achum.. Angular 2 )
  7. One of a small advantages it uses jQuery by default which makes it compatible with any jQuery library you want to include in your project
  8. Best fit for ambitious single page web applications
  9. Ember Guide is very comprehensive (all in one documentation for your dev needs)

 

First Project with Ember Js

Prerequisites


install node js from    node download  

npm install -g ember-cli (installing ember-cli)
npm install -g bower
brew install watchman 

visit Ember Cli Site to know more on other dependencies 

Starting  A Project 

//once all the dependencies are installed  
//go to your command line tool and then 
cd /path where you want to place your project/ 
then type : ember new <project-name> 
            eg. ember new my-first-ember-project


Now ember CLI will take some time on your behalf to set up the project and all required dependencies

//Once ember-cli does its job

cd my-first-ember-project 
then type: ember serve 
           go to http://localhost:4200/ in your favourite browser

You will see a welcome page to remove sample 
welcome page go to package.json file 
inside your project folder and remove an add-on 
called ember-welcome-page 

Do an ember serve again you will see a blank page 

You will see multiple folders for development we will use only the app/ folder (most of the time) , which has

. components/

. controllers/

.  helpers/

. models/

.routes/

.templates/

.app.js

.index.html

.router.js

.resolver.js

visit this ember cli documentation  to understand everything
you have to on the folder structure 
(recommended to have an understanding of this)

Routes and Templates

 Simple Explanation for routes and templates  

Routes

State of your application (url)

eg. http://localhost:4200 is one route

eg. http://localhost:4200/about is one route

Templates

The html data user will see when goes to a route state or url (route)

“I will have multiple routes for my application how will I know which template render when I go to that state ”

Yes I agree , but since its ember it takes care of that for us for eg. I am creating a route called about , which you have to create in router.js   inside app/* folder (router.js should  have all your routes / states of your application defined) .So when your application goes to /about ember by default will look into template/ folder for about.hbs. So when I go to http://localhost:4200/about , ember will renders contents from template/about.hbs.

“Remember convention over configuration,yay !!”

How to I do create those files ?

Method 1: 

Step 1: Go to router.js 
      
     Router.map(function() {
         this.route('about');// route I want to create
      });

Step 2: Go to  template folder create a file called about.hbs

Step 3(optional):Go to router folder and create about.js

           import Ember from 'ember';
           export default Ember.Route.extend({});

Method 2 (recommended): 

Remember Ember-Cli ? ember cli gives a generate or g option to create all this files for you including test script for the route you are creating in one step.

Step 1 the only step :ember g route about 

It will create all the files for us from Method 1 
plus a test file inside 
/my-first-ember-project/tests/units/routes/about-test.js

If you ember serve to http://localhost:4200/about  
you will still see a empty page , 
soon we will learn how to put content into this page

Now if you go to templates/about.hbs  in your editor you’ll see {{outlet}} 

Its important to understand {{outlet}} before we proceed

{{outlet}} is where your sub routes templates render (eg. http://localhost:4200/about/me)

Now any content for /me.hbs will render inside . All the content for about.hbs .

“But wait a minute ,  I am going to http://localhost:4200 and then going to http://localhost:4200/about to render about.hbs , does this mean about.hbs is rendering into / (starting route of your app’s)  {{outlet}}”

Bingo , you got it , the default route in ember is application route , which at this point is not explicitly created but ember is doing that for us , now lets create application route

>ember g route application

templates/application.hbs file will have a {{outlet}}

This is the application route , which will part of all sub routes

<br/> {{outlet}}

after pasting this in your application.hbs file  and when you navigate to /about you will still see

This is the application route , which will part of all sub routes

Which means now all the sub routes will render via application route , I can use this route to build my application level menu , footer etc.. hmm.. now we are talking single page application development

Connecting Route And  Its Template

Now we know for each route we create in ember there is a corresponding template file which will render into {{outlet}}

“All the files  inside template folder are in .hbs format be but they just render html”

{{}} (anything you write within this mustache notation is considered  a handlebar helper)

You are right , .hbs files are nothing but handlebar files , Ember uses the Handlebars templating library to power your  user interface, build in template helpers helps us in navigating , showing data from ember etc.. few of them are listed below..

  1. add {{#link-to "about"}}
                 About Link
          {{/link-to}} 
    in application.hbs
    to navigate to about link from application route instead 
    of changing url manually, now if you click About link it'll 
    take you to /about
    
    now your application.hbs will look like

 

Screen Shot 2016-08-12 at 2.34.19 PM
Applica.hbs file

Before  we go thorough other helpers lets check how to use a model (data you want to show in your handle) from route inside ember template

Insider routes/about.js file add a model() function like this

import Ember from 'ember';

export default Ember.Route.extend({
 model() {
  
 return {"myName":"Your Name","myInterests":["JS","HTML","Other Cool Stuff"]}
 // this data can come from a server api call also, 
//we will see later how to get data from server 
 }
});

 

Since we know any route has a template with same name, now about.js can access data returned by model() function of its route (in this case about.js)

1. simple {{}} helper to print data

 

Screen Shot 2016-08-12 at 2.41.11 PM
About.hbs to print model data in template

Now /about will print Name:Your Name

2. #each helper 

Model function in about.js is returning a property called myInterests which is an array. {{#each}} helper helps us to iterate array data inside template and print them.So after using {{#each}} helper my template will look like

Screen Shot 2016-08-12 at 2.36.42 PM.png

now when you navigate to /about route you can see list of your interests

Screen Shot 2016-08-12 at 2.37.32 PM
Your http://localhost:4200/about will look like above

 

 

 

 

 

 

3. conditional helpers 

1. This is simple if condition  I want to display my interests only when my model has my interests you just need to wrap after Name inside {{#if model.myInterests}}  after ul element close tag add a closing if tag {{/if}} , very important  to close a helper tag else ember will throw error

2. Inside {{#if}} helper you can use {{else}} to print what should happen when I do not have any interests , {{#if}}  <your true condition> {{else}}  <your else condition>{{/if}}

3.{{#unless model.myInterests}} Do Add A Request{{/unless}} this helper helps you to show a value unless it is done

Screen Shot 2016-08-12 at 3.17.01 PM.png

Check out ember documentation for more cool helpers

Two Way Binding

 

Last section we saw how ember binds routes data to template now lets check how to bind changes that happen to data in template to routes model()

Lets use another input helper to explain this

{{input type=”text”  value=model.myName}}

once you add this to your about.hbs file you can see Name : value also changes that means dom value of model.myName , so I I want to save it back to server I can just pass model.myName with updated name

Your about.hbs will look like this

Screen Shot 2016-08-12 at 3.09.35 PM

 

We saw how to start a project with Ember JS and few cool stuff we can do with ember , this is just scratching the surface of ember, there is more . Will post more on other features soon

 

 

 

 

 

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s