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
Practical guide for front-end development for D...
Search
Davidson Fellipe
May 03, 2014
Programming
0
66
Practical guide for front-end development for Django Devs
Good tips for front-end development for Django Apps
Davidson Fellipe
May 03, 2014
Tweet
Share
More Decks by Davidson Fellipe
See All by Davidson Fellipe
Adventures from Enzyme to React Testing Library
fellipe
1
280
O melhor da monitoração de web performance
fellipe
0
410
Guia do Front-end das galáxias
fellipe
3
240
Workflow para desenvolvimento web e mobile usando gruntjs
fellipe
2
110
Como é trabalhar na Globo.com?
fellipe
3
95
Guia prático de desenvolvimento front-end para django devs
fellipe
1
130
Esse cara é o Grunt
fellipe
9
730
It's Javascript Time
fellipe
6
470
Frontend Engineers: Passado, presente e futuro
fellipe
2
370
Other Decks in Programming
See All in Programming
地域ITコミュニティの活性化とAWSに移行してみた話
yuukis
0
150
新卒から4年間、20年もののWebサービスと 向き合って学んだソフトウェア考古学
oguri
8
7k
SideKiqでジョブが二重起動した事象を深堀りしました
t_hatachi
0
270
いまさら聞けない生成AI入門: 「生成AIを高速キャッチアップ」
soh9834
14
4k
OpenTelemetryを活用したObservability入門 / Introduction to Observability with OpenTelemetry
seike460
PRO
1
380
Devinのメモリ活用の学びを自社サービスにどう組み込むか?
itarutomy
0
1.8k
AIコードエディタの基盤となるLLMのFlutter性能評価
alquist4121
0
170
体得しよう!RSA暗号の原理と解読
laysakura
3
550
PHPのガベージコレクションを深掘りしよう
rinchoku
0
250
Going Structural with Named Tuples
bishabosha
0
180
Modern Angular:Renovation for Your Applications @angularDays 2025 Munich
manfredsteyer
PRO
0
160
Kubernetesで実現できるPlatform Engineering の現在地
nwiizo
3
1.8k
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Side Projects
sachag
452
42k
Designing Experiences People Love
moore
141
23k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
BBQ
matthewcrist
88
9.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
8
710
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Speed Design
sergeychernyshev
28
870
The World Runs on Bad Software
bkeepers
PRO
67
11k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Transcript
davidson fellipe front-end engineer at globo.com PRACTICAL GUIDE FOR FRONT-END
DEVELOPMENT FOR DJANGO DEVS
- HTML ~ 2001 - front-end engineer - globo.com ~
2010 - more about me at fellipe.com me
globo.com - 35 multidisciplinary teams using agile methodologies - large
open source community - projects at opensource.globo.com
globo.com - 3 multidisciplinary teams - all engineers code for
client side sports at globo.com
https://www.!ickr.com/photos/frontendbr/1691161875/sizes/o/ WHY FRONT-END?
94% of load time is related to client side (globoesporte.com/copa)
http://gtmetrix.com/har.html?inputUrl=http://gtmetrix.com/reports/globoesporte.globo.com/7eqNM2Z1/net.harp&expand=true&validate=false
USER EXPERIENCE OPTIMIZED
http://www.reddit.com/r/javascript/comments/14zwpv/why_are_front_end_developers_so_high_in_demand_at/ WHY ARE FRONT END DEVELOPERS SO HIGH IN DEMAND
AT STARTUPS IF FRONT END DEVELOPMENT IS RELATIVELY EASIER THAN OTHER FIELDS OF ENGINEERING?
CODE NEEDS TO WORK IN DIFFERENT ENVIRONMENTS
MULTIPLE BROWSERS MULTIPLE VERSIONS MULTIPLE RESOLUTIONS MULTIPLE DEVICES
HTML, CSS, JAVASCRIPT, FEATURE DETECTION, REPAINT, REFLOW, PRE-PROCESSORS, HTTP, CSRF,
ANIMATIONS TIME FUNCTIONS, SVG, CANVAS, LOCALSTORAGE, WEBCOMPONENTS, XSS, WEBSOCKETS, SHADOW DOM, GRIDS SYSTEMS, SCHEMA.ORG, SEO... AND WHY NOT? DEPENDENCY MANAGEMENT, MVC FRAMEWORKS, TESTING, CODE QUALITY ANALYZERS, TASK RUNNERS, PERFORMANCE...
http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2.jpg
http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2.jpg
IT’S MUCH MORE THAN CONVERT JPG TO HTML
None
http:globoesporte.com
- how load the shields? - how to create this
tabs? - what happens when a team is loaded? - how to request a new soccer team? - where to use WAI-ARIA?
+ combining elements
None
MAKE APPS!
app example - division of responsibilities - unit tests for
each app - management and setup of dependencies using pypi - is difficult to separate when the apps are already in production together app product core app news app polls requirements.txt
None
our requirements - DRY - components - fonts and icons
- similar interactions across site - possibility of themes - low speci"city of CSS
thinking in components <header class="geui-title"> <h1 class="geui-title-label"> Normal <span class="geui-title-bold">Bold</span>
</h1> <a href="#" class="geui-title-more geui-color-default">read more</a> <span class="geui-title-bar geui-color-default"></span> </header> HTML
organizing your app (ge)davidson ➜ .../ge_ui/static (master) $ tree |-fonts
|---icons |---opensans |-img |---ge_ui |-----placeholder |-----sprites |-js |---ge_ui |---vendor |-scss |---ge_ui |---vendor TERMINAL
how blocks work? {% extends "core/delivery.html" %} {% block css_delivery
%} {{ block.super }} <link type="text/css" rel="stylesheet" media="screen" href="poll/css/delivery.css"> {% endblock %} delivery.html TEMPLATE app core TEMPLATE app poll
DO MORE TEMPLATE TAGS
template tag # -*- coding: utf-8 -*- from django.template import
Library register = Library() @register.inclusion_tag('components/dropdown.html') def ge_ui_dropdown(dropdown): return {'dropdown': dropdown} ge_ui_dropdown.is_safe = True register.filter(ge_ui_dropdown)
dropdown.html <div class="geui-dropdown"> <span class="geui-dropdown-title">{{dropdown.title}}</span> <ul class="geui-dropdown-list"> {% for item
in dropdown.itens %} <li class="geui-dropdown-list-item"> <a href="{{item.link}}" class="geui-dropdown-list-link" title="{{item.label}}" {% for meta in item.meta %} data-{{meta.label}}="{{meta.valor}}" {% endfor %}>{{item.label}}</a> </li> {% endfor %} </ul> </div> iterations
DO YOU WANT TO CREATE A UI LIB? NO, I
DON’T!
None
None
CSS VS PREPROCESSORS
good parts - improve productivity - easy to work with
modules - use of mixins, variables, selector inheritance and nesting
None
None
None
None
BAD PRACTICES WITH CSS, CAN BE MADE
doing evil with scss! .great-grandfather { .grandfather { .father {
#wtf { color: #f60; } } } } .great-grandfather .grandfather .father #wtf { color: #f60; } /* why high specificity id? */ SCSS CSS
AUTOMATING TASKS
let’s use Grunt?
grunt.js - low learning curve - large number of plugins
- huge open source community
I’ve got to con"gure node.js?
$ make grunt-con"g grunt-config: @if [ ! $$(which node) ];
then echo "✖ installing node..."; brew install node; else echo "node ✔"; fi @if [ ! $$(which npm) ]; then echo '✖ installing npm...'; sudo curl https://npmjs.org/install.sh -k | sh; else echo "npm ✔"; fi @if [ ! $$(which grunt) ]; then echo '✖ installing grunt...'; sudo npm install -g grunt-cli; else echo "grunt ✔"; fi @sudo npm i --save-dev MAKEFILE grunt-config: @if [ ! $$(which node) ]; then echo "✖ installing node..."; brew install node; else echo "node ✔"; fi @if [ ! $$(which npm) ]; then echo '✖ installing npm...'; sudo curl https://npmjs.org/install.sh -k | sh; else echo "npm ✔"; fi @if [ ! $$(which grunt) ]; then echo '✖ installing grunt...'; sudo npm install -g grunt-cli; else echo "grunt ✔"; fi @sudo npm i --save-dev MAKE
tasks - test runners - preprocessors - js / css
lint - create sprites - concatenation
package .json { "name": "poll", "version": "0.0.1", "devDependencies": { "grunt":
"~0.4.2", "grunt-contrib-jshint": "~0.6.5", "grunt-contrib-uglify": "~0.2.7", "grunt-contrib-watch": "~0.5.3", "load-grunt-tasks": "~0.2.0", "grunt-contrib-compass": "~0.6.0", "grunt-contrib-concat": "~0.3.0", "grunt-contrib-clean": "~0.5.0", "grunt-contrib-copy": "~0.4.1", "grunt-shell": "~0.6.1" } } JS
Grunt"le .js module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file .readJSON('package.json'),
pathBase: 'poll/static/poll/', pathSrc: '<%= pathBase %>src/', pathBuild: '<%= pathBase %>build/', compass: {}, uglify: {}, clean: {}, concat: {}, copy: {}, shell: {} }); require('load-grunt-tasks')(grunt); grunt.registerTask('build', ['compass:min','concat','clean','copy', 'uglify','shell']); }; JS
LET'S CREATE A CODING STANDARD?
standards - quotes, braces, semicolons - Space vs Tab -
Single quote vs double quotes - nomenclatures for functions, Object Literal, conditional statement...
https://github.com/rwaldron/idiomatic.js/
https://github.com/airbnb/javascript
http://csslint.net/
PERFORMANCE
#everybodyloves
http://www.broofa.com/Tools/JSLitmus/
http://pitomba.org/
https://github.com/django-compressor/django-compressor
https://github.com/davidsonfellipe/keepfast/
http://browserdiet.com/
What impact performance? - low conversions - low engagement -
high rejection rates
- fellipe.com/talks - github.com/davidsonfellipe - twitter.com/davidsonfellipe thankyou