Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Practical guide for front-end development for Django Devs
Davidson Fellipe
May 03, 2014
Programming
0
51
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
96
O melhor da monitoração de web performance
fellipe
0
330
Guia do Front-end das galáxias
fellipe
3
210
Workflow para desenvolvimento web e mobile usando gruntjs
fellipe
2
87
Como é trabalhar na Globo.com?
fellipe
3
80
Guia prático de desenvolvimento front-end para django devs
fellipe
1
110
Esse cara é o Grunt
fellipe
9
540
It's Javascript Time
fellipe
6
410
Frontend Engineers: Passado, presente e futuro
fellipe
2
170
Other Decks in Programming
See All in Programming
Angular‘s Future without NgModules: Architectures with Standalone Components @enterJS
manfredsteyer
PRO
0
180
"What's new in Swift"の要約 / swift_5_7_summary
uhooi
1
270
Keeping your team in top shape with the Gradle Enterprise API
runningcode
3
120
GitHubのユーザー名を変更した後のあれこれ
tahia910
0
120
開発速度を5倍早くするVSCodeの拡張機能を作った
purp1eeeee
2
140
VisualProgramming_GoogleHome_LINE
nearmugi
1
140
Cross Deviceチームにおけるスマートテレビアプリ開発ってどんな感じ?
cokaholic
0
120
What's new in Android development tools まとめ
mkeeda
0
270
Dagger + Anvil: Learning to Love Dependency Injection
vrallev
3
240
Android スキルセットをフル活用して始めるスマートテレビアプリ開発
satsukies
0
190
Value and Record Types
hschwentner
0
550
実践エクストリームプログラミング / Extreme Programming in Practice
enk
1
400
Featured
See All Featured
Optimizing for Happiness
mojombo
365
63k
Mobile First: as difficult as doing things right
swwweet
213
7.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
5
2.2k
Robots, Beer and Maslow
schacon
152
7.1k
Web development in the modern age
philhawksworth
197
9.3k
Building Your Own Lightsaber
phodgson
94
4.6k
Fireside Chat
paigeccino
11
1.3k
Why Our Code Smells
bkeepers
PRO
324
55k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
5.9k
Making Projects Easy
brettharned
98
4.3k
Happy Clients
brianwarren
89
5.6k
How to train your dragon (web standard)
notwaldorf
58
3.9k
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