1<!DOCTYPE html><html><head><meta charSet="utf-8"/><link rel="stylesheet" class="jsx-1591350030" data-href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Inconsolata" data-optimized-fonts="true"/><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" class="jsx-1591350030"/>
1<script defer="" data-domain="ludu.co" src="https://analytics.t4t5.xyz/js/script.js" class="jsx-1591350030"></script>
1<meta property="og:image" content="https://ludu.co/og.jpg" class="jsx-1591350030"/><title class="jsx-3074265757">What is Ember.JS? - Discover Ember | Ludu</title><link rel="icon" href="/favicon.ico" class="jsx-3074265757"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.css" integrity="sha384-TEMocfGvRuD1rIAacqrknm5BQZ7W7uWitoih+jMNFXQIbNl16bO8OZmylH/Vi/Ei" crossorigin="anonymous" class="jsx-3074265757"/><meta property="og:title" content="What is Ember.JS? - Discover Ember | Ludu" class="jsx-3074265757"/><meta property="og:description" content="Learn the ambitious frontend framework" class="jsx-3074265757"/><meta name="next-head-count" content="10"/><link rel="preload" href="/_next/static/css/231ea1bae59debcc.css" as="style"/><link rel="stylesheet" href="/_next/static/css/231ea1bae59debcc.css" data-n-p=""/><noscript data-n-css=""></noscript>
1<script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script>
1<script src="/_next/static/chunks/webpack-4d0118653e7dfaaa.js" defer=""></script>
1<script src="/_next/static/chunks/framework-4556c45dd113b893.js" defer=""></script>
1<script src="/_next/static/chunks/main-5e02cf890bd3702f.js" defer=""></script>
1<script src="/_next/static/chunks/pages/_app-57c0562dcfe0f7fd.js" defer=""></script>
1<script src="/_next/static/chunks/175675d1-78d180d2e81267dd.js" defer=""></script>
1<script src="/_next/static/chunks/664-7fefc775187e4541.js" defer=""></script>
1<script src="/_next/static/chunks/551-6ea8ffdc769dc30a.js" defer=""></script>
1<script src="/_next/static/chunks/pages/course/%5B...namespaces%5D-1ed6fad8f4f251b3.js" defer=""></script>
1<script src="/_next/static/xIV80flCrqe3ePYQ7BaU5/_buildManifest.js" defer=""></script>
1<script src="/_next/static/xIV80flCrqe3ePYQ7BaU5/_ssgManifest.js" defer=""></script>
1<style id="__jsx-2187876902">div.jsx-2187876902{width:680px;max-width:100%;margin:0 auto;}</style><style id="__jsx-3589733568">.cover.jsx-3589733568{min-height:210px;background-color:#df4e3a;color:white;padding-top:120px;padding-bottom:30px;padding-left:20px;padding-right:20px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}p.jsx-3589733568{margin:0;font-size:16px;font-weight:bold;color:rgba(255,255,255,0.8);text-transform:uppercase;}h1.jsx-3589733568{font-size:40px;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}.author.jsx-3589733568 a.jsx-3589733568{color:white;}.author.jsx-3589733568 a.jsx-3589733568:hover{-webkit-text-decoration:underline;text-decoration:underline;}footer.jsx-3589733568{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;font-size:16px;color:rgba(255,255,255,0.7);}</style><style id="__jsx-3386359181">.hljs{display:block;overflow-x:auto;padding:0.5em;color:#abb2bf;background:#282c34;font-size:16px;}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic;}.hljs-doctag,.hljs-keyword,.hljs-formula{color:#c678dd;}.hljs-section,.hljs-name,.hljs-selector-tag,.hljs-deletion,.hljs-subst{color:#e06c75;}.hljs-literal{color:#56b6c2;}.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute,.hljs-meta-string{color:#98c379;}.hljs-built_in,.hljs-class .hljs-title{color:#e6c07b;}.hljs-attr,.hljs-variable,.hljs-template-variable,.hljs-type,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-number{color:#d19a66;}.hljs-symbol,.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-title{color:#61aeee;}.hljs-emphasis{font-style:italic;}.hljs-strong{font-weight:bold;}.hljs-link{-webkit-text-decoration:underline;text-decoration:underline;}</style><style id="__jsx-3974571247">article.jsx-3974571247{max-width:740px;padding:20px 0;color:rgba(0,0,0,0.9);}@media (max-width:1072px){article.jsx-3974571247{padding:20px;}}article.jsx-3974571247 h2{font-size:26px;margin:30px 0;border-top:1px solid #00000017;padding-top:30px;}article.jsx-3974571247 h3{font-size:21px;padding:7px 0;margin:17px 0;}article.jsx-3974571247 p,article.jsx-3974571247 table th,article.jsx-3974571247 table td{font-size:18px;font-weight:300;line-height:37px;margin:0;}article.jsx-3974571247 p{max-width:100%;overflow-x:auto;padding:1px 0;margin:17px 0;}article.jsx-3974571247 ul,ol{padding-left:55px;margin:20px 0;list-style-type:none;position:relative;}article.jsx-3974571247 ul li::before{content:"";width:10px;height:10px;background-color:rgba(0,0,0,0.85);border-radius:50%;position:absolute;margin-left:-35px;margin-top:13px;}
1article.jsx-3974571247 ol{counter-reset:ludu-ol-counter;}article.jsx-3974571247 ol li::before{content:counter(ludu-ol-counter);counter-increment:ludu-ol-counter;width:20px;height:20px;color:#4ab128;border:2px solid rgba(74,177,40,0.3);border-radius:50%;font-weight:bold;position:absolute;margin-left:-42px;margin-top:8px;font-size:15px;text-align:center;}article.jsx-3974571247 ol li ol,article.jsx-3974571247 ol li ul,article.jsx-3974571247 ul li ol,article.jsx-3974571247 ul li ul{list-style-type:circle;padding-left:20px;}article.jsx-3974571247 ol li ol li::before,article.jsx-3974571247 ol li ul li::before,article.jsx-3974571247 ul li ol li::before,article.jsx-3974571247 ul li ul li::before{display:none;}article.jsx-3974571247 a{color:#0085DA;}article.jsx-3974571247 a:hover{-webkit-text-decoration:underline;text-decoration:underline;}article.jsx-3974571247 p code,article.jsx-3974571247 table code{ 2 font-family: 'Inconsolata', Monaco, monospace; 3 padding: 3px 6px; 4 border-radius: 2px; 5 border: 1px solid rgba(0, 0, 0, 0.12); 6 background-color: rgba(128, 128, 128, 0.07); 7 color: #ca2657; 8;}article.jsx-3974571247 pre code{padding:20px;border-radius:5px;line-height:20px;}article.jsx-3974571247 .button{font-family:inherit;text-align:center;background-color:#37D03D;box-shadow:0 1px 3px 0 rgba(0,0,0,0.1);border:none;border-radius:5px;color:white;font-size:16px;font-weight:bold;padding:5px 20px;outline:none;display:block;margin:20px auto;-webkit-transition:background-color 0.2s;transition:background-color 0.2s;width:-webkit-max-content;width:-moz-max-content;width:max-content;}article.jsx-3974571247 .button:hover{background-color:#20ba04;-webkit-text-decoration:none;text-decoration:none;}article.jsx-3974571247 h2:first-child,article.jsx-3974571247 ul:first-child{margin-top:0;padding-top:0;border-top:none;}article.jsx-3974571247 img{max-width:100%;display:block;margin:0 auto;margin-top:10px;}article.jsx-3974571247 img + em{display:block;margin-top:20px;text-align:center;}article.jsx-3974571247 video,article.jsx-3974571247 .video-poster{margin:20px auto;display:block;max-width:100%;}article.jsx-3974571247 .table-wrapper{position:relative;margin:30px 0;}article.jsx-3974571247 table{width:100%;border-collapse:collapse;}article.jsx-3974571247 td,article.jsx-3974571247 th{border:1px solid rgb(206,206,206);padding:10px 20px;vertical-align:top;}article.jsx-3974571247 td{background-color:white;}article.jsx-3974571247 th{background-color:#f8f8f8;box-shadow:inset 0px 1px 0px rgba(white,0.65);text-align:center;}article.jsx-3974571247 blockquote{border-radius:0 3px 3px 0;padding:1px 20px;display:block;margin:20px 0;position:relative;clear:both;}article.jsx-3974571247 blockquote h2:first-child{padding-top:20px;}article.jsx-3974571247 blockquote[data-color="none"]{box-shadow:inset 12px 0 0 -7px #e5e5e5;color:#858585;padding:0 20px;}article.jsx-3974571247 blockquote[data-color="yellow"]{background-color:#fffce5;box-shadow:inset 12px 0 0 -7px #f9d962;}article.jsx-3974571247 blockquote[data-color="green"]{background-color:#DEFACC;box-shadow:inset 12px 0 0 -7px #4AB128;}article.jsx-3974571247 blockquote[data-color="red"]{background-color:#FFE9E0;box-shadow:inset 12px 0 0 -7px #F1795E;}article.jsx-3974571247 blockquote[data-color="yellow"] h2{color:#9e7700;}article.jsx-3974571247 blockquote[data-color="green"] h2{color:#4AB128;}article.jsx-3974571247 blockquote[data-color="red"] h2{color:#F1795E;}article.jsx-3974571247 iframe{width:100%;margin:20px 0;}article.jsx-3974571247 iframe.youtube{max-width:100%;}article.jsx-3974571247 math:not(.editing),article.jsx-3974571247 .math:not(.editing){max-width:100%;overflow-y:hidden;overflow-x:auto;}article.jsx-3974571247 div.math,article.jsx-3974571247 math[data-display-mode="true"]{margin:20px 0;clear:both;}article.jsx-3974571247 math[data-display-mode="true"] .math-editor{padding:6px 0;}article.jsx-3974571247 mark{background-color:#93c5932e;cursor:pointer;}article.jsx-3974571247 mark:hover{background-color:#86c38640;}article.jsx-3974571247 mark[data-selected]{background-color:#47fd479e;}</style><style id="__jsx-2151673214">.completed.jsx-2151673214{position:absolute;
8left:-5px;top:19px;width:21px;height:26px;}.line.jsx-2151673214{width:2px;position:absolute;left:11px;}.line.top.jsx-2151673214{top:-120%;bottom:50%;background-image:linear-gradient( 180deg, #df4e3a00 0%, #df4e3a 100% );}.line.bottom.jsx-2151673214{top:50%;bottom:-120%;background-image:linear-gradient( 180deg, #df4e3a 0%, #df4e3a00 100% );}</style><style id="__jsx-3408176197">.step.jsx-3408176197{font-size:18px;color:rgba(0,0,0,0.7);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:25px 0;white-space:nowrap;position:relative;}.step[data-active="true"].jsx-3408176197{color:#df4e3a;font-weight:bold;}.step.jsx-3408176197:hover{color:#df4e3a;}.step.jsx-3408176197:first-of-type .line.top,.step.jsx-3408176197:last-of-type .line.bottom{display:none;}.step.jsx-3408176197 .lock-icon{position:absolute;top:18px;left:-2px;z-index:2;}.step[data-active="true"].jsx-3408176197 .lock-icon path:last-of-type{fill:#df4e3a;}.index.jsx-3408176197{font-size:13px;text-transform:uppercase;color:rgba(0,0,0,0.3);font-weight:bold;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-bottom:4px;}.name-container.jsx-3408176197{overflow:hidden;text-overflow:ellipsis;}.name.jsx-3408176197{text-overflow:ellipsis;overflow:hidden;}.dot.jsx-3408176197{background-color:white;width:10px;height:10px;-webkit-flex:0 0 10px;-ms-flex:0 0 10px;flex:0 0 10px;border:2px solid rgba(0,0,0,0.17);display:inline-block;border-radius:50%;margin-right:25px;margin-top:20px;position:relative;z-index:2;}.dot[data-marked="true"].jsx-3408176197{border-color:#df4e3a;}</style><style id="__jsx-3074265757">.lesson.jsx-3074265757{width:calc(100% - 345px);}.next.jsx-3074265757{text-align:right;margin:50px 20px;}.next.jsx-3074265757 a.jsx-3074265757{color:#df4e3a;font-size:18px;text-transform:uppercase;}.next.jsx-3074265757 a.jsx-3074265757:hover{-webkit-text-decoration:underline;text-decoration:underline;}.next.jsx-3074265757 a.jsx-3074265757::before{content:"";width:0px;height:0px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:16px solid #df4e3a;display:inline-block;margin-right:10px;vertical-align:middle;position:relative;top:-2px;}@media (max-width:768px){.lesson.jsx-3074265757{width:100%;}}.chapters.jsx-3074265757{overflow:auto;position:fixed;right:0;top:0;bottom:0;width:315px;-webkit-flex:0 0 315px;-ms-flex:0 0 315px;flex:0 0 315px;background-color:#f8f8f9;box-shadow:1px 0px 0px 2px rgba(0,0,0,0.07);padding:15px;padding-top:100px;}@media (max-width:768px){.chapters.jsx-3074265757{-webkit-transform:translate(100%);-ms-transform:translate(100%);transform:translate(100%);}}.chapters.jsx-3074265757::after{content:"";bottom:0;position:fixed;left:0;right:0;height:40px;z-index:10;background-image:linear-gradient( -180deg, rgba(247,247,248,0), #f8f8f9 75%, #f8f8f9 );}.steps.jsx-3074265757{position:relative;}.steps.jsx-3074265757::before{content:"";position:absolute;left:6px;top:25px;bottom:10px;width:2px;background-color:#e4e4e4;}</style><style id="__jsx-2049141803">header.jsx-2049141803{position:fixed;left:0px;right:0px;top:0px;height:74px;background:rgba(255,255,255,0.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:0 36px;z-index:100;}@media (max-width:768px){header.jsx-2049141803{padding:0 20px;}}.icon.jsx-2049141803{width:25px;height:25px;background-size:contain;background-position:center center;margin-right:8px;}.course.jsx-2049141803{font-size:16px;color:rgba(0,0,0,0.9);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:bold;}.back.jsx-2049141803{color:rgba(0,0,0,0.7);}a.jsx-2049141803{color:inherit;}a.jsx-2049141803:hover{color:#37D03D;}a[data-active="true"].jsx-2049141803{color:#37D03D;font-weight:bold;position:relative;}a[data-active="true"].jsx-2049141803::after{content:"";position:absolute;bottom:-10px;left:0;right:0;height:2px;background-color:#37D03D;border-radius:3px;}nav.jsx-2049141803{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;}nav.jsx-2049141803 a.jsx-2049141803{margin-left:40px;}.desc.jsx-2049141803{color:rgba(0,0,0,0.4);}</style><style id="__jsx-1591350030">body{font-family:'Lato', 'Helvetica Neue', Helvetica, sans-serif;-webkit-font-smoothing:antialiased;margin:0;padding:0;}a{-webkit-text-decoration:none;text-decoration:none;}</style><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Inconsolata"/></head><body><div id="__next"><div class="jsx-1591350030"><div class="jsx-2049141803"><header class="jsx-2049141803"><div class="jsx-2049141803 course"><div style="background-image:url(/course-icons/ember.png)" class="jsx-2049141803 icon"></div><p class="jsx-2049141803 course-name">Discover Ember</p></div><a class="jsx-2049141803 back" href="/">Back to All Courses</a></header><div class="jsx-3074265757 lesson"><div class="jsx-3589733568 cover"><div style="display:flex;flex-direction:column;flex-grow:1" class="jsx-2187876902"><p class="jsx-3589733568">Lesson <!-- -->1</p><h1 class="jsx-3589733568">What is Ember.JS?</h1><footer class="jsx-3589733568"><div class="jsx-3589733568 author">by<!-- --> <a target="_blank" href="https://t4t5.com" class="jsx-3589733568">Tristan (t4t5)</a></div><time class="jsx-3589733568">Published <!-- -->May 2015</time></footer></div></div><div style="padding-bottom:42px" class="jsx-2187876902"><article class="jsx-3386359181 jsx-3974571247"><div class="jsx-3386359181 jsx-3974571247"><p>In this first chapter we will go through what makes Ember.js great and why you would want to use it for your next big web project.</p> 9<h2>What is Ember.js?</h2> 10<p>Ember.js is a <strong>framework for front-end development</strong>, which means that it helps you create the design and logic that the website user interacts with.</p> 11<p><img src="/content/ember/what-is-ember/framework.png" alt=""></p> 12<p>To understand what problems Ember solves and how it makes web development easier and much more enjoyable, let's first go through some basic web history.</p> 13<h2>The changing nature of the web</h2> 14<p>In the early 90's, designing a website was very straightforward and uncomplicated. This was back when the web only consisted of <strong>text documents</strong>. To create these documents, the only thing you needed was a markup language called <strong>HTML</strong>, and some <strong>CSS</strong> that you could sprinkle onto make it look nicer.</p> 15<p>
15<img src="/content/ember/what-is-ember/microsoft-vintage.jpeg" alt=""> 16<em>Microsoft's website in the good ol' times (1994)</em></p> 17<p>All the interactions on a site back then consisted of <strong>linking from one HTML page to another</strong>. Every time you clicked a button or a link, the website made a request to the server and your computer then proceeded to download en entirely new HTML document in order to show the new page. This might sound inefficient, but since everything consisted of only text and images back then, it worked just fine. However, this was soon about to change.</p> 18<p>As people wanted <strong>more and more advanced websites</strong>, the simplicity of HTML and CSS soon became very limiting. This is when <strong>JavaScript</strong> was introduced in 1995 as a Turing-complete language specifically tailored for web development.</p> 19<p>Initially, JavaScript was generally considered to be an "ugly language", yet it had the potential to <strong>make websites behave much more like a native application</strong> rather than just a static document viewer.</p> 20<p>Over the course of many years, some great technologies like <strong>jQuery</strong>, <strong>AJAX</strong> and <strong>Backbone.js</strong> helped bring JavaScript to the mainstream and cemented the view that it was indeed the right way to do things.</p> 21<p><img src="/content/ember/what-is-ember/google-maps.jpeg" alt=""> 22<em>Google Maps was one of the early websites to showcase what JavaScript was really capable of.</em></p> 23<p>Even though JavaScript and its libraries solved a lot of the previous pain points, it also <strong>created a bunch of new problems</strong>. Now that you could load new data into your website without reloading the whole page, how would you efficiently manage state, and make sure that all the necessary elements were updated when new data was loaded?</p> 24<p>As the user experience on websites became more complex, the JavaScript behind the scenes doing all the work was often referred to as "spaghetti code" because it was so unmanageable.</p> 25<p>This is where <strong>Ember</strong> comes in. The founders of Ember realized early on how the web was changing and understood the need for a front-end framework that would enforce some <strong>best practices</strong> that were commonly agreed on.</p> 26<p><img src="/content/ember/what-is-ember/ember-founders.jpeg" alt=""> 27<em>Yehuda Katz and Tom Dale, the initial creators of Ember.js</em></p> 28<p>Today, Ember has established itself as being <strong>a great framework for developers who want to build "ambitious applications"</strong>, and some big companies have taken the leap to use it in their stack.</p> 29<p><img src="/content/ember/what-is-ember/companies.jpeg" alt=""></p> 30<p>If you want to know more about the motivations for a pure front-end framework, Tom Dale gave an excellent talk at <em>Cascadia.js</em> in 2013:</p> 31<h2>Why Ember instead of XX?</h2> 32<p>If you're an experienced web developer, you probably know that there are tons of other frameworks to choose between already, notably <strong>Backbone.js</strong>, <strong>Angular.js</strong> and <strong>React.js</strong>. Why would you want to choose Ember instead of these?</p> 33<p>First of all, let me say that I have used most of the well-known JavaScript frameworks and libraries that exist today and that <strong>they all have their strengths and weaknesses</strong>, including Ember. The wisest thing to do is, not surprisingly, "<strong>use the right tool for the right job</strong>". So what are some things that Ember is especially good at?</p> 34<p><strong>You should consider using Ember.js if...</strong></p> 35<ul> 36<li> 37<p>You want to <strong>get started quickly and get a product out fast</strong> without writing lots of boilerplate code (it's the optimal front-end framework for startups!)</p> 38</li> 39<li> 40<p>You're planning on building an <strong>ambitious</strong> and <strong>complex</strong> application with a lot of logic on the front-end side.</p> 41</li> 42<li> 43<p>You care about having <strong>good URLs</strong> when the user navigates through your app.</p> 44</li> 45<li> 46<p>You don't want to spend time arguing about what the file structure of your project should be or what build tool to use. You'd prefer to just have it <strong>set up beforehand</strong>and <strong>start getting productive</strong>.</p> 47</li> 48</ul> 49<p><strong>On the other hand, you should probably <em><strong><strong>not</strong></strong></em> use Ember.js if...</strong></p> 50<ul> 51<li> 52<p>You're just building a <strong>very simple static site</strong>, without much interaction or state. In this case, Ember will probably just feel bloated.</p> 53</li> 54<li> 55<p>Your website requires that the initial page load is blazing fast. As your Ember apps get bigger, you will currently <strong>have to sacrifice some initial loading time</strong> in order to have a faster and more interactive experience once everything is loaded (although this is constantly being improved thanks to addons like  <a href="https://ember-fastboot.com/">Ember FastBoot</a> and <a href="http://ember-engines.com/">Ember Engines</a>)</p> 56</li> 57</ul> 58</div></article><div class="jsx-3074265757 next"><a href="/course/ember/installing-ember-cli" class="jsx-3074265757">Next lesson: <strong class="jsx-3074265757">Installing Ember CLI</strong></a></div></div></div><nav class="jsx-3074265757 chapters"><div class="jsx-3074265757 steps"><a data-active="true" class="jsx-3408176197 step" href="/course/ember/what-is-emberjs/"><span data-marked="true" class="jsx-3408176197 dot"></span><div class="jsx-2151673214 completed"><div class="jsx-2151673214 line top"></div><div class="jsx-2151673214 line bottom"></div></div><div class="jsx-3408176197 name-container"><span class="jsx-3408176197 index">Lesson <!-- -->1</span><span class="jsx-3408176197 name">What is Ember.JS?</span></div></a><a data-active="false" class="jsx-3408176197 step" href="/course/ember/installing-ember-cli/"><span data-marked="false" class="jsx-3408176197 dot"></span><div class="jsx-3408176197 name-container"><span class="jsx-3408176197 index">Lesson <!-- -->2</span><span class="jsx-3408176197 name">Installing Ember CLI</span></div></a><a data-active="false" class="jsx-3408176197 step" href="/course/ember/creating-your-project/"><span data-marked="false" class="jsx-3408176197 dot"></span><div class="jsx-3408176197 name-container"><span class="jsx-3408176197 index">Lesson <!-- -->3</span><span class="jsx-3408176197 name">Creating the project</span></div></a><a data-active="false" class="jsx-3408176197 step" href="/course/ember/templating/"><span data-marked="false" class="jsx-3408176197 dot"></span><div class="jsx-3408176197 name-container"><span class="jsx-3408176197 index">Lesson <!-- -->4</span><span class="jsx-3408176197 name">Templating with HTMLBars</span></div></a><a data-active="false" class="jsx-3408176197 step" href="/course/ember/routes/"><span data-marked="false" class="jsx-3408176197 dot"></span><div class="jsx-3408176197 name-container"><span class="jsx-3408176197 index">Lesson <!-- -->5</span><span class="jsx-3408176197 name">Routes</span></div></a><a data-active="false" class="jsx-3408176197 step" href="/course/ember/components/"><span data-marked="false" class="jsx-3408176197 dot"></span><div class="jsx-3408176197 name-container"><span class="jsx-3408176197 index">Lesson <!-- -->6</span><span class="jsx-3408176197 name">Components</span></div></a><a data-active="false" class="jsx-3408176197 step" href="/course/ember/ember-data/"><span data-marked="false" class="jsx-3408176197 dot"></span><div class="jsx-3408176197 name-container"><span class="jsx-3408176197 index">Lesson <!-- -->7</span><span class="jsx-3408176197 name">Ember Data</span></div></a><a data-active="false" class="jsx-3408176197 step" href="/course/ember/the-profile-page/"><span data-marked="false" class="jsx-3408176197 dot"></span><div class="jsx-3408176197 name-container"><span class="jsx-3408176197 index">Lesson <!-- -->8</span><span class="jsx-3408176197 name">Creating the profile page</span></div></a><a data-active="false" class="jsx-3408176197 step" href="/course/ember/using-external-libraries/"><span data-marked="false" class="jsx-3408176197 dot"></span><div class="jsx-3408176197 name-container"><span class="jsx-3408176197 index">Lesson <!-- -->9</span><span class="jsx-3408176197 name">Using external libraries</span></div></a><a data-active="false" class="jsx-3408176197 step" href="/course/ember/forms-and-user-data/"><span data-marked="false" class="jsx-3408176197 dot"></span><div class="jsx-3408176197 name-container"><span class="jsx-3408176197 index">Lesson <!-- -->10</span><span class="jsx-3408176197 name">Forms and user data</span></div></a><a data-active="false" class="jsx-3408176197 step" href="/course/ember/animations-with-liquid-fire/"><span data-marked="false" class="jsx-3408176197 dot"></span><div class="jsx-3408176197 name-container"><span class="jsx-3408176197 index">Lesson <!-- -->11</span><span class="jsx-3408176197 name">Animations with Liquid Fire</span></div></a><a data-active="false" class="jsx-3408176197 step" href="/course/ember/posting-new-chirps/"><span data-marked="false" class="jsx-3408176197 dot"></span><div class="jsx-3408176197 name-container"><span class="jsx-3408176197 index">Lesson <!-- -->12</span><span class="jsx-3408176197 name">Posting new chirps</span></div></a><a data-active="false" class="jsx-3408176197 step" href="/course/ember/building-a-nodejs-backend/"><span data-marked="false" class="jsx-3408176197 dot"></span><div class="jsx-3408176197 name-container"><span class="jsx-3408176197 index">Lesson <!-- -->13</span><span class="jsx-3408176197 name">Building a Node.js backend</span></div></a><a data-active="false" class="jsx-3408176197 step" href="/course/ember/consuming-the-rest-api/"><span data-marked="false" class="jsx-3408176197 dot"></span><div class="jsx-3408176197 name-container"><span class="jsx-3408176197 index">Lesson <!-- -->14</span><span class="jsx-3408176197 name">Consuming the REST API</span></div></a><a data-active="false" class="jsx-3408176197 step" href="/course/ember/adding-authentication/"><span data-marked="false" class="jsx-3408176197 dot"></span><div class="jsx-3408176197 name-container"><span class="jsx-3408176197 index">Lesson <!-- -->15</span><span class="jsx-3408176197 name">Adding authentication</span></div></a><a data-active="false" class="jsx-3408176197 step" href="/course/ember/enhancing-the-profile-page/"><span data-marked="false" class="jsx-3408176197 dot"></span><div class="jsx-3408176197 name-container"><span class="jsx-3408176197 index">Lesson <!-- -->16</span><span class="jsx-3408176197 name">Enhancing the profile page</span></div></a><a data-active="false" class="jsx-3408176197 step" href="/course/ember/automated-testing/"><span data-marked="false" class="jsx-3408176197 dot"></span><div class="jsx-3408176197 name-container"><span class="jsx-3408176197 index">Lesson <!-- -->17</span><span class="jsx-3408176197 name">Automated testing</span></div></a><a data-active="false" class="jsx-3408176197 step" href="/course/ember/deploying-to-heroku/"><span data-marked="false" class="jsx-3408176197 dot"></span><div class="jsx-3408176197 name-container"><span class="jsx-3408176197 index">Lesson <!-- -->18</span><span class="jsx-3408176197 name">Deploying to Heroku</span></div></a><a data-active="false" class="jsx-3408176197 step" href="/course/ember/where-to-go-from-here/"><span data-marked="false" class="jsx-3408176197 dot"></span><div class="jsx-3408176197 name-container"><span class="jsx-3408176197 index">Lesson <!-- -->
5819</span><span class="jsx-3408176197 name">Where to go from here</span></div></a></div></nav></div></div></div>
58<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"course":{"namespace":"ember","name":"Discover Ember","tagline":"Learn the ambitious frontend framework","color":"#df4e3a","instructor":"Tristan (t4t5)","instructorUrl":"https://t4t5.com","publishedOn":"May 2015"},"lesson":{"namespace":"what-is-emberjs","title":"What is Ember.JS?","index":1},"html":"\u003cp\u003eIn this first chapter we will go through what makes Ember.js great and why you would want to use it for your next big web project.\u003c/p\u003e\n\u003ch2\u003eWhat is Ember.js?\u003c/h2\u003e\n\u003cp\u003eEmber.js is a \u003cstrong\u003eframework for front-end development\u003c/strong\u003e, which means that it helps you create the design and logic that the website user interacts with.\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"/content/ember/what-is-ember/framework.png\" alt=\"\"\u003e\u003c/p\u003e\n\u003cp\u003eTo understand what problems Ember solves and how it makes web development easier and much more enjoyable, let's first go through some basic web history.\u003c/p\u003e\n\u003ch2\u003eThe changing nature of the web\u003c/h2\u003e\n\u003cp\u003eIn the early 90's, designing a website was very straightforward and uncomplicated. This was back when the web only consisted of \u003cstrong\u003etext documents\u003c/strong\u003e. To create these documents, the only thing you needed was a markup language called \u003cstrong\u003eHTML\u003c/strong\u003e, and some \u003cstrong\u003eCSS\u003c/strong\u003e that you could sprinkle onto make it look nicer.\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"/content/ember/what-is-ember/microsoft-vintage.jpeg\" alt=\"\"\u003e\n\u003cem\u003eMicrosoft's website in the good ol' times (1994)\u003c/em\u003e\u003c/p\u003e\n\u003cp\u003eAll the interactions on a site back then consisted of \u003cstrong\u003elinking from one HTML page to another\u003c/strong\u003e. Every time you clicked a button or a link, the website made a request to the server and your computer then proceeded to download en entirely new HTML document in order to show the new page. This might sound inefficient, but since everything consisted of only text and images back then, it worked just fine. However, this was soon about to change.\u003c/p\u003e\n\u003cp\u003eAs people wanted \u003cstrong\u003emore and more advanced websites\u003c/strong\u003e, the simplicity of HTML and CSS soon became very limiting. This is when \u003cstrong\u003eJavaScript\u003c/strong\u003e was introduced in 1995 as a Turing-complete language specifically tailored for web development.\u003c/p\u003e\n\u003cp\u003eInitially, JavaScript was generally considered to be an \"ugly language\", yet it had the potential to \u003cstrong\u003emake websites behave much more like a native application\u003c/strong\u003e rather than just a static document viewer.\u003c/p\u003e\n\u003cp\u003eOver the course of many years, some great technologies like \u003cstrong\u003ejQuery\u003c/strong\u003e, \u003cstrong\u003eAJAX\u003c/strong\u003e and \u003cstrong\u003eBackbone.js\u003c/strong\u003e helped bring JavaScript to the mainstream and cemented the view that it was indeed the right way to do things.\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"/content/ember/what-is-ember/google-maps.jpeg\" alt=\"\"\u003e\n\u003cem\u003eGoogle Maps was one of the early websites to showcase what JavaScript was really capable of.\u003c/em\u003e\u003c/p\u003e\n\u003cp\u003eEven though JavaScript and its libraries solved a lot of the previous pain points, it also \u003cstrong\u003ecreated a bunch of new problems\u003c/strong\u003e. Now that you could load new data into your website without reloading the whole page, how would you efficiently manage state, and make sure that all the necessary elements were updated when new data was loaded?\u003c/p\u003e\n\u003cp\u003eAs the user experience on websites became more complex, the JavaScript behind the scenes doing all the work was often referred to as \"spaghetti code\" because it was so unmanageable.\u003c/p\u003e\n\u003cp\u003eThis is where \u003cstrong\u003eEmber\u003c/strong\u003e comes in. The founders of Ember realized early on how the web was changing and understood the need for a front-end framework that would enforce some \u003cstrong\u003ebest practices\u003c/strong\u003e that were commonly agreed on.\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"/content/ember/what-is-ember/ember-founders.jpeg\" alt=\"\"\u003e\n\u003cem\u003eYehuda Katz and Tom Dale, the initial creators of Ember.js\u003c/em\u003e\u003c/p\u003e\n\u003cp\u003eToday, Ember has established itself as being \u003cstrong\u003ea great framework for developers who want to build \"ambitious applications\"\u003c/strong\u003e, and some big companies have taken the leap to use it in their stack.\u
58003c/p\u003e\n\u003cp\u003e\u003cimg src=\"/content/ember/what-is-ember/companies.jpeg\" alt=\"\"\u003e\u003c/p\u003e\n\u003cp\u003eIf you want to know more about the motivations for a pure front-end framework, Tom Dale gave an excellent talk at \u003cem\u003eCascadia.js\u003c/em\u003e in 2013:\u003c/p\u003e\n\u003ch2\u003eWhy Ember instead of XX?\u003c/h2\u003e\n\u003cp\u003eIf you're an experienced web developer, you probably know that there are tons of other frameworks to choose between already, notably \u003cstrong\u003eBackbone.js\u003c/strong\u003e, \u003cstrong\u003eAngular.js\u003c/strong\u003e and \u003cstrong\u003eReact.js\u003c/strong\u003e. Why would you want to choose Ember instead of these?\u003c/p\u003e\n\u003cp\u003eFirst of all, let me say that I have used most of the well-known JavaScript frameworks and libraries that exist today and that \u003cstrong\u003ethey all have their strengths and weaknesses\u003c/strong\u003e, including Ember. The wisest thing to do is, not surprisingly, \"\u003cstrong\u003euse the right tool for the right job\u003c/strong\u003e\". So what are some things that Ember is especially good at?\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eYou should consider using Ember.js if...\u003c/strong\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003eYou want to \u003cstrong\u003eget started quickly and get a product out fast\u003c/strong\u003e without writing lots of boilerplate code (it's the optimal front-end framework for startups!)\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eYou're planning on building an \u003cstrong\u003eambitious\u003c/strong\u003e and \u003cstrong\u003ecomplex\u003c/strong\u003e application with a lot of logic on the front-end side.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eYou care about having \u003cstrong\u003egood URLs\u003c/strong\u003e when the user navigates through your app.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eYou don't want to spend time arguing about what the file structure of your project should be or what build tool to use. You'd prefer to just have it \u003cstrong\u003eset up beforehand\u003c/strong\u003eand \u003cstrong\u003estart getting productive\u003c/strong\u003e.\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eOn the other hand, you should probably \u003cem\u003e\u003cstrong\u003e\u003cstrong\u003enot\u003c/strong\u003e\u003c/strong\u003e\u003c/em\u003e use Ember.js if...\u003c/strong\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003eYou're just building a \u003cstrong\u003every simple static site\u003c/strong\u003e, without much interaction or state. In this case, Ember will probably just feel bloated.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eYour website requires that the initial page load is blazing fast. As your Ember apps get bigger, you will currently \u003cstrong\u003ehave to sacrifice some initial loading time\u003c/strong\u003e in order to have a faster and more interactive experience once everything is loaded (although this is constantly being improved thanks to addons like  \u003ca href=\"https://ember-fastboot.com/\"\u003eEmber FastBoot\u003c/a\u003e and \u003ca href=\"http://ember-engines.com/\"\u003eEmber Engines\u003c/a\u003e)\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n","jsonContent":null,"chapters":[{"name":"What is Ember.JS?","namespace":"what-is-emberjs","index":1},{"name":"Installing Ember CLI","namespace":"installing-ember-cli","index":2},{"name":"Creating the project","namespace":"creating-your-project","index":3},{"name":"Templating with HTMLBars","namespace":"templating","index":4},{"name":"Routes","namespace":"routes","index":5},{"name":"Components","namespace":"components","index":6},{"name":"Ember Data","namespace":"ember-data","index":7},{"name":"Creating the profile page","namespace":"the-profile-page","index":8},{"name":"Using external libraries","namespace":"using-external-libraries","index":9},{"name":"Forms and user data","namespace":"forms-and-user-data","index":10},{"name":"Animations with Liquid Fire","namespace":"animations-with-liquid-fire","index":11},{"name":"Posting new chirps","namespace":"posting-new-chirps","index":12},{"name":"Building a Node.js backend","namespace":"building-a-nodejs-backend","index":13},{"name":"Consuming the REST API","namespace":"consuming-the-rest-api","index":14},{"name":"Adding authentication","namespace":"adding-authentication","index":15}
58,{"name":"Enhancing the profile page","namespace":"enhancing-the-profile-page","index":16},{"name":"Automated testing","namespace":"automated-testing","index":17},{"name":"Deploying to Heroku","namespace":"deploying-to-heroku","index":18},{"name":"Where to go from here","namespace":"where-to-go-from-here","index":19}],"nextChapter":{"name":"Installing Ember CLI","namespace":"installing-ember-cli","index":2}},"__N_SSG":true},"page":"/course/[...namespaces]","query":{"namespaces":["ember","what-is-emberjs"]},"buildId":"xIV80flCrqe3ePYQ7BaU5","isFallback":false,"gsp":true,"scriptLoader":[]}</script>
58</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.