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
65
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
260
O melhor da monitoração de web performance
fellipe
0
400
Guia do Front-end das galáxias
fellipe
3
230
Workflow para desenvolvimento web e mobile usando gruntjs
fellipe
2
110
Como é trabalhar na Globo.com?
fellipe
3
93
Guia prático de desenvolvimento front-end para django devs
fellipe
1
130
Esse cara é o Grunt
fellipe
9
710
It's Javascript Time
fellipe
6
460
Frontend Engineers: Passado, presente e futuro
fellipe
2
350
Other Decks in Programming
See All in Programming
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.1k
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
100
WebDriver BiDiとは何なのか
yotahada3
1
140
Rails アプリ地図考 Flush Cut
makicamel
1
110
CI改善もDatadogとともに
taumu
0
110
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
A designer walks into a library…
pauljervisheath
205
24k
How to train your dragon (web standard)
notwaldorf
90
5.8k
A Tale of Four Properties
chriscoyier
158
23k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Code Review Best Practice
trishagee
66
17k
Music & Morning Musume
bryan
46
6.3k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Documentation Writing (for coders)
carmenintech
67
4.6k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
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