Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Ecossistema Front-End

Avatar for Thiago Alves Luiz Thiago Alves Luiz
May 20, 2016
Programming
87
0

Ecossistema Front-End

Avatar for Thiago Alves Luiz

Thiago Alves Luiz

May 20, 2016

More Decks by Thiago Alves Luiz

See All by Thiago Alves Luiz
Muito prazer! Mercado de Trabalho de TI
Avatar for Thiago Alves Luiz devthiago
0
160
How to enjoy WebVR right now
Avatar for Thiago Alves Luiz devthiago
0
78
Inside the Web
Avatar for Thiago Alves Luiz devthiago
1
70
Cenário atual do Front-End do ponto de vista de um desenvolvedor
Avatar for Thiago Alves Luiz devthiago
0
160
Johnny Five for noobs
Avatar for Thiago Alves Luiz devthiago
0
130
React Behind The Scenes
Avatar for Thiago Alves Luiz devthiago
1
160
Testando o seu CSS
Avatar for Thiago Alves Luiz devthiago
0
150
Repense, Recrie... React
Avatar for Thiago Alves Luiz devthiago
0
82
O ecossistema Front-End
Avatar for Thiago Alves Luiz devthiago
0
200

Other Decks in Programming

See All in Programming
マイコン向けの軽量Ruby「PicoRuby」で各種デバイスを制御するネイティブアプリの実現手法
Avatar for bash0C7 bash0c7
0
310
変化を抱擁するドキュメントの作り方 - ビジネスルール駆動開発がもたらす、コードとの新しい関係
Avatar for ioki ioki
2
130
世界の中心で、AI（App Intents）をさけぶ ー App Intents中心設計の実践ガイド
Avatar for touyou touyou
0
230
{ Android | Kotlin } Gradle Plugin in 2026
Avatar for RyuNen344 ryunen344
1
300
Claude Codeを組織的に動かして月400PRを実現した話
Avatar for happy_ryo happy_ryo
0
260
アクセシビリティから考える情報設計
Avatar for high-g high_g_engineer
0
350
初心者DevRelとして参加者だった私が、DevRel Talks!#2に登壇するまでにしてきたこと
Avatar for Rai sokohirai
0
360
GKE で Pod の見方を変えたら、スケールアウト時の挙動を真に捉えられた話
Avatar for Sota Takaki stkk
0
110
PHPプロジェクトの結合バランスを可視化する #php_night
Avatar for Takuma Kajikawa kajitack
0
230
The Good Stuff, Not the Slop: Engineering High-Quality Android Apps with Modern AI Tooling
Avatar for danybony danybony
1
230
不幸な GC
Avatar for Chen chencmd
0
890
AIエージェント時代のコードレビューを設計する
Avatar for nogu nogu66
6
2.6k

Featured

See All Featured
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
2.1k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
3k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
680
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
340
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
990
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
7k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.9k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
660
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
240
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
1
400
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
310
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k

