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
87
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
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
Esse cara é o Grunt
fellipe
9
790
It's Javascript Time
fellipe
6
500
Frontend Engineers: Passado, presente e futuro
fellipe
2
420
Other Decks in Programming
See All in Programming
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
110
Flutterで分数(Fraction)を表示する方法
koukimiura
0
130
オープンソースソフトウェアへの解像度🔬
utam0k
15
2.8k
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
170
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1.3k
Catch Up: Go Style Guide Update
andpad
0
220
株式会社 Sun terras カンパニーデック
sunterras
0
290
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
130
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
440
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
830
CSC305 Lecture 06
javiergs
PRO
0
220
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
1.3k
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Rails Girls Zürich Keynote
gr2m
95
14k
Writing Fast Ruby
sferik
629
62k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Side Projects
sachag
455
43k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Music & Morning Musume
bryan
46
6.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
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