{"id":926,"date":"2017-09-30T21:21:03","date_gmt":"2017-09-30T21:21:03","guid":{"rendered":"http:\/\/www.andrefelizardo.com.br\/blog\/?p=926"},"modified":"2017-10-01T04:28:31","modified_gmt":"2017-10-01T04:28:31","slug":"o-que-e-ember-js","status":"publish","type":"post","link":"https:\/\/www.andrefelizardo.com.br\/blog\/o-que-e-ember-js\/","title":{"rendered":"O que \u00e9 Ember.js"},"content":{"rendered":"<p>Ember.js \u00e9 um framework Javascript (sim, mais um) para construir aplica\u00e7\u00f5es web ambiciosas. O objetivo dele \u00e9 aumentar a produtividade de desenvolvimento de aplica\u00e7\u00f5es web, mas focado no paradigma de que \u00e9 melhor gastar um pouco mais de tempo no desenvolvimento por\u00e9m facilitar a manuten\u00e7\u00e3o.<\/p>\n<p>Antes de detalhar mais o framework eu gostaria de<\/p>\n<p><!--more--><\/p>\n<p>deixar bem claro duas coisas.<\/p>\n<h3>1 &#8211; N\u00e3o existe bala de prata<\/h3>\n<p>Eu n\u00e3o sei se voc\u00ea tem acompanhado o tanto de frameworks\/bibliotecas Javascript que tem surgido nos \u00faltimos anos. Mas isso aqui n\u00e3o \u00e9 um post, pra dizer que agora voc\u00ea tem que desenvolver em Ember.js, e que Ember vai resolver todos os problemas de todas as aplica\u00e7\u00f5es web atuais. Assim como isso tamb\u00e9m n\u00e3o \u00e9 verdade nem pro <a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/o-que-e-angularjs\/\" target=\"_blank\" rel=\"noopener\">Angular 1<\/a>, nem pro <a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/angular-2-nao-continuacao-do-angular-1\/\" target=\"_blank\" rel=\"noopener\">Angular 2<\/a>, nem pro <a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/react-js-o-que-e-introducao-ao-react\/\" target=\"_blank\" rel=\"noopener\">React<\/a> ou qualquer outro framework\/biblioteca.<\/p>\n<h3>2 &#8211; Esquece a padaria do seu Z\u00e9<\/h3>\n<p>Esse monte de framework\/biblioteca Javascript foram criados com o intuito de resolver algum problema ao desenvolver grandes aplica\u00e7\u00f5es web. Eles n\u00e3o s\u00e3o pra desenvolver sites b\u00e1sicos ou sites est\u00e1ticos. Voc\u00ea pode usar se quiser, mesmo pra sites pequenos? Pode, mas \u00e9 como atirar com um canh\u00e3o em uma mosca.<\/p>\n<p>Tudo as claras, bora entender o que \u00e9 Ember e como come\u00e7amos a utiliz\u00e1-lo.<\/p>\n<ul>\n<li><a href=\"#quem-esta\">Quem est\u00e1 usando Ember.js?<\/a><\/li>\n<li><a href=\"#historia\">Hist\u00f3ria do Ember.js<\/a><\/li>\n<li><a href=\"#conceitos\">Conceitos<\/a><\/li>\n<li><a href=\"#stack\">Stack de Desenvolvimento<\/a><\/li>\n<li><a href=\"#hello-world\">Hello World &#8211; Aplica\u00e7\u00e3o Pr\u00e1tica<\/a><\/li>\n<\/ul>\n<p><a name=\"quem-esta\"><\/a><\/p>\n<h2>Quem est\u00e1 usando Ember.js?<\/h2>\n<p>Como eu quero te convencer a ler at\u00e9 o fim, eu j\u00e1 vou esfregar na sua cara agora quais s\u00e3o os projetos que usam Ember.js<\/p>\n<p>Os sites mais not\u00e1veis que usam Ember.js atualmente s\u00e3o:<\/p>\n<ul>\n<li>Discourse<\/li>\n<li>Groupon<\/li>\n<li>Vine<\/li>\n<li>Twitch.tv<\/li>\n<li><strong>LinkedIn<\/strong><\/li>\n<\/ul>\n<p>Uma ressalva aqui no LinkedIn, \u00e9 que o Web App recente do LinkedIn usa Ember e isso nos mostra at\u00e9 onde o framework pode chegar. V\u00e1rios membros do\u00a0<em>core team<\/em> do Ember s\u00e3o funcion\u00e1rios do LinkedIn.<\/p>\n<p>Apesar de ser um framework focado pra web, tamb\u00e9m temos case (um baita case) de Ember.js em aplica\u00e7\u00f5es desktop que \u00e9 o Apple Music.<br \/>\n<a name=\"historia\"><\/a><\/p>\n<h2>Hist\u00f3ria do Ember.js<\/h2>\n<p>O Ember.js foi criado em 2011, pelo <a href=\"http:\/\/yehudakatz.com\/\" target=\"_blank\" rel=\"noopener\">Yehuda Katz<\/a>\u00a0a partir do projeto SproutCore (na verdade o SproutCore 2.0 foi renomeado para Ember.js). At\u00e9 aquele momento, a maior contribui\u00e7\u00e3o que Yehuda Katz tinha dado pra comunidade de desenvolvimento de software tinha sido como participante do\u00a0<em>core team\u00a0<\/em>do Ruby on Rails.<\/p>\n<p>Portanto, Ember tem muitas similaridades com Rails.<\/p>\n<p>Por ser um framework\u00a0<em>das antigas<\/em>, durante um tempo o Ember ficou muito pra tr\u00e1s em rela\u00e7\u00e3o a outros que vinham surgindo &#8211; e eu acredito que esse seja o motivo pra o framework ser pouco utilizado no Brasil &#8211; e ent\u00e3o em agosto de 2015, saiu a vers\u00e3o 2.0, com v\u00e1rias melhorias\u00a0 principalmente no ciclo de vida dos componentes e no fluxo de dados padr\u00e3o.<\/p>\n<p>Tamb\u00e9m foi adotado um virtual DOM de forma bem similar ao React. Foi cogitado inclusive na \u00e9poca, a possibilidade do Ember usar o React pra renderizar seus componentes.<\/p>\n<p>S\u00f3 pra ficar bem claro. Se voc\u00ea conheceu o Ember, antes de 2015, ou por algum motivo usou alguma vers\u00e3o anterior a 2.0, esquece. A vers\u00e3o atual \u00e9 muito melhor, mais robusta, mais performance (mas ainda tem a melhorar), e muito mais simples do que as vers\u00f5es anteriores.<br \/>\n<a name=\"conceitos\"><\/a><\/p>\n<h2>Conceitos<\/h2>\n<p>Ember.js \u00e9 baseado no padr\u00e3o MVVM (Model-view-viewModel) que \u00e9 um padr\u00e3o focado no desenvolvimento de interfaces gr\u00e1ficas (ponto pro Ember).<\/p>\n<p>O framework adota boas pr\u00e1ticas de desenvolvimento segundo o paradigma\u00a0<em>Convention Over Configuration\u00a0<\/em>que podemos traduzir como Programa\u00e7\u00e3o Por Conven\u00e7\u00e3o ou ainda Conven\u00e7\u00e3o mais que Configura\u00e7\u00e3o. Esse paradigma tem como objetivo diminuir o n\u00famero de decis\u00f5es que temos que tomar a todo momento ao desenvolver software, mas sem perder flexibilidade.<\/p>\n<h3>Estabilidade<\/h3>\n<p>A equipe do Ember.js se esfor\u00e7a para manter o framework est\u00e1vel, mas isso n\u00e3o quer dizer que ele n\u00e3o evolua. Apenas voc\u00ea consegue ter um controle muito bom da evolu\u00e7\u00e3o do framework, e vai ser mais dif\u00edcil sua aplica\u00e7\u00e3o quebrar porque sofreu uma atualiza\u00e7\u00e3o do framework.<\/p>\n<h3>Tecnologias<\/h3>\n<p>Ember.js foi um dos primeiros frameworks a adotar Promises do Javascript, Web Components, e ES6. O Yehuda Katz tamb\u00e9m \u00e9 participante da equipe que est\u00e1 desenvolvendo as novas vers\u00f5es do Javascript (TC39), ou seja, o cara t\u00e1 por dentro, e traz a nata pro desenvolvimento do Ember.js<br \/>\n<a name=\"stack\"><\/a><\/p>\n<h2>Stack de Desenvolvimento<\/h2>\n<h3>Ember-cli<\/h3>\n<p>Caso voc\u00ea tenha usado a CLI do Angular, saiba que ela foi feita com base na do Ember. Ember-cli \u00e9 o utilit\u00e1rio de linha de comando do Ember que facilita a cria\u00e7\u00e3o de componentes Ember, utilizando as conven\u00e7\u00f5es (como testes de aceita\u00e7\u00e3o e outros) e tamb\u00e9m a instala\u00e7\u00e3o de Addons para ajudar no desenvolvimento.<\/p>\n<h3>Addons \/ Ember Observer<\/h3>\n<p>O site <a href=\"https:\/\/emberobserver.com\/\" target=\"_blank\" rel=\"noopener\">Ember Observer<\/a>\u00a0\u00e9 o reposit\u00f3rio de Addons que s\u00e3o poss\u00edveis de instalar atrav\u00e9s da ember-cli. Esses Addons ajudam no desenvolvimento, e o reposit\u00f3rio \u00e9 bem extenso. Atualmente tem mais de 4000 addons no observer.<\/p>\n<h3>Ember Data<\/h3>\n<p>N\u00e3o \u00e9 obrigat\u00f3rio desenvolver usando Ember Data, mas a maioria das aplica\u00e7\u00f5es Ember a utilizam. Ember Data \u00e9 uma biblioteca de persist\u00eancia de dados que facilita manipular objetos n\u00e3o-relacionais (ORM). \u00c9 poss\u00edvel usar RESTful JSON (s\u00f3 isso j\u00e1 bastava n\u00e9?) e JSON API, por exemplo.<a name=\"hello-world\"><\/a><\/p>\n<h2>Como come\u00e7ar a desenvolver? &#8211; Hello World<\/h2>\n<h3>Passo 1<\/h3>\n<p>Voc\u00ea tem que ter o <a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/node-js-o-que-e-entenda-agora\/\" target=\"_blank\" rel=\"noopener\">Node.js<\/a> instalado. Se quer entender sobre o <a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/node-js-o-que-e-entenda-agora\/\" target=\"_blank\" rel=\"noopener\">Node.js clica aqui<\/a>, se s\u00f3 quiser baixar a vers\u00e3o atual do Node, <a href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\" rel=\"noopener\">clica aqui<\/a>.<\/p>\n<h3>Passo 2<\/h3>\n<p>Com o Node instalado, vamos partir pra instala\u00e7\u00e3o do Ember-cli. Abra o prompt de comando, ou terminal e digite:<\/p>\n<pre>npm install -g ember-cli<\/pre>\n<p>Como voc\u00ea deve ter imaginado, n\u00f3s na verdade instalamos a ember-cli que \u00e9 uma linha de comandos que facilita &#8211; e muito &#8211; o desenvolvimento com o Ember.<\/p>\n<blockquote><p>Conselho, sempre que for criar um projeto, crie antes uma pasta, ou pelo menos coloque dentro da pasta Documents, do seu computador. Digite cd Documents e aperte\u00a0<em>Enter\u00a0<\/em>para criar seu primeiro projeto Ember dentro da pasta Documents.<\/p><\/blockquote>\n<p>Com ela instalada, vamos criar nosso primeiro projeto com o comando:<\/p>\n<pre>ember new helloWorld<\/pre>\n<p>Agora voc\u00ea vai ver que sua linha de comando est\u00e1 baixando alguns pacotes para a cria\u00e7\u00e3o de um projeto Ember.<\/p>\n<p>Similar ao Angular, Ember \u00e9 uma solu\u00e7\u00e3o pronta, ao criar um projeto Ember, voc\u00ea j\u00e1 tem tudo que \u00e9 necess\u00e1rio para o desenvolvimento de aplica\u00e7\u00f5es. Diferente de bibliotecas como React ou Vue.js que voc\u00ea precisa usar outras ferramentas junto para desenvolver uma aplica\u00e7\u00e3o realmente robusta.<\/p>\n<h3>Passo 3<\/h3>\n<p>Depois de alguns instantes &#8211; espero que sua internet esteja ok &#8211; a <em>ember-cli <\/em>baixou todas as depend\u00eancias necess\u00e1rias para o nosso projeto. Se voc\u00ea quiser ver a estrutura de diret\u00f3rios do Ember, vai na pasta onde voc\u00ea criou o projeto, vai ter uma estrutura como essa:<\/p>\n<p><a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/09\/ember-arquivos.png\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-933 lazyload\" data-src=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/09\/ember-arquivos-205x300.png\" alt=\"Pastas do Ember\" width=\"205\" height=\"300\" data-srcset=\"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/09\/ember-arquivos-205x300.png 205w, https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/09\/ember-arquivos.png 256w\" data-sizes=\"(max-width: 205px) 100vw, 205px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 205px; --smush-placeholder-aspect-ratio: 205\/300;\" \/><\/a><\/p>\n<p>A pasta app \u00e9 onde ficar\u00e3o 99% dos arquivos de desenvolvimento de uma aplica\u00e7\u00e3o.<\/p>\n<p>Ent\u00e3o agora, basta rodar o projeto, para isso, volte ao prompt de comando e digite:<\/p>\n<pre>cd helloWorld (para abrir a pasta do projeto)\r\nember server (para simular um servidor para o projeto)<\/pre>\n<p>Depois abra o <del>Chrome<\/del> seu navegador favorito, e digite a seguinte URL: http:\/\/localhost:4200<\/p>\n<p>Pronto, sua aplica\u00e7\u00e3o est\u00e1 rodando! Linda n\u00e3o?<\/p>\n<p>___________________________________________________________<\/p>\n<p>Se voc\u00ea consegue ler em ingl\u00eas e quer come\u00e7ar a se aprofundar mais no Ember.js, d\u00e1 uma olhada na <a href=\"https:\/\/guides.emberjs.com\/v2.15.0\/tutorial\/ember-cli\/\" target=\"_blank\" rel=\"noopener\">documenta\u00e7\u00e3o oficial<\/a>, tem um tutorial bem legal l\u00e1.<\/p>\n<p>Qualquer d\u00favida, deixa aqui embaixo, e fica de olho que vai ter mais conte\u00fado sobre o Ember.js logo logo!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ember.js \u00e9 um framework Javascript (sim, mais um) para construir aplica\u00e7\u00f5es web ambiciosas. O objetivo dele \u00e9 aumentar a produtividade de desenvolvimento de aplica\u00e7\u00f5es web, mas focado no paradigma de que \u00e9 melhor gastar um pouco mais de tempo no desenvolvimento por\u00e9m facilitar a manuten\u00e7\u00e3o. Antes de detalhar mais o framework eu gostaria de<\/p>\n","protected":false},"author":1,"featured_media":927,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[117,130],"tags":[119,96,133,131,52,114,132,118,116,134,59],"class_list":["post-926","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev","category-ember","tag-angular","tag-angularjs","tag-apple","tag-ember-js","tag-front-end","tag-frontend","tag-linkedin","tag-node-js","tag-react","tag-vue-js","tag-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>O que \u00e9 Ember.js - Blog do Andr\u00e9 Felizardo<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/www.andrefelizardo.com.br\/blog\/o-que-e-ember-js\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"O que \u00e9 Ember.js - Blog do Andr\u00e9 Felizardo\" \/>\n<meta property=\"og:description\" content=\"Ember.js \u00e9 um framework Javascript (sim, mais um) para construir aplica\u00e7\u00f5es web ambiciosas. O objetivo dele \u00e9 aumentar a produtividade de desenvolvimento de aplica\u00e7\u00f5es web, mas focado no paradigma de que \u00e9 melhor gastar um pouco mais de tempo no desenvolvimento por\u00e9m facilitar a manuten\u00e7\u00e3o. Antes de detalhar mais o framework eu gostaria de\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.andrefelizardo.com.br\/blog\/o-que-e-ember-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog do Andr\u00e9 Felizardo\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-30T21:21:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-10-01T04:28:31+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/09\/ember.js.png\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"393\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Andr\u00e9 Felizardo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andr\u00e9 Felizardo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/o-que-e-ember-js\\\/#article\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/o-que-e-ember-js\\\/\"},\"author\":{\"name\":\"Andr\u00e9 Felizardo\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\"},\"headline\":\"O que \u00e9 Ember.js\",\"datePublished\":\"2017-09-30T21:21:03+00:00\",\"dateModified\":\"2017-10-01T04:28:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/o-que-e-ember-js\\\/\"},\"wordCount\":1273,\"commentCount\":5,\"image\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/o-que-e-ember-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/09\\\/ember.js.png\",\"keywords\":[\"angular\",\"angularjs\",\"apple\",\"ember.js\",\"front-end\",\"frontend\",\"linkedin\",\"node.js\",\"react\",\"vue.js\",\"web\"],\"articleSection\":[\"Dev\",\"Ember\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/o-que-e-ember-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/o-que-e-ember-js\\\/\",\"url\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/o-que-e-ember-js\\\/\",\"name\":\"O que \u00e9 Ember.js - Blog do Andr\u00e9 Felizardo\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/o-que-e-ember-js\\\/#primaryimage\"},\"image\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/o-que-e-ember-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/09\\\/ember.js.png\",\"datePublished\":\"2017-09-30T21:21:03+00:00\",\"dateModified\":\"2017-10-01T04:28:31+00:00\",\"author\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\"},\"breadcrumb\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/o-que-e-ember-js\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/o-que-e-ember-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/o-que-e-ember-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/09\\\/ember.js.png\",\"contentUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/09\\\/ember.js.png\",\"width\":750,\"height\":393,\"caption\":\"Logo Ember.js\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/o-que-e-ember-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"O que \u00e9 Ember.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#website\",\"url\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/\",\"name\":\"Blog do Andr\u00e9 Felizardo\",\"description\":\"Programa\u00e7\u00e3o de dev para dev\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\",\"name\":\"Andr\u00e9 Felizardo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"url\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"contentUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"caption\":\"Andr\u00e9 Felizardo\"},\"sameAs\":[\"http:\\\/\\\/www.andrefelizardo.com.br\"],\"url\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/author\\\/andrefelizardo\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"O que \u00e9 Ember.js - Blog do Andr\u00e9 Felizardo","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":"http:\/\/www.andrefelizardo.com.br\/blog\/o-que-e-ember-js\/","og_locale":"pt_BR","og_type":"article","og_title":"O que \u00e9 Ember.js - Blog do Andr\u00e9 Felizardo","og_description":"Ember.js \u00e9 um framework Javascript (sim, mais um) para construir aplica\u00e7\u00f5es web ambiciosas. O objetivo dele \u00e9 aumentar a produtividade de desenvolvimento de aplica\u00e7\u00f5es web, mas focado no paradigma de que \u00e9 melhor gastar um pouco mais de tempo no desenvolvimento por\u00e9m facilitar a manuten\u00e7\u00e3o. Antes de detalhar mais o framework eu gostaria de","og_url":"http:\/\/www.andrefelizardo.com.br\/blog\/o-que-e-ember-js\/","og_site_name":"Blog do Andr\u00e9 Felizardo","article_published_time":"2017-09-30T21:21:03+00:00","article_modified_time":"2017-10-01T04:28:31+00:00","og_image":[{"width":750,"height":393,"url":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/09\/ember.js.png","type":"image\/png"}],"author":"Andr\u00e9 Felizardo","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Andr\u00e9 Felizardo","Est. tempo de leitura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/o-que-e-ember-js\/#article","isPartOf":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/o-que-e-ember-js\/"},"author":{"name":"Andr\u00e9 Felizardo","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b"},"headline":"O que \u00e9 Ember.js","datePublished":"2017-09-30T21:21:03+00:00","dateModified":"2017-10-01T04:28:31+00:00","mainEntityOfPage":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/o-que-e-ember-js\/"},"wordCount":1273,"commentCount":5,"image":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/o-que-e-ember-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/09\/ember.js.png","keywords":["angular","angularjs","apple","ember.js","front-end","frontend","linkedin","node.js","react","vue.js","web"],"articleSection":["Dev","Ember"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/www.andrefelizardo.com.br\/blog\/o-que-e-ember-js\/#respond"]}]},{"@type":"WebPage","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/o-que-e-ember-js\/","url":"http:\/\/www.andrefelizardo.com.br\/blog\/o-que-e-ember-js\/","name":"O que \u00e9 Ember.js - Blog do Andr\u00e9 Felizardo","isPartOf":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/o-que-e-ember-js\/#primaryimage"},"image":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/o-que-e-ember-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/09\/ember.js.png","datePublished":"2017-09-30T21:21:03+00:00","dateModified":"2017-10-01T04:28:31+00:00","author":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b"},"breadcrumb":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/o-que-e-ember-js\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.andrefelizardo.com.br\/blog\/o-que-e-ember-js\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/o-que-e-ember-js\/#primaryimage","url":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/09\/ember.js.png","contentUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/09\/ember.js.png","width":750,"height":393,"caption":"Logo Ember.js"},{"@type":"BreadcrumbList","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/o-que-e-ember-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"http:\/\/www.andrefelizardo.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"O que \u00e9 Ember.js"}]},{"@type":"WebSite","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#website","url":"http:\/\/www.andrefelizardo.com.br\/blog\/","name":"Blog do Andr\u00e9 Felizardo","description":"Programa\u00e7\u00e3o de dev para dev","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.andrefelizardo.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b","name":"Andr\u00e9 Felizardo","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","url":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","contentUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","caption":"Andr\u00e9 Felizardo"},"sameAs":["http:\/\/www.andrefelizardo.com.br"],"url":"https:\/\/www.andrefelizardo.com.br\/blog\/author\/andrefelizardo\/"}]}},"jetpack_featured_media_url":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/09\/ember.js.png","jetpack_shortlink":"https:\/\/wp.me\/p6EP66-eW","jetpack-related-posts":[{"id":963,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/o-que-e-vue-js\/","url_meta":{"origin":926,"position":0},"title":"O que \u00e9 Vue.js","author":"Andr\u00e9 Felizardo","date":"10 de janeiro de 2018","format":false,"excerpt":"Vue.js \u00e9 uma biblioteca\u00a0JavaScript\u00a0acess\u00edvel, vers\u00e1til e perform\u00e1tica. E apesar do site oficial dizer que Vue.js \u00e9 um framework JavaScript Progressivo, eu j\u00e1 vou come\u00e7ar discordando :) Entendemos por framework, aquela solu\u00e7\u00e3o 'fechada' quando voc\u00ea j\u00e1 tem definido por exemplo a estrutura de diret\u00f3rios, ou a forma como voc\u00ea faz uma\u2026","rel":"","context":"Em &quot;Dev&quot;","block_context":{"text":"Dev","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/dev\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/01\/vuejs.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/01\/vuejs.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/01\/vuejs.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/01\/vuejs.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":799,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/angular-2-nao-continuacao-do-angular-1\/","url_meta":{"origin":926,"position":1},"title":"Angular 2 &#8211; A n\u00e3o continua\u00e7\u00e3o do Angular 1","author":"Andr\u00e9 Felizardo","date":"15 de janeiro de 2017","format":false,"excerpt":"T\u00e1 estudando Angular 2? N\u00e3o? Fica ligado que a gente j\u00e1 est\u00e1 no Angular 4 beta 3! Angular 2 foi oficialmente lan\u00e7ado em setembro de 2016. Mas tamb\u00e9m n\u00e3o precisa ficar t\u00e3o preocupado. De qualquer forma vamos colocar os pingos nos is\u00a0pra voc\u00ea entender de uma vez por toda o\u2026","rel":"","context":"Em &quot;Dev&quot;","block_context":{"text":"Dev","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/dev\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/01\/angular2.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/01\/angular2.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/01\/angular2.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/01\/angular2.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":1100,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/tipos-de-frontend\/","url_meta":{"origin":926,"position":2},"title":"Tipos de Frontend","author":"Andr\u00e9 Felizardo","date":"4 de mar\u00e7o de 2020","format":false,"excerpt":"A alguns anos atr\u00e1s escrevi um texto sobre o que \u00e9 o frontend, tamb\u00e9m palestrei sobre o que \u00e9 frontend, a carreira do frontend e os tipos de frontend que existem. Como minha vis\u00e3o sobre o assunto mudou bastante, resolvi revisitar esses materiais e escrever um parecer atualizado sobre os\u2026","rel":"","context":"Em &quot;Dev&quot;","block_context":{"text":"Dev","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/dev\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":438,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/o-que-e-angularjs\/","url_meta":{"origin":926,"position":3},"title":"O que \u00e9 AngularJS","author":"Andr\u00e9 Felizardo","date":"14 de dezembro de 2015","format":false,"excerpt":"AngularJS \u00e9 um framework para o desenvolvimento de aplica\u00e7\u00f5es web, utilizando a o JavaScript.\u00a0Seu objetivo \u00e9 aumentar aplicativos que podem ser acessados por um navegador web, sob o padr\u00e3o model\u2013view\u2013controller (MVC), em um esfor\u00e7o para facilitar tanto o desenvolvimento quanto o teste dos aplicativos. O que \u00e9 AngularJS? Hist\u00f3ria do\u2026","rel":"","context":"Em &quot;Dicas&quot;","block_context":{"text":"Dicas","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/dicas\/"},"img":{"alt_text":"AngularJS","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/12\/angularjs.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/12\/angularjs.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/12\/angularjs.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/12\/angularjs.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/12\/angularjs.jpg?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/12\/angularjs.jpg?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":809,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/ionic-2-versao-final\/","url_meta":{"origin":926,"position":4},"title":"Ionic 2 &#8211; Vers\u00e3o Final","author":"Andr\u00e9 Felizardo","date":"26 de janeiro de 2017","format":false,"excerpt":"Vou repetir as palavras do Max: Hoje, eu estou incrivelmente animado\u00a0para anunciar o\u00a0Ionic 2. Depois de algumas releases candidates, hoje (25-01-17) foi anunciada a vers\u00e3o final do Ionic 2. Com o lan\u00e7amento da vers\u00e3o final do Angular 2\u00a0eu realmente estava ansioso por uma vers\u00e3o final do Ionic 2. Quando foi\u2026","rel":"","context":"Em &quot;Aplicativos&quot;","block_context":{"text":"Aplicativos","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/aplicativos\/"},"img":{"alt_text":"Ionic 2","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/01\/ionic-2.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/01\/ionic-2.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/01\/ionic-2.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/01\/ionic-2.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":706,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/react-js-o-que-e-introducao-ao-react\/","url_meta":{"origin":926,"position":5},"title":"React.js, o que \u00e9? &#8211; Introdu\u00e7\u00e3o ao React","author":"Andr\u00e9 Felizardo","date":"18 de outubro de 2016","format":false,"excerpt":"Se voc\u00ea tem acompanhado o mundo do Front-end nos \u00faltimos anos, com certeza voc\u00ea percebeu um boom em Frameworks e bibliotecas Javascript, como o AngularJS, React.js e v\u00e1rios outros. O que \u00e9 o React.js? React.js \u00e9 uma biblioteca JavaScript, desenvolvida por engenheiros\u00a0do Facebook (s\u00f3 de colocar o nome do Facebook\u2026","rel":"","context":"Em &quot;Curiosidades&quot;","block_context":{"text":"Curiosidades","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/curiosidades\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/10\/react.js.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/10\/react.js.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/10\/react.js.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/10\/react.js.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/10\/react.js.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/10\/react.js.png?resize=1400%2C800&ssl=1 4x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts\/926","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/comments?post=926"}],"version-history":[{"count":0,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts\/926\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/media\/927"}],"wp:attachment":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/media?parent=926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/categories?post=926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/tags?post=926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}