Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Frontend Engineers: Passado, presente e futuro
Search
Davidson Fellipe
August 29, 2013
Programming
2
430
Frontend Engineers: Passado, presente e futuro
Davidson Fellipe
August 29, 2013
Tweet
Share
More Decks by Davidson Fellipe
See All by Davidson Fellipe
Adventures from Enzyme to React Testing Library
fellipe
1
330
O melhor da monitoração de web performance
fellipe
0
430
Guia do Front-end das galáxias
fellipe
3
260
Workflow para desenvolvimento web e mobile usando gruntjs
fellipe
2
130
Como é trabalhar na Globo.com?
fellipe
3
110
Guia prático de desenvolvimento front-end para django devs
fellipe
1
160
Practical guide for front-end development for Django Devs
fellipe
0
87
Esse cara é o Grunt
fellipe
9
790
It's Javascript Time
fellipe
6
500
Other Decks in Programming
See All in Programming
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
16
6.5k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
130
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
630
モテるデスク環境
mozumasu
3
930
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
2
350
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
320
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
190
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
270
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
5.6k
What's new in Spring Modulith?
olivergierke
1
160
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
5
2.5k
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
4
100
Featured
See All Featured
The Invisible Side of Design
smashingmag
302
51k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
YesSQL, Process and Tooling at Scale
rocio
173
15k
RailsConf 2023
tenderlove
30
1.3k
Producing Creativity
orderedlist
PRO
347
40k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Transcript
FRONT END ENGINEERS passado, presente e futuro
I’m DAVIDSON FELLIPE
WORKS
None
OUTROS NOMES DA PROFISSÃO front end developer htmler web developer
implementador de interfaces web UI engineer
http://www.youtube.com/watch?v=lXGDRrkaRgU I’m a front end engineer
O QUE FAZ UM FRONT END ENGINEER?
APTO A SE COMUNICAR Product Managers End Users Engineering Management
User Interface Designers
“é o pro!ssional capaz de explorar o front-end de uma
aplicação web não só como layout, mas como interface móvel, mutante, interativa, proporcionando, assim, uma experiência de uso mais rica” Berg Brandt Senior Frontend Engineer no Yahoo!
QUAL FORMAÇÃO ADEQUADA PARA FRONT END ENGINEER?
frontend-br no Y! iniciado por um grupo de devs de
recife COMO COMEÇOU?
COMUNIDADE HOJE Vários evento na área + interação Projetos de
código aberto conhecidos Pro!ssionais com destaque internacional
http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg http://www.communityjs.org
http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg http://www.communityjs.org
http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg http://www.braziljs.org
http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg http://www.braziljs.com.br
http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg http://www.frontinbh.com.br
http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg http://www.riojs.org/conf
ERA UMA VEZ...
http://www.oldversion.com/windows/macromedia-dreamweaver/ E AINDA...
LAYOUT USANDO TABLE?
ENQUANTO ISSO EM 2000...
HTML CSS 2006...
precisa saber JAVASCRIPT? 2006...
ATUALMENTE...
+ poderosas + complexas + ambiciosas 2013...
www.igvita.com/slides/2012/devtools-tips-and-tricks/ CICLO DE VIDA DE UMA WEBPAGE
ATUALMENTE... http://httparchive.org/trends.php
ATUALMENTE... http://httparchive.org/trends.php
XBROWSER XDEVICE XPLATFORM
XBROWSER XDEVICE XPLATFORM
http://ondeviceresearch.com/ USUÁRIOS APENAS MOBILE
Who Killed My Battery: Analyzing Mobile Browser Energy Consumption CONSUMO
ENERGIA DOS COMPONENTES outros - incluem conexões 3G e text rendering css e js - maior consumo relacionado a transmissão e rendering
websites precisam ter exatamente o mesmo visual em todos os
browsers?
None
TECNOLOGIAS
https://twitter.com/slicknet/status/292103833327370240
MULTITASKING... @flavioribeiro na globo.com
SEMÂNTICA FERRAMENTAS FRAMEWORKS LIBRARIES PRÉ PROCESSADORES SEO TESTES PADRÕES WEB
DOTFILES
DOTFILES.GITHUB.IO http://dotfiles.github.io/ backup compartilhe aprenda
automatize suas configurações https://github.com/davidsonfellipe/dotfiles
CONTROLE DE VERSÃO
https://bitbucket.org/
BITBUCKET VS GITHUB repos privados ilimitados preço baseado no número
de colaboradores número de colaboradores ilimitado preço baseado no número de repositórios privados
TASK RUNNER
http://gruntjs.com/
O QUE É O GRUNT? É um task runner baseado
em linha de comando para projetos javascript
O QUE É O GRUNT? Testes JS linting Concatenando e
Minificando Otimizando imagens Watchers para Pré-processadores
PRÉ-PROCESSADORES
None
None
None
None
None
None
None
QUALIDADE DE CÓDIGO
JSHINT http://www.jshint.com/
CSSLINT http://csslint.net/
TESTES
None
None
PERFORMANCE
performance de frontend? http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
PRINCIPAIS CUIDADOS • Minificar CSS, JavaScript e HTML • Inline
imagens, CSS, e JavaScript • Cache de assets • Defer JavaScript • Concatenar CSS e JavaScript • Compressão de imagens & resizing
YSLOW http://developer.yahoo.com/yslow/
YSLOW, MANTENEDOR? https://twitter.com/marcelduran brasileiro @marcelduran
PAGE SPEED https://developers.google.com/speed/pagespeed/insights
+PERFORMANCE? http://browserdiet.com/pt
TEM ATÉ EM CHINÊS... http://browserdiet.com/zh
SPEEDLIMIT http://mschrag.github.io
JSLITMUS http://mschrag.github.io
WEBPAGETEST
WEBPAGETEST
WEBPAGETEST
MAIS TOOLS
GRADIENTES? http://www.colorzilla.com/gradient-editor/
GITIFIER http://psionides.github.io/Gitifier/
MICROJS http://microjs.com/#
http://html5boilerplate.com/
MAS O QUE ESTÁ VINDO POR AÍ?
SPDY http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
WEB COMPONENTS http://www.w3.org/TR/2013/WD-components-intro-20130606/
POLYMER http://www.polymer-project.org/
SHOW YOUR CODE
CONTRIBUA EM PROJETOS OPENSOURCE
CONTRIBUA http://braziljs.org/projetos/ http://contribute.jquery.org/ http://gruntjs.com/contributing
COMO SE MANTER ATUALIZADO?
https://twitter.com/slicknet/status/292103833327370240
6 SEMANAS?
http://html5weekly.com/
http://javascriptweekly.com
http://braziljs.org/
http://oswaldoacauan.github.io/keep-up-to-date-brazuca/
AH... É MUITA COISA PARA ESTUDAR...
None
www.fellipe.com/talks slides disponíveis em...
obrigado CONVESCOTE! github.com/davidsonfellipe twitter.com/davidsonfellipe facebook.com/fellipe fellipe.com/talks
None