{"action":"created","comment":{"url":"https://api.github.com/repos/elo7/tech-blog/pulls/comments/96272838","pull_request_review_id":16850428,"id":96272838,"diff_hunk":"@@ -0,0 +1,73 @@\n+---\n+title: Javascript Isomórfico - parte 2\n+date: 2017-01-02\n+category: front-end\n+layout: post\n+description: Continuando com a série de posts sobre javascript isomórfico, agora falando um pouco mais sobre frameworks e onde usar.\n+author: fernandabernardo\n+tags:\n+  - javascript\n+  - isomorfico\n+---\n+\n+Continuando o post sobre [Javascript isomórfico](./isomorfismo), depois de explicar toda a história e o conceito de isomorfismo, vamos entrar em uma parte mais prática. Quais empresas usam, o resultado da implementação e quais alguns frameworks existentes no mercado serão alguns dos tópicos desse post.\n+\n+# Quem usa?\n+Algumas empresas como a própria [Elo7](http://www.elo7.com.br/), [Airbnb](https://www.airbnb.com.br/), [Facebook](https://www.facebook.com/), [PayPal](https://www.paypal.com/br/), [Walmart](https://www.walmart.com.br/), [Netflix](https://www.netflix.com/br/), [Autodesk](http://www.autodesk.com.br/), entre outras.\n+\n+# Como tudo começou?\n+Em 2011, Charlie Robbins da Nodejitsu escreveu esse [post](https://blog.nodejitsu.com/scaling-isomorphic-javascript-code/) apresentando a arquitetura isomórfica. Porém, teve uma adoção bem lenta, além de ter várias discussões a respeito do nome *isomórfico*.\n+\n+Recomendo a leitura desses outros dois posts contando sobre a implementação da arquitetura isomórfica no [Airbnb](http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/) e na [Netflix](http://techblog.netflix.com/2015/08/making-netflixcom-faster.html). O Airbnb reconstruiu todo seu site mobile web para melhorar o tempo de carregamento da página e melhorar a usabilidade para o usuário. Com isso, lançaram sua própria biblioteca isomórfica, o [Rendr](http://rendrjs.github.io/) (falarei dele mais para frente). Já o Netflix, trocou sua estrutura feita em Java, Struts e Tiles, e Javascript(com Jquery), no front, por uma estrutura só com React. Isso rendeu uma melhora de 70% no TTI (*Time to Interact*).\n+\n+No Elo7, nós temos um servidor de componentes. Ele funciona da seguinte forma: quando um usuário entra em uma página, é feita uma requisição ao marketplace, que faz uma outra requisição para o servidor de componentes, que retorna o JSON para o marketplace, que, por sua vez, retorna a página em HTML ao cliente. Na segunda requisição, ela se divide, fazendo uma requisição ao marketplace para pegar o JSON e outra para o servidor de componentes para conseguir um template do componente. Com isso, o cliente tem o JSON e o template e consegue assim fazer a renderização da página. Com isso, temos nossa arquitetura isomórfica, que utilizamos o [Dust.js](http://www.dustjs.com/) como engine de templates.\n+\n+# Fatos sobre isomorfismo\n+Falar sobre prós e contras é um pouco complicado, já que depende muito do objetivo da aplicação. Logo, vou falar sobre fatos que o uso do isomorfismo pode trazer que percebi ao longo do meu estudo e o que vários posts sobre o assunto comentavam:\n+* Menos duplicação de código, mais fácil de dar manutenção\n+* Menos tempo gasto para escrever código no servidor e no cliente.\n+* Cuidado para levar em conta onde o código será executado\n+* Primeiro request é rápido e os outros ainda mais.\n+* Mais simples de funcionar sem JS, servidor consegue retornar o HTML.\n+* Debug é mais complicado, já que temos um código que funciona no cliente e no servidor\n+* Evitar expor dados sensíveis. Não podemos expor dados que colocaríamos apenas no back end, como chaves por exemplo. Esse código ainda não pode ser exposto.\n+* Os frameworks mudam muito rápido e quebram rápido também\n+* Se sua página não tiver muita atualização dinâmica, você irá implementar muito código para pouco benefício\n+\n+# Frameworks e Bibliotecas\n+Vou colocar aqui os links dos frameworks e bibliotecas mais conhecidas e vou entrar em detalhes de apenas algumas. Segue a lista:\n+* [Meteor](https://www.meteor.com/)\n+* [Rendr](http://rendrjs.github.io/)\n+* [Catberry](http://catberry.org/)\n+* [Ezel](http://ezeljs.com/)\n+* [React](https://facebook.github.io/react/)\n+* [Dust.js](http://www.dustjs.com/)\n+* [Derby](http://derbyjs.com/)\n+* [Taunus](https://github.com/taunus/taunus)\n+* [Lazojs](https://github.com/lazojs/lazo)\n+* [Mithril](http://mithril.js.org/)\n+* entre muitos outros ...\n+\n+# Mojito\n+Não coloquei o [Mojito](https://github.com/yahoo/mojito) na lista acima, pelo fato de estar com o build quebrado a última versão e o último *commit* ser de 2014. Mas acredito que vale a pena falar dele, já que foi a primeira biblioteca isomórfica open source, desenvolvida em abril de 2012, pelo Yahoo. \n+\n+# Meteor\n+O Meteor já tem um conceito um pouco diferente dos outros que falarei aqui. Ele é uma plataforma open source usada para desenvolver aplicações web e mobile. Ele é fullstack, ou seja, apresenta soluções desde o back end (como banco de dados, por exemplo) até o front end. Listarei algumas características que percebi ao usá-lo para desenvolver uma aplicação básica, que pode ser encontrada no [repositório](https://github.com/FernandaBernardo/meteor-simple-todos).\n+* O desenvolvimento é real time. Ou seja, em qualquer mudança no banco de dados ou em qualquer arquivo, os componentes são atualizados em real time.\n+* A parte de configurações, é bem simples. Não são necessárias as configurações de dependências (como o Gulp). Além disso, já vem com algumas bibliotecas funcionando, como [EcmaScript6](http://es6-features.org/) e [MongoDB](https://www.mongodb.com/).","path":"src/posts/isomorfismo-parte-2.html.md","position":57,"original_position":57,"commit_id":"6183ae17a96535d63c693ffeab5b9255a3d7fafc","original_commit_id":"6183ae17a96535d63c693ffeab5b9255a3d7fafc","user":{"login":"FernandaBernardo","id":3588700,"avatar_url":"https://avatars.githubusercontent.com/u/3588700?v=3","gravatar_id":"","url":"https://api.github.com/users/FernandaBernardo","html_url":"https://github.com/FernandaBernardo","followers_url":"https://api.github.com/users/FernandaBernardo/followers","following_url":"https://api.github.com/users/FernandaBernardo/following{/other_user}","gists_url":"https://api.github.com/users/FernandaBernardo/gists{/gist_id}","starred_url":"https://api.github.com/users/FernandaBernardo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/FernandaBernardo/subscriptions","organizations_url":"https://api.github.com/users/FernandaBernardo/orgs","repos_url":"https://api.github.com/users/FernandaBernardo/repos","events_url":"https://api.github.com/users/FernandaBernardo/events{/privacy}","received_events_url":"https://api.github.com/users/FernandaBernardo/received_events","type":"User","site_admin":false},"body":"done","created_at":"2017-01-16T17:11:58Z","updated_at":"2017-01-16T17:11:58Z","html_url":"https://github.com/elo7/tech-blog/pull/50#discussion_r96272838","pull_request_url":"https://api.github.com/repos/elo7/tech-blog/pulls/50","_links":{"self":{"href":"https://api.github.com/repos/elo7/tech-blog/pulls/comments/96272838"},"html":{"href":"https://github.com/elo7/tech-blog/pull/50#discussion_r96272838"},"pull_request":{"href":"https://api.github.com/repos/elo7/tech-blog/pulls/50"}}},"pull_request":{"url":"https://api.github.com/repos/elo7/tech-blog/pulls/50","id":99828395,"html_url":"https://github.com/elo7/tech-blog/pull/50","diff_url":"https://github.com/elo7/tech-blog/pull/50.diff","patch_url":"https://github.com/elo7/tech-blog/pull/50.patch","issue_url":"https://api.github.com/repos/elo7/tech-blog/issues/50","number":50,"state":"open","locked":false,"title":"[POST] Isomorfismo - parte 2","user":{"login":"FernandaBernardo","id":3588700,"avatar_url":"https://avatars.githubusercontent.com/u/3588700?v=3","gravatar_id":"","url":"https://api.github.com/users/FernandaBernardo","html_url":"https://github.com/FernandaBernardo","followers_url":"https://api.github.com/users/FernandaBernardo/followers","following_url":"https://api.github.com/users/FernandaBernardo/following{/other_user}","gists_url":"https://api.github.com/users/FernandaBernardo/gists{/gist_id}","starred_url":"https://api.github.com/users/FernandaBernardo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/FernandaBernardo/subscriptions","organizations_url":"https://api.github.com/users/FernandaBernardo/orgs","repos_url":"https://api.github.com/users/FernandaBernardo/repos","events_url":"https://api.github.com/users/FernandaBernardo/events{/privacy}","received_events_url":"https://api.github.com/users/FernandaBernardo/received_events","type":"User","site_admin":false},"body":"✋  @luiz\r\n@fernandabernardo","created_at":"2017-01-01T18:43:50Z","updated_at":"2017-01-16T17:11:58Z","closed_at":null,"merged_at":null,"merge_commit_sha":"28dc66eccd7f1019e68ba5c89d07f563a1ca3ae8","assignee":{"login":"FernandaBernardo","id":3588700,"avatar_url":"https://avatars.githubusercontent.com/u/3588700?v=3","gravatar_id":"","url":"https://api.github.com/users/FernandaBernardo","html_url":"https://github.com/FernandaBernardo","followers_url":"https://api.github.com/users/FernandaBernardo/followers","following_url":"https://api.github.com/users/FernandaBernardo/following{/other_user}","gists_url":"https://api.github.com/users/FernandaBernardo/gists{/gist_id}","starred_url":"https://api.github.com/users/FernandaBernardo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/FernandaBernardo/subscriptions","organizations_url":"https://api.github.com/users/FernandaBernardo/orgs","repos_url":"https://api.github.com/users/FernandaBernardo/repos","events_url":"https://api.github.com/users/FernandaBernardo/events{/privacy}","received_events_url":"https://api.github.com/users/FernandaBernardo/received_events","type":"User","site_admin":false},"assignees":[{"login":"FernandaBernardo","id":3588700,"avatar_url":"https://avatars.githubusercontent.com/u/3588700?v=3","gravatar_id":"","url":"https://api.github.com/users/FernandaBernardo","html_url":"https://github.com/FernandaBernardo","followers_url":"https://api.github.com/users/FernandaBernardo/followers","following_url":"https://api.github.com/users/FernandaBernardo/following{/other_user}","gists_url":"https://api.github.com/users/FernandaBernardo/gists{/gist_id}","starred_url":"https://api.github.com/users/FernandaBernardo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/FernandaBernardo/subscriptions","organizations_url":"https://api.github.com/users/FernandaBernardo/orgs","repos_url":"https://api.github.com/users/FernandaBernardo/repos","events_url":"https://api.github.com/users/FernandaBernardo/events{/privacy}","received_events_url":"https://api.github.com/users/FernandaBernardo/received_events","type":"User","site_admin":false}],"milestone":null,"commits_url":"https://api.github.com/repos/elo7/tech-blog/pulls/50/commits","review_comments_url":"https://api.github.com/repos/elo7/tech-blog/pulls/50/comments","review_comment_url":"https://api.github.com/repos/elo7/tech-blog/pulls/comments{/number}","comments_url":"https://api.github.com/repos/elo7/tech-blog/issues/50/comments","statuses_url":"https://api.github.com/repos/elo7/tech-blog/statuses/6183ae17a96535d63c693ffeab5b9255a3d7fafc","head":{"label":"elo7:isomorfismo-2","ref":"isomorfismo-2","sha":"6183ae17a96535d63c693ffeab5b9255a3d7fafc","user":{"login":"elo7","id":1469534,"avatar_url":"https://avatars.githubusercontent.com/u/1469534?v=3","gravatar_id":"","url":"https://api.github.com/users/elo7","html_url":"https://github.com/elo7","followers_url":"https://api.github.com/users/elo7/followers","following_url":"https://api.github.com/users/elo7/following{/other_user}","gists_url":"https://api.github.com/users/elo7/gists{/gist_id}","starred_url":"https://api.github.com/users/elo7/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/elo7/subscriptions","organizations_url":"https://api.github.com/users/elo7/orgs","repos_url":"https://api.github.com/users/elo7/repos","events_url":"https://api.github.com/users/elo7/events{/privacy}","received_events_url":"https://api.github.com/users/elo7/received_events","type":"Organization","site_admin":false},"repo":{"id":61552932,"name":"tech-blog","full_name":"elo7/tech-blog","owner":{"login":"elo7","id":1469534,"avatar_url":"https://avatars.githubusercontent.com/u/1469534?v=3","gravatar_id":"","url":"https://api.github.com/users/elo7","html_url":"https://github.com/elo7","followers_url":"https://api.github.com/users/elo7/followers","following_url":"https://api.github.com/users/elo7/following{/other_user}","gists_url":"https://api.github.com/users/elo7/gists{/gist_id}","starred_url":"https://api.github.com/users/elo7/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/elo7/subscriptions","organizations_url":"https://api.github.com/users/elo7/orgs","repos_url":"https://api.github.com/users/elo7/repos","events_url":"https://api.github.com/users/elo7/events{/privacy}","received_events_url":"https://api.github.com/users/elo7/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/elo7/tech-blog","description":"Blog técnico do Elo7","fork":false,"url":"https://api.github.com/repos/elo7/tech-blog","forks_url":"https://api.github.com/repos/elo7/tech-blog/forks","keys_url":"https://api.github.com/repos/elo7/tech-blog/keys{/key_id}","collaborators_url":"https://api.github.com/repos/elo7/tech-blog/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/elo7/tech-blog/teams","hooks_url":"https://api.github.com/repos/elo7/tech-blog/hooks","issue_events_url":"https://api.github.com/repos/elo7/tech-blog/issues/events{/number}","events_url":"https://api.github.com/repos/elo7/tech-blog/events","assignees_url":"https://api.github.com/repos/elo7/tech-blog/assignees{/user}","branches_url":"https://api.github.com/repos/elo7/tech-blog/branches{/branch}","tags_url":"https://api.github.com/repos/elo7/tech-blog/tags","blobs_url":"https://api.github.com/repos/elo7/tech-blog/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/elo7/tech-blog/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/elo7/tech-blog/git/refs{/sha}","trees_url":"https://api.github.com/repos/elo7/tech-blog/git/trees{/sha}","statuses_url":"https://api.github.com/repos/elo7/tech-blog/statuses/{sha}","languages_url":"https://api.github.com/repos/elo7/tech-blog/languages","stargazers_url":"https://api.github.com/repos/elo7/tech-blog/stargazers","contributors_url":"https://api.github.com/repos/elo7/tech-blog/contributors","subscribers_url":"https://api.github.com/repos/elo7/tech-blog/subscribers","subscription_url":"https://api.github.com/repos/elo7/tech-blog/subscription","commits_url":"https://api.github.com/repos/elo7/tech-blog/commits{/sha}","git_commits_url":"https://api.github.com/repos/elo7/tech-blog/git/commits{/sha}","comments_url":"https://api.github.com/repos/elo7/tech-blog/comments{/number}","issue_comment_url":"https://api.github.com/repos/elo7/tech-blog/issues/comments{/number}","contents_url":"https://api.github.com/repos/elo7/tech-blog/contents/{+path}","compare_url":"https://api.github.com/repos/elo7/tech-blog/compare/{base}...{head}","merges_url":"https://api.github.com/repos/elo7/tech-blog/merges","archive_url":"https://api.github.com/repos/elo7/tech-blog/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/elo7/tech-blog/downloads","issues_url":"https://api.github.com/repos/elo7/tech-blog/issues{/number}","pulls_url":"https://api.github.com/repos/elo7/tech-blog/pulls{/number}","milestones_url":"https://api.github.com/repos/elo7/tech-blog/milestones{/number}","notifications_url":"https://api.github.com/repos/elo7/tech-blog/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/elo7/tech-blog/labels{/name}","releases_url":"https://api.github.com/repos/elo7/tech-blog/releases{/id}","deployments_url":"https://api.github.com/repos/elo7/tech-blog/deployments","created_at":"2016-06-20T14:14:12Z","updated_at":"2016-11-17T11:44:24Z","pushed_at":"2017-01-16T16:39:37Z","git_url":"git://github.com/elo7/tech-blog.git","ssh_url":"git@github.com:elo7/tech-blog.git","clone_url":"https://github.com/elo7/tech-blog.git","svn_url":"https://github.com/elo7/tech-blog","homepage":null,"size":5643,"stargazers_count":2,"watchers_count":2,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":0,"mirror_url":null,"open_issues_count":25,"forks":0,"open_issues":25,"watchers":2,"default_branch":"master"}},"base":{"label":"elo7:master","ref":"master","sha":"f28048bcff4282bc1156a9e2577dc22c35a3775e","user":{"login":"elo7","id":1469534,"avatar_url":"https://avatars.githubusercontent.com/u/1469534?v=3","gravatar_id":"","url":"https://api.github.com/users/elo7","html_url":"https://github.com/elo7","followers_url":"https://api.github.com/users/elo7/followers","following_url":"https://api.github.com/users/elo7/following{/other_user}","gists_url":"https://api.github.com/users/elo7/gists{/gist_id}","starred_url":"https://api.github.com/users/elo7/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/elo7/subscriptions","organizations_url":"https://api.github.com/users/elo7/orgs","repos_url":"https://api.github.com/users/elo7/repos","events_url":"https://api.github.com/users/elo7/events{/privacy}","received_events_url":"https://api.github.com/users/elo7/received_events","type":"Organization","site_admin":false},"repo":{"id":61552932,"name":"tech-blog","full_name":"elo7/tech-blog","owner":{"login":"elo7","id":1469534,"avatar_url":"https://avatars.githubusercontent.com/u/1469534?v=3","gravatar_id":"","url":"https://api.github.com/users/elo7","html_url":"https://github.com/elo7","followers_url":"https://api.github.com/users/elo7/followers","following_url":"https://api.github.com/users/elo7/following{/other_user}","gists_url":"https://api.github.com/users/elo7/gists{/gist_id}","starred_url":"https://api.github.com/users/elo7/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/elo7/subscriptions","organizations_url":"https://api.github.com/users/elo7/orgs","repos_url":"https://api.github.com/users/elo7/repos","events_url":"https://api.github.com/users/elo7/events{/privacy}","received_events_url":"https://api.github.com/users/elo7/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/elo7/tech-blog","description":"Blog técnico do Elo7","fork":false,"url":"https://api.github.com/repos/elo7/tech-blog","forks_url":"https://api.github.com/repos/elo7/tech-blog/forks","keys_url":"https://api.github.com/repos/elo7/tech-blog/keys{/key_id}","collaborators_url":"https://api.github.com/repos/elo7/tech-blog/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/elo7/tech-blog/teams","hooks_url":"https://api.github.com/repos/elo7/tech-blog/hooks","issue_events_url":"https://api.github.com/repos/elo7/tech-blog/issues/events{/number}","events_url":"https://api.github.com/repos/elo7/tech-blog/events","assignees_url":"https://api.github.com/repos/elo7/tech-blog/assignees{/user}","branches_url":"https://api.github.com/repos/elo7/tech-blog/branches{/branch}","tags_url":"https://api.github.com/repos/elo7/tech-blog/tags","blobs_url":"https://api.github.com/repos/elo7/tech-blog/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/elo7/tech-blog/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/elo7/tech-blog/git/refs{/sha}","trees_url":"https://api.github.com/repos/elo7/tech-blog/git/trees{/sha}","statuses_url":"https://api.github.com/repos/elo7/tech-blog/statuses/{sha}","languages_url":"https://api.github.com/repos/elo7/tech-blog/languages","stargazers_url":"https://api.github.com/repos/elo7/tech-blog/stargazers","contributors_url":"https://api.github.com/repos/elo7/tech-blog/contributors","subscribers_url":"https://api.github.com/repos/elo7/tech-blog/subscribers","subscription_url":"https://api.github.com/repos/elo7/tech-blog/subscription","commits_url":"https://api.github.com/repos/elo7/tech-blog/commits{/sha}","git_commits_url":"https://api.github.com/repos/elo7/tech-blog/git/commits{/sha}","comments_url":"https://api.github.com/repos/elo7/tech-blog/comments{/number}","issue_comment_url":"https://api.github.com/repos/elo7/tech-blog/issues/comments{/number}","contents_url":"https://api.github.com/repos/elo7/tech-blog/contents/{+path}","compare_url":"https://api.github.com/repos/elo7/tech-blog/compare/{base}...{head}","merges_url":"https://api.github.com/repos/elo7/tech-blog/merges","archive_url":"https://api.github.com/repos/elo7/tech-blog/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/elo7/tech-blog/downloads","issues_url":"https://api.github.com/repos/elo7/tech-blog/issues{/number}","pulls_url":"https://api.github.com/repos/elo7/tech-blog/pulls{/number}","milestones_url":"https://api.github.com/repos/elo7/tech-blog/milestones{/number}","notifications_url":"https://api.github.com/repos/elo7/tech-blog/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/elo7/tech-blog/labels{/name}","releases_url":"https://api.github.com/repos/elo7/tech-blog/releases{/id}","deployments_url":"https://api.github.com/repos/elo7/tech-blog/deployments","created_at":"2016-06-20T14:14:12Z","updated_at":"2016-11-17T11:44:24Z","pushed_at":"2017-01-16T16:39:37Z","git_url":"git://github.com/elo7/tech-blog.git","ssh_url":"git@github.com:elo7/tech-blog.git","clone_url":"https://github.com/elo7/tech-blog.git","svn_url":"https://github.com/elo7/tech-blog","homepage":null,"size":5643,"stargazers_count":2,"watchers_count":2,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":0,"mirror_url":null,"open_issues_count":25,"forks":0,"open_issues":25,"watchers":2,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/elo7/tech-blog/pulls/50"},"html":{"href":"https://github.com/elo7/tech-blog/pull/50"},"issue":{"href":"https://api.github.com/repos/elo7/tech-blog/issues/50"},"comments":{"href":"https://api.github.com/repos/elo7/tech-blog/issues/50/comments"},"review_comments":{"href":"https://api.github.com/repos/elo7/tech-blog/pulls/50/comments"},"review_comment":{"href":"https://api.github.com/repos/elo7/tech-blog/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/elo7/tech-blog/pulls/50/commits"},"statuses":{"href":"https://api.github.com/repos/elo7/tech-blog/statuses/6183ae17a96535d63c693ffeab5b9255a3d7fafc"}}}}
{"actor":{"display_login":"FernandaBernardo"}}