{"id":48257,"date":"2013-05-27T12:03:02","date_gmt":"2013-05-27T09:03:02","guid":{"rendered":"https:\/\/www.altoros.com\/blog\/?p=48257"},"modified":"2021-12-10T12:42:10","modified_gmt":"2021-12-10T09:42:10","slug":"diving-into-ember-js-part-1-2","status":"publish","type":"post","link":"https:\/\/www.altoros.com\/blog\/diving-into-ember-js-part-1-2\/","title":{"rendered":"Diving into Ember.js: Part 1"},"content":{"rendered":"<p>This article is a part of the tutorial on <a href=\"https:\/\/emberjs.com\/\" rel=\"noopener noreferrer\" target=\"_blank\">Ember.js<\/a> framework. The goal is developing of a JavaScript application: neither too complex, nor too trivial. We are going to build it up from scratch, without using bootstrapping tools. Feel free to look into the <a href=\"https:\/\/github.com\/drone-loops\/padrino-assets-pipeline.git\" rel=\"noopener noreferrer\" target=\"_blank\">source code<\/a> to feel the idea. Note: I\u2019m going to create a JavaScript application in the context of the <a href=\"http:\/\/padrinorb.com\/\" rel=\"noopener noreferrer\" target=\"_blank\">Padrino<\/a>. Actually, only JavaScript files will matter by now. Let\u2019s go!<\/p>\n<p>&nbsp;<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-transparent ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.altoros.com\/blog\/diving-into-ember-js-part-1-2\/#Creating_the_skeleton\" >Creating the skeleton<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.altoros.com\/blog\/diving-into-ember-js-part-1-2\/#Prepare_vendor_code\" >Prepare vendor code<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.altoros.com\/blog\/diving-into-ember-js-part-1-2\/#Set_up_the_application_entry_point\" >Set up the application entry point<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.altoros.com\/blog\/diving-into-ember-js-part-1-2\/#Create_the_application_structure\" >Create the application structure<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.altoros.com\/blog\/diving-into-ember-js-part-1-2\/#Create_static_content\" >Create static content<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.altoros.com\/blog\/diving-into-ember-js-part-1-2\/#Template_precompilation\" >Template precompilation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.altoros.com\/blog\/diving-into-ember-js-part-1-2\/#Further_reading\" >Further reading<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"Creating_the_skeleton\"><\/span>Creating the skeleton<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>If you develop this application in conjunction with Padrino, check out the<br \/>\n<a href=\"http:\/\/padrinorb.com\/guides\/\" rel=\"noopener noreferrer\" target=\"_blank\">guides<\/a> how to create a Padrino project. In addition, it makes sense to add <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">asset pipeline<\/code>: follow this <a href=\"https:\/\/tedkulp.com\/2011\/11\/padrino-and-the-asset-pipeline\/\" rel=\"noopener noreferrer\" target=\"_blank\">how-to<\/a>. And, I highly recommend you to write core JavaScript files in short-spoken <a href=\"http:\/\/coffeescript.org\/\" rel=\"noopener noreferrer\" target=\"_blank\">CoffeeScript<\/a> :).<\/p>\n<p>So, assume we have <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">javascripts<\/code> directory eventually, and it\u2019s currently our working directory.<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Prepare_vendor_code\"><\/span>Prepare vendor code<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Now, we need to add necessary JavaScript files to make Ember work:<\/p>\n<ul>\n<li><a href=\"https:\/\/jquery.com\/download\/\" rel=\"noopener noreferrer\" target=\"_blank\">jQuery<\/a><\/li>\n<li><a href=\"https:\/\/emberjs.com\/\" rel=\"noopener noreferrer\" target=\"_blank\">Ember.js<\/a><\/li>\n<li><a href=\"https:\/\/handlebarsjs.com\/\" rel=\"noopener noreferrer\" target=\"_blank\">handlebars<\/a><\/li>\n<li><a href=\"http:\/\/emblemjs.com\/\" rel=\"noopener noreferrer\" target=\"_blank\">Emblem.js<\/a><\/li>\n<\/ul>\n<p>Handlebars is the default template language for Ember.js, but you can (and should) use Emblem.js over it. Emblem is yet another slim-like template language. Download these libraries and save them into the <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">lib<\/code> directory.<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Set_up_the_application_entry_point\"><\/span>Set up the application entry point<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ok. Look at the <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">application.js<\/code> file. The so-called <code style=\"color: black; background-color: #e6e6e6;\">manifest<\/code> (was brought with <code style=\"color: black; background-color: #e6e6e6;\">asset pipeline<\/code>) is an application entry point. We\u2019re going to include some libraries here:<\/p>\n<figure class=\"highlight\">\n<pre><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"c1\">\/\/= require lib\/jquery<\/span>\r\n<span class=\"c1\">\/\/= require lib\/handlebars<\/span>\r\n<span class=\"c1\">\/\/= require lib\/emblem<\/span>\r\n<span class=\"c1\">\/\/= require lib\/ember<\/span>\r\n<span class=\"c1\">\/\/= require_self<\/span><\/code><\/pre>\n<\/figure>\n<p>Furthermore, you need to add the line at the end to bootstrap the application. <code style=\"color: black; background-color: #e6e6e6;\">App<\/code>(or any other name) is the namespace of the application:<\/p>\n<figure class=\"highlight\">\n<pre><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"nx\">App<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">Ember<\/span><span class=\"p\">.<\/span><span class=\"nx\">Application<\/span><span class=\"p\">.<\/span><span class=\"nx\">create<\/span><span class=\"p\">();<\/span><\/code><\/pre>\n<\/figure>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Create_the_application_structure\"><\/span>Create the application structure<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>So, as we do the <a href=\"https:\/\/en.wikipedia.org\/wiki\/Model%E2%80%93view%E2%80%93controller\" rel=\"noopener noreferrer\" target=\"_blank\">MVC<\/a> application, we should provide a specific structure, also keeping in mind <a href=\"https:\/\/guides.emberjs.com\/release\/concepts\/core-concepts\/\" rel=\"noopener noreferrer\" target=\"_blank\">Ember features<\/a>. Based on that assertion, we need to create the next directories:<\/p>\n<ul>\n<li><a href=\"https:\/\/guides.emberjs.com\/release\/models\/\" rel=\"noopener noreferrer\" target=\"_blank\">models<\/a><\/li>\n<li><a href=\"https:\/\/guides.emberjs.com\/release\/controllers\/\" rel=\"noopener noreferrer\" target=\"_blank\">controllers<\/a><\/li>\n<li><a href=\"https:\/\/guides.emberjs.com\/release\/views\" rel=\"noopener noreferrer\" target=\"_blank\">views<\/a><\/li>\n<li><a href=\"https:\/\/guides.emberjs.com\/release\/templates\/handlebars-basics\/\" rel=\"noopener noreferrer\" target=\"_blank\">templates<\/a><\/li>\n<li><a href=\"https:\/\/guides.emberjs.com\/release\/templates\/rendering-with-helpers\" rel=\"noopener noreferrer\" target=\"_blank\">helpers<\/a><\/li>\n<li><a href=\"https:\/\/guides.emberjs.com\/release\/routing\/\" rel=\"noopener noreferrer\" target=\"_blank\">routes<\/a><\/li>\n<\/ul>\n<p>We also need to create a <code style=\"color: black; background-color: #e6e6e6;\">router.js<\/code> file to describe application routes.<\/p>\n<p>According to <a href=\"https:\/\/guides.emberjs.com\/release\/concepts\/naming-conventions\/\" rel=\"noopener noreferrer\" target=\"_blank\">official docs<\/a> on Ember known, when your application boots, the framework will look for some objects: <code style=\"color: black; background-color: #e6e6e6;\">App.ApplicationRoute<\/code>, <code style=\"color: black; background-color: #e6e6e6;\">App.ApplicationController<\/code>, and the <code style=\"color: black; background-color: #e6e6e6;\">application<\/code> template. This means, we should initialize them with <code style=\"color: black; background-color: #e6e6e6;\">routes\/application_routes.coffee<\/code>.<\/p>\n<figure class=\"highlight\">\n<pre><code class=\"language-coffeescript\" data-lang=\"coffeescript\"><span class=\"nx\">App<\/span><span class=\"p\">.<\/span><span class=\"na\">ApplicationRoute<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">Ember<\/span><span class=\"p\">.<\/span><span class=\"na\">Route<\/span><span class=\"p\">.<\/span><span class=\"na\">extend<\/span><span class=\"p\">()<\/span><\/code><\/pre>\n<\/figure>\n<p><code style=\"color: black; background-color: #e6e6e6;\">controllers\/application_controller.coffee<\/code><\/p>\n<figure class=\"highlight\">\n<pre><code class=\"language-coffeescript\" data-lang=\"coffeescript\"><span class=\"nx\">App<\/span><span class=\"p\">.<\/span><span class=\"na\">ApplicationController<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">Ember<\/span><span class=\"p\">.<\/span><span class=\"na\">Controller<\/span><span class=\"p\">.<\/span><span class=\"na\">extend<\/span><span class=\"p\">()<\/span><\/code><\/pre>\n<\/figure>\n<p>Eventually, create a bare <code style=\"color: black; background-color: #e6e6e6;\">application.emblem<\/code> file in the <code style=\"color: black; background-color: #e6e6e6;\">templates<\/code> directory. Our next step is to create a file where we can list all these dependencies. Let\u2019s name it as our namespace\u2014<code style=\"color: black; background-color: #e6e6e6;\">app.js<\/code>.<\/p>\n<figure class=\"highlight\">\n<pre><code class=\"language-js\" data-lang=\"js\"><span class=\"c1\">\/\/= require_tree .\/models<\/span>\r\n<span class=\"c1\">\/\/= require_tree .\/controllers<\/span>\r\n<span class=\"c1\">\/\/= require_tree .\/views<\/span>\r\n<span class=\"c1\">\/\/= require_tree .\/helpers<\/span>\r\n<span class=\"c1\">\/\/= require_tree .\/templates<\/span>\r\n<span class=\"c1\">\/\/= require .\/router<\/span>\r\n<span class=\"c1\">\/\/= require_tree .\/routes<\/span>\r\n<span class=\"c1\">\/\/= require_self<\/span><\/code><\/pre>\n<\/figure>\n<p>Don\u2019t forget to include this file into <code style=\"color: black; background-color: #e6e6e6;\">application.js<\/code>. Its full view looks as shown below.<\/p>\n<figure class=\"highlight\">\n<pre><code class=\"language-js\" data-lang=\"js\"><span class=\"c1\">\/\/= require lib\/jquery<\/span>\r\n<span class=\"c1\">\/\/= require lib\/handlebars<\/span>\r\n<span class=\"c1\">\/\/= require lib\/emblem<\/span>\r\n<span class=\"c1\">\/\/= require lib\/ember<\/span>\r\n<span class=\"c1\">\/\/= require_self<\/span>\r\n<span class=\"c1\">\/\/= require app<\/span>\r\n\r\n<span class=\"nx\">App<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">Ember<\/span><span class=\"p\">.<\/span><span class=\"nx\">Application<\/span><span class=\"p\">.<\/span><span class=\"nx\">create<\/span><span class=\"p\">();<\/span><\/code><\/pre>\n<\/figure>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Create_static_content\"><\/span>Create static content<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Now, we\u2019ll try to print out the standard <code style=\"color: black; background-color: #e6e6e6;\">HELLO WRLD!<\/code> message. So, we have an <a href=\"https:\/\/guides.emberjs.com\/release\/application\/the-application-template\/\">application template<\/a>. It\u2019s the so-called application layout. Let\u2019s add our welcoming message to it as shown below.<\/p>\n<figure class=\"highlight\">\n<pre><code class=\"language-html\" data-lang=\"html\">h1 HELLO WRLD!<\/code><\/pre>\n<\/figure>\n<p>If we reload the browser page, we\u2019ll see nothing, because all the templates have to be precompiled previously.<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Template_precompilation\"><\/span>Template precompilation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Meet <a href=\"https:\/\/gruntjs.com\/\" rel=\"noopener noreferrer\" target=\"_blank\">Grunt.js<\/a> and, in particular, <a href=\"https:\/\/github.com\/foxyblocks\/grunt-emblem\" rel=\"noopener noreferrer\" target=\"_blank\">grunt-emblem<\/a>. Please, watch this nice <a href=\"https:\/\/www.youtube.com\/watch?v=q3Sqljpr-Vc\" rel=\"noopener noreferrer\" target=\"_blank\">intro<\/a> for Grunt, if you have no idea about it. You can also consult with the<a href=\"https:\/\/gruntjs.com\/getting-started\">installation how-to<\/a>. To read about <code style=\"color: black; background-color: #e6e6e6;\">grunt-emblem<\/code> installation, please check out the project&#8217;s <a href=\"https:\/\/github.com\/foxyblocks\/grunt-emblem\">GitHub repo<\/a>. You also need to learn how to use the <a href=\"https:\/\/github.com\/gruntjs\/grunt-contrib-watch\" rel=\"noopener noreferrer\" target=\"_blank\">grunt-contrib-watch<\/a> plugin in order to add the <code style=\"color: black; background-color: #e6e6e6;\">watch<\/code> task.<\/p>\n<p>Since this article isn\u2019t about Grunt, I&#8217;ll just list <code style=\"color: black; background-color: #e6e6e6;\">Gruntfile.coffee<\/code>.<\/p>\n<figure class=\"highlight\">\n<pre><code class=\"language-coffeescript\" data-lang=\"coffeescript\"><span class=\"nx\">module<\/span><span class=\"p\">.<\/span><span class=\"na\">exports<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">grunt<\/span><span class=\"p\">)<\/span> <span class=\"o\">-&gt;<\/span>\r\n  <span class=\"nx\">grunt<\/span><span class=\"p\">.<\/span><span class=\"na\">loadNpmTasks<\/span> <span class=\"s\">'grunt-emblem'<\/span>\r\n  <span class=\"nx\">grunt<\/span><span class=\"p\">.<\/span><span class=\"na\">loadNpmTasks<\/span> <span class=\"s\">'grunt-contrib-watch'<\/span>\r\n\r\n  <span class=\"nx\">grunt<\/span><span class=\"p\">.<\/span><span class=\"na\">initConfig<\/span>\r\n    <span class=\"na\">emblem<\/span><span class=\"o\">:<\/span>\r\n      <span class=\"na\">compile<\/span><span class=\"o\">:<\/span>\r\n        <span class=\"na\">files<\/span><span class=\"o\">:<\/span>\r\n          <span class=\"s\">'templates.js'<\/span><span class=\"o\">:<\/span> <span class=\"s\">'templates\/*.emblem'<\/span>\r\n\r\n        <span class=\"na\">options<\/span><span class=\"o\">:<\/span>\r\n          <span class=\"na\">root<\/span><span class=\"o\">:<\/span> <span class=\"s\">'templates\/'<\/span>\r\n          <span class=\"na\">dependencies<\/span><span class=\"o\">:<\/span>\r\n            <span class=\"na\">jquery<\/span><span class=\"o\">:<\/span> <span class=\"s\">'lib\/jquery.js'<\/span>\r\n            <span class=\"na\">ember<\/span><span class=\"o\">:<\/span> <span class=\"s\">'lib\/ember.js'<\/span>\r\n            <span class=\"na\">emblem<\/span><span class=\"o\">:<\/span> <span class=\"s\">'lib\/emblem.js'<\/span>\r\n            <span class=\"na\">handlebars<\/span><span class=\"o\">:<\/span> <span class=\"s\">'lib\/handlebars.js'<\/span>\r\n\r\n    <span class=\"na\">watch<\/span><span class=\"o\">:<\/span>\r\n      <span class=\"na\">files<\/span><span class=\"o\">:<\/span> <span class=\"p\">[<\/span><span class=\"s\">'templates\/*.emblem'<\/span><span class=\"p\">]<\/span>\r\n      <span class=\"na\">tasks<\/span><span class=\"o\">:<\/span> <span class=\"p\">[<\/span><span class=\"s\">'emblem'<\/span><span class=\"p\">]<\/span><\/code><\/pre>\n<\/figure>\n<p>Right now, we have two tasks: <code style=\"color: black; background-color: #e6e6e6;\">grunt emblem:compile<\/code> and <code style=\"color: black; background-color: #e6e6e6;\">grunt watch<\/code>.<\/p>\n<p>The <code style=\"color: black; background-color: #e6e6e6;\">grunt emblem:compile<\/code> command produces <code style=\"color: black; background-color: #e6e6e6;\">templates.js<\/code>. So, we need to get back to <code style=\"color: black; background-color: #e6e6e6;\">app.js<\/code> file and add <code style=\"color: black; background-color: #e6e6e6;\">templates.js<\/code> to the requirements\u2019 list.<\/p>\n<p>You can start the <code style=\"color: black; background-color: #e6e6e6;\">grunt watch<\/code> command in the terminal, and all your templates will be precompiled every time you\u2019ve changed them.<\/p>\n<p>Lastly, reload the page, and you should see the message.<\/p>\n<p>You can guess that a lot of details were left behind the scenes. For details, browse through the <a href=\"https:\/\/github.com\/drone-loops\/padrino-assets-pipeline\/commits\/master\">commits history<\/a> on GitHub. In the next parts, we\u2019ll create a kind of CRUD application. Stay tuned.<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Further_reading\"><\/span>Further reading<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><a href=\"https:\/\/www.altoros.com\/blog\/evaluation-of-angularjs-a-javascript-ui-framework\/\">Evaluation of AngularJS, a JavaScript UI Framework<\/a><\/li>\n<li><a href=\"https:\/\/www.altoros.com\/blog\/how-to-speed-up-angularjs-apps-that-use-internalization-libraries\/\">How to Speed Up AngularJS Apps That Use Internalization Libraries<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Step-by-step tutorial on Ember.js framework.<\/p>\n","protected":false},"author":48,"featured_media":65364,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","footnotes":"","_links_to":"","_links_to_target":""},"categories":[214],"tags":[1000,895],"class_list":["post-48257","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-github","tag-research-and-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Diving into Ember.js: Part 1 | Altoros<\/title>\n<meta name=\"description\" content=\"This tutorial explains how to create a JavaScript app with Ember.js: build the skeleton, prepare vendor code, set up an entry point, etc.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.altoros.com\/blog\/diving-into-ember-js-part-1-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Diving into Ember.js: Part 1 | Altoros\" \/>\n<meta property=\"og:description\" content=\"Step-by-step tutorial on Ember.js framework.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.altoros.com\/blog\/diving-into-ember-js-part-1-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Altoros\" \/>\n<meta property=\"article:published_time\" content=\"2013-05-27T09:03:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-10T09:42:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2013\/05\/creating-javascript-app-with-emberjs-framework-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"576\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Anastasia Shaternik\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anastasia Shaternik\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/diving-into-ember-js-part-1-2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/diving-into-ember-js-part-1-2\\\/\"},\"author\":{\"name\":\"Anastasia Shaternik\",\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/#\\\/schema\\\/person\\\/3b61f82b7538ee2b1abe1d3d5ec67d9a\"},\"headline\":\"Diving into Ember.js: Part 1\",\"datePublished\":\"2013-05-27T09:03:02+00:00\",\"dateModified\":\"2021-12-10T09:42:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/diving-into-ember-js-part-1-2\\\/\"},\"wordCount\":615,\"commentCount\":8,\"image\":{\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/diving-into-ember-js-part-1-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/wp-content\\\/uploads\\\/2013\\\/05\\\/creating-javascript-app-with-emberjs-framework-1.png\",\"keywords\":[\"GitHub\",\"Research and Development\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.altoros.com\\\/blog\\\/diving-into-ember-js-part-1-2\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/diving-into-ember-js-part-1-2\\\/\",\"url\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/diving-into-ember-js-part-1-2\\\/\",\"name\":\"Diving into Ember.js: Part 1 | Altoros\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/diving-into-ember-js-part-1-2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/diving-into-ember-js-part-1-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/wp-content\\\/uploads\\\/2013\\\/05\\\/creating-javascript-app-with-emberjs-framework-1.png\",\"datePublished\":\"2013-05-27T09:03:02+00:00\",\"dateModified\":\"2021-12-10T09:42:10+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/#\\\/schema\\\/person\\\/3b61f82b7538ee2b1abe1d3d5ec67d9a\"},\"description\":\"Step-by-step tutorial on Ember.js framework.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/diving-into-ember-js-part-1-2\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.altoros.com\\\/blog\\\/diving-into-ember-js-part-1-2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/diving-into-ember-js-part-1-2\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/wp-content\\\/uploads\\\/2013\\\/05\\\/creating-javascript-app-with-emberjs-framework-1.png\",\"contentUrl\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/wp-content\\\/uploads\\\/2013\\\/05\\\/creating-javascript-app-with-emberjs-framework-1.png\",\"width\":1024,\"height\":576},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/diving-into-ember-js-part-1-2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Diving into Ember.js: Part 1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/\",\"name\":\"Altoros\",\"description\":\"Insight\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/#\\\/schema\\\/person\\\/3b61f82b7538ee2b1abe1d3d5ec67d9a\",\"name\":\"Anastasia Shaternik\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/11872253-96x96.jpg\",\"url\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/11872253-96x96.jpg\",\"contentUrl\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/11872253-96x96.jpg\",\"caption\":\"Anastasia Shaternik\"},\"description\":\"Nastia Shaternik is Software Developer with 5+ years of experience in software development. Did a lot of code refactoring backed with tests.\",\"sameAs\":[\"http:\\\/\\\/altoros.com\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/schaternik\\\/\"],\"url\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/author\\\/anastasia-shaternik\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Diving into Ember.js: Part 1 | Altoros","description":"This tutorial explains how to create a JavaScript app with Ember.js: build the skeleton, prepare vendor code, set up an entry point, etc.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.altoros.com\/blog\/diving-into-ember-js-part-1-2\/","og_locale":"en_US","og_type":"article","og_title":"Diving into Ember.js: Part 1 | Altoros","og_description":"Step-by-step tutorial on Ember.js framework.","og_url":"https:\/\/www.altoros.com\/blog\/diving-into-ember-js-part-1-2\/","og_site_name":"Altoros","article_published_time":"2013-05-27T09:03:02+00:00","article_modified_time":"2021-12-10T09:42:10+00:00","og_image":[{"width":1024,"height":576,"url":"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2013\/05\/creating-javascript-app-with-emberjs-framework-1.png","type":"image\/png"}],"author":"Anastasia Shaternik","twitter_misc":{"Written by":"Anastasia Shaternik","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.altoros.com\/blog\/diving-into-ember-js-part-1-2\/#article","isPartOf":{"@id":"https:\/\/www.altoros.com\/blog\/diving-into-ember-js-part-1-2\/"},"author":{"name":"Anastasia Shaternik","@id":"https:\/\/www.altoros.com\/blog\/#\/schema\/person\/3b61f82b7538ee2b1abe1d3d5ec67d9a"},"headline":"Diving into Ember.js: Part 1","datePublished":"2013-05-27T09:03:02+00:00","dateModified":"2021-12-10T09:42:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.altoros.com\/blog\/diving-into-ember-js-part-1-2\/"},"wordCount":615,"commentCount":8,"image":{"@id":"https:\/\/www.altoros.com\/blog\/diving-into-ember-js-part-1-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2013\/05\/creating-javascript-app-with-emberjs-framework-1.png","keywords":["GitHub","Research and Development"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.altoros.com\/blog\/diving-into-ember-js-part-1-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.altoros.com\/blog\/diving-into-ember-js-part-1-2\/","url":"https:\/\/www.altoros.com\/blog\/diving-into-ember-js-part-1-2\/","name":"Diving into Ember.js: Part 1 | Altoros","isPartOf":{"@id":"https:\/\/www.altoros.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.altoros.com\/blog\/diving-into-ember-js-part-1-2\/#primaryimage"},"image":{"@id":"https:\/\/www.altoros.com\/blog\/diving-into-ember-js-part-1-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2013\/05\/creating-javascript-app-with-emberjs-framework-1.png","datePublished":"2013-05-27T09:03:02+00:00","dateModified":"2021-12-10T09:42:10+00:00","author":{"@id":"https:\/\/www.altoros.com\/blog\/#\/schema\/person\/3b61f82b7538ee2b1abe1d3d5ec67d9a"},"description":"Step-by-step tutorial on Ember.js framework.","breadcrumb":{"@id":"https:\/\/www.altoros.com\/blog\/diving-into-ember-js-part-1-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.altoros.com\/blog\/diving-into-ember-js-part-1-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.altoros.com\/blog\/diving-into-ember-js-part-1-2\/#primaryimage","url":"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2013\/05\/creating-javascript-app-with-emberjs-framework-1.png","contentUrl":"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2013\/05\/creating-javascript-app-with-emberjs-framework-1.png","width":1024,"height":576},{"@type":"BreadcrumbList","@id":"https:\/\/www.altoros.com\/blog\/diving-into-ember-js-part-1-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.altoros.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Diving into Ember.js: Part 1"}]},{"@type":"WebSite","@id":"https:\/\/www.altoros.com\/blog\/#website","url":"https:\/\/www.altoros.com\/blog\/","name":"Altoros","description":"Insight","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.altoros.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.altoros.com\/blog\/#\/schema\/person\/3b61f82b7538ee2b1abe1d3d5ec67d9a","name":"Anastasia Shaternik","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2019\/12\/11872253-96x96.jpg","url":"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2019\/12\/11872253-96x96.jpg","contentUrl":"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2019\/12\/11872253-96x96.jpg","caption":"Anastasia Shaternik"},"description":"Nastia Shaternik is Software Developer with 5+ years of experience in software development. Did a lot of code refactoring backed with tests.","sameAs":["http:\/\/altoros.com","https:\/\/www.linkedin.com\/in\/schaternik\/"],"url":"https:\/\/www.altoros.com\/blog\/author\/anastasia-shaternik\/"}]}},"_links":{"self":[{"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/posts\/48257","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/users\/48"}],"replies":[{"embeddable":true,"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/comments?post=48257"}],"version-history":[{"count":17,"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/posts\/48257\/revisions"}],"predecessor-version":[{"id":65365,"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/posts\/48257\/revisions\/65365"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/media\/65364"}],"wp:attachment":[{"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/media?parent=48257"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/categories?post=48257"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/tags?post=48257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}