{"id":1600,"date":"2022-06-07T10:08:44","date_gmt":"2022-06-07T10:08:44","guid":{"rendered":"https:\/\/blog.amt.in\/?p=1600"},"modified":"2022-06-07T10:08:44","modified_gmt":"2022-06-07T10:08:44","slug":"introduction-to-ember-js","status":"publish","type":"post","link":"https:\/\/blog.amt.in\/index.php\/2022\/06\/07\/introduction-to-ember-js\/","title":{"rendered":"Introduction to Ember.js"},"content":{"rendered":"<p>Ember.js\u00c2\u00a0is an\u00c2\u00a0open-source\u00c2\u00a0JavaScript\u00c2\u00a0web framework, based on the\u00c2\u00a0Model\u00e2\u20ac\u201cview\u00e2\u20ac\u201cview model\u00c2\u00a0(MVVM) pattern. It allows developers to create scalable\u00c2\u00a0single-page web applications\u00c2\u00a0by incorporating common\u00c2\u00a0idioms\u00c2\u00a0and best practices into the framework.<\/p>\n<p>From the beginning Ember was designed around several key ideas:<\/p>\n<ul>\n<li>Focus on ambitious web applications:\u00c2\u00a0\u00c2\u00a0Ember sets out to provide a wholesale solution to the client-side application problem. This is in contrast to many JavaScript frameworks that start by providing a solution to the V in MVC (Model\u00e2\u20ac\u201cView\u00e2\u20ac\u201cController), and attempt to grow from there.<\/li>\n<li>More productive out of the box:\u00c2\u00a0Ember is one component of a set of tools that work together to provide a complete development stack. The aim of these tools is to make the developer productive immediately. For example Ember CLI,\u00c2\u00a0provides a standard application structure and build pipeline. It also has a plug-gable architecture and over 3500 addons\u00c2\u00a0to enhance and extend it.<\/li>\n<li>Stability without stagnation:\u00c2\u00a0This is the idea that backward compatibility is important and can be maintained while still innovating and evolving the framework.<\/li>\n<li>Future web standards foresight:\u00c2\u00a0Ember has been an early adopter and pioneer of many standards around JavaScript and the web including promises,\u00c2\u00a0web components\u00c2\u00a0and ES6 syntax. Yehuda Katz, one of Ember&#8217;s co-founders, is a member on TC39, which is the committee responsible for future versions of the JavaScript language.<\/li>\n<\/ul>\n<p>Ember consists of five key concepts:<\/p>\n<dl>\n<dt>Routes<\/dt>\n<dd>In Ember, the state of an application is represented by a URL. Each URL has a corresponding route object that controls what is visible to the user.<\/dd>\n<\/dl>\n<dl>\n<dt>Models<\/dt>\n<dd>Every route has an associated model, containing the data associated with the current state of the application.\u00c2\u00a0While one can use\u00c2\u00a0jQuery\u00c2\u00a0to load\u00c2\u00a0JSON\u00c2\u00a0objects from a server and use those objects as models, most applications use a model library such as Ember Data to handle this.<\/dd>\n<\/dl>\n<dl>\n<dt>Templates<\/dt>\n<dd>Templates are used to build the application&#8217;s HTML and are written with the\u00c2\u00a0HTML Bars\u00c2\u00a0templating language. (HTML Bars is a variation of\u00c2\u00a0Handlebars\u00c2\u00a0that builds DOM elements rather than a String.)<\/dd>\n<\/dl>\n<dl>\n<dt>Components<\/dt>\n<dd>A component is a custom HTML tag. Behavior is implemented using JavaScript and its appearance is defined using HTML Bars templates. Components &#8220;own&#8221; their data. They can also be nested and can communicate with their parent components through actions (events). Other component libraries such as\u00c2\u00a0Polymer\u00c2\u00a0can also be used with Ember.<\/dd>\n<\/dl>\n<dl>\n<dt>Services<\/dt>\n<dd>Services are just singleton objects to hold long-lived data such as user sessions.<\/dd>\n<\/dl>\n<p>Ember also provides\u00c2\u00a0dependency injection,\u00c2\u00a0declarative\u00c2\u00a0two-way\u00c2\u00a0data binding, computed properties, and automatically-updating\u00c2\u00a0templates.<\/p>\n<p>The above is a brief about Ember.js. Watch this space for more updates on the latest trends in Technology.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ember.js\u00c2\u00a0is an\u00c2\u00a0open-source\u00c2\u00a0JavaScript\u00c2\u00a0web framework, based on<\/p>\n","protected":false},"author":1,"featured_media":1601,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[231,30,7],"tags":[232,14,18],"class_list":["post-1600","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ember-js","category-javascript","category-techtrends","tag-ember-js","tag-javascript","tag-technology"],"_links":{"self":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts\/1600","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/comments?post=1600"}],"version-history":[{"count":1,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts\/1600\/revisions"}],"predecessor-version":[{"id":1602,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts\/1600\/revisions\/1602"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/media\/1601"}],"wp:attachment":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/media?parent=1600"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/categories?post=1600"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/tags?post=1600"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}