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 Django Devs
Search
Davidson Fellipe
May 03, 2014
Programming
0
57
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
220
O melhor da monitoração de web performance
fellipe
0
380
Guia do Front-end das galáxias
fellipe
3
230
Workflow para desenvolvimento web e mobile usando gruntjs
fellipe
2
96
Como é trabalhar na Globo.com?
fellipe
3
88
Guia prático de desenvolvimento front-end para django devs
fellipe
1
120
Esse cara é o Grunt
fellipe
9
590
It's Javascript Time
fellipe
6
440
Frontend Engineers: Passado, presente e futuro
fellipe
2
230
Other Decks in Programming
See All in Programming
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
350
Elm 0.19.0 Changes
bkuhlmann
0
490
Git Rebase
bkuhlmann
11
1.6k
Code Reviews
bkuhlmann
4
890
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
370
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
Fast JSX: Don't clone props object #28768
yossydev
1
120
Ruby Function Composition
bkuhlmann
1
330
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
260
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
950
2 週間で Twitter Bot を作ってみた
contour_gara
0
500
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
Featured
See All Featured
Infographics Made Easy
chrislema
238
18k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Automating Front-end Workflow
addyosmani
1356
200k
Building Adaptive Systems
keathley
31
1.9k
How to Ace a Technical Interview
jacobian
272
22k
Product Roadmaps are Hard
iamctodd
44
9.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
Fireside Chat
paigeccino
21
2.6k
Code Review Best Practice
trishagee
55
15k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
A Tale of Four Properties
chriscoyier
151
22k
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