Transcript

  1. Ecossistema Front-End Thiago Alves @taltk9

  2. Thiago Alves Luiz Front-End Developer @taltk9 /taltk9

  3. codeminer42.com

  4. Estamos contratando!!! [email protected]

  5. Codeminer 42 Novo Hamburgo - RS

  6. None
  7. None

  8. Papo de Dev

  9. github.com

  10. linkedin.com

  11. Ecossistema

  12. Conjunto de elementos que interagem a fim de constituir um

    sistema estável — O'Neil

  13. Front-End

  14. Camada de apresentação visual de um site ou aplicação web

  15. Conjunto de elementos que interagem a fim de estruturar informações

    visuais que permitam a comunicação de usuários com aplicações web
  16. None

  17. · HTML · CSS · JavaScript · UX · SEO

    · Acessibilidade
  18. None
  19. None
  20. None

  21. Entender ao máximo as necessidades

  22. None

  23. jquery.com

  24. // jQuery $('#element-id') // JavaScript document.getElementById('element-id')

  25. // jQuery $('.element-className') // JavaScript document.querySelector('.element-className')

  26. AJAX

  27. None
  28. None
  29. None
  30. None

  31. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head>

    <body> <ul id="my-list"><!-- empty --></ul> </body> </html>

  32. jQuery var $myList = $('#my-list'); $.ajax({ url: 'https://api.domain.com/some-list', success: function

    (resp) { var data = resp.data; data.map(function (value) { var $myListItem = $('<li>').html(value.title); $myList.append($myListItem); }); } });

  33. HTML Resultante <!DOCTYPE html> ... <body> <ul id="my-list"> <li>Item 1</li>

    <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </body> </html>

  34. Template Engines

  35. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head>

    <body> <ul id="my-list"><!-- empty --></ul> <script id="template" type="text/template"> {{#each data}} <li>{{ title }}</li> {{/each}} </script> <script src="template-engine.js"></script> </body> </html>

  36. Sem template engine var $myList = $('#my-list'); $.ajax({ url: 'https://api.domain.com/some-list',

    success: function (resp) { var data = resp.data; data.map(function (value) { var $myListItem = $('<li>').html(value.title); $myList.append($myListItem); }); } });

  37. Com template engine var $myList = $('#my-list'); var source =

    $("#template").html(); var template = TemplateEngine.compile(source); $.ajax({ url: 'https://api.domain.com/some-list', success: function (resp) { $myList(template(resp)); } });

  38. handlebarsjs.com

  39. mozilla.github.io/nunjucks

  40. Mas isso é o básico...

  41. Alguns padrões foram estabelecidos

  42. Boilerplates

  43. html5boilerplate.com

  44. modernizr.com

  45. necolas.github.io/normalize.css

  46. github.com/seanpowell/Email-Boilerplate

  47. Bootstrap

  48. getbootstrap.com

  49. foundation.zurb.com

  50. purecss.io

  51. Muitas requisições e updates

  52. Controle do fluxo de dados e aplicação

  53. Frameworks

  54. backbonejs.org

  55. emberjs.com

  56. angularjs.org

  57. Aplicações tornaram-se mais complexas

  58. ... <link rel="stylesheet" href="style-1.css"> <link rel="stylesheet" href="style-2.css"> <link rel="stylesheet" href="style-3.css">

    <link rel="stylesheet" href="style-4.css"> <link rel="stylesheet" href="style-5.css"> <link rel="stylesheet" href="style-6.css"> ... <script src="script-1"></script> <script src="script-2"></script> <script src="script-3"></script> <script src="script-4"></script> <script src="script-5"></script> <script src="script-6"></script> <script src="script-7"></script> <script src="script-8"></script> <script src="script-9"></script> <script src="script-10"></script> <script src="script-11"></script> <script src="script-12"></script> <script src="script-13"></script> <script src="script-14"></script> <script src="script-15"></script> ...
  59. None

  60. · Projetos mais complexos · Manutenção · DRY - Don't

    Repeat Yourself

  61. Tooling

  62. None
  63. None

  64. · Linha de Comando · Automatizar tarefas · Transformar arquivos

    · Controlar libs e plugins

  65. gruntjs.com

  66. gulpjs.com

  67. bower.io

  68. Manter CSS é chato!!!

  69. Desculpem :(

  70. Pré-Processadores

  71. · Separar CSS por feature · Criar variáveis e funções

    · Automatizar sprites etc

  72. sass-lang.com

  73. lesscss.org

  74. compass-style.org

  75. JavaScript com novas features

  76. ES2015 (ES6)

  77. // Antes var fn = function (x) { return x

    + 1; }; // Depois const fn = (x) => x + 1

  78. Navegadores não suportam totalmente a nova versão

  79. babeljs.io

  80. Modularizar aplicações web se tornou uma solução viável

  81. webpack.github.io

  82. Componentizar interfaces surgiu como uma nova abordagem

  83. polymer-project.org

  84. facebook.github.io/react

  85. · Testes · Acessibilidade · Meta Data

  86. Comunidade

  87. html5rocks.com

  88. jsrocks.org

  89. maujor.com

  90. Eventos

  91. braziljs.org/conf

  92. frontinsm.com.br

  93. Obrigado! @taltk9