Practical guide for front-end development for django devs
-
Upload
davidson-fellipe -
Category
Software
-
view
645 -
download
10
description
Transcript of Practical guide for front-end development for django devs
![Page 1: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/1.jpg)
davidson fellipefront-end engineer at globo.com
PRACTICAL GUIDE FOR FRONT-END
DEVELOPMENT FOR DJANGO DEVS
![Page 2: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/2.jpg)
- HTML ~ 2001
- front-end engineer
- globo.com ~ 2010
- more about me at fellipe.com
me
![Page 3: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/3.jpg)
globo.com
- +35 multidisciplinary teams oriented agile methodologies
- large open source community
- projects at opensource.globo.com
![Page 4: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/4.jpg)
globo.com
- 3 multidisciplinary teams
- all engineers develop client side
sports at globo.com
![Page 5: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/5.jpg)
https://www.!ickr.com/photos/frontendbr/1691161875/sizes/o/
WHYFRONT-END?
![Page 6: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/6.jpg)
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
![Page 7: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/7.jpg)
USER EXPERIENCEOPTIMIZED
![Page 8: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/8.jpg)
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?
![Page 9: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/9.jpg)
CODE NEEDS TO WORK IN DIFFERENT
ENVIRONMENTS
![Page 10: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/10.jpg)
MULTIPLE BROWSERSMULTIPLE VERSIONSMULTIPLE RESOLUTIONSMULTIPLE DEVICES
![Page 11: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/11.jpg)
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...
![Page 12: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/12.jpg)
http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2.jpg
![Page 13: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/13.jpg)
http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2.jpg
![Page 14: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/14.jpg)
IT’S MUCH MORETHAN CONVERT
JPG TO HTML
![Page 15: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/15.jpg)
![Page 16: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/16.jpg)
http:globoesporte.com
![Page 17: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/17.jpg)
- how load the flags?
- how to create this tabs?
- what happens when a team is loaded?
- how to get a team?
- when use wai-aria?
![Page 18: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/18.jpg)
+combining elements
![Page 19: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/19.jpg)
![Page 20: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/20.jpg)
MAKEAPPS!
![Page 21: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/21.jpg)
app example
- division of responsibilities
- unit tests for each app
- management and setup of dependencies via pypi
- trouble separating after together in production
appproduct core
appnews
apppolls
requirements.txt
![Page 22: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/22.jpg)
![Page 23: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/23.jpg)
our requirements- DRY
- components
- fonts and icons
- similar interactions across site
- possibility of themes
- low speci"city of CSS
![Page 24: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/24.jpg)
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
![Page 25: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/25.jpg)
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
![Page 26: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/26.jpg)
how blocks works?
{% 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
TEMPLATEapp core
TEMPLATEapp poll
![Page 27: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/27.jpg)
DO MORETEMPLATE TAGS
![Page 28: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/28.jpg)
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 = Trueregister.filter(ge_ui_dropdown)
![Page 29: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/29.jpg)
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
![Page 30: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/30.jpg)
DO YOU WANT TO CREATE A UI LIB?
NO, I DON’T!
![Page 31: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/31.jpg)
![Page 32: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/32.jpg)
![Page 33: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/33.jpg)
CSSVS
PREPROCESSORS
![Page 34: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/34.jpg)
good parts
- improve productivity
- easy to work with modules
- use of mixins, variables, selector inheritance and nesting
![Page 35: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/35.jpg)
![Page 36: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/36.jpg)
![Page 37: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/37.jpg)
![Page 38: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/38.jpg)
![Page 39: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/39.jpg)
BAD PRACTICES WITH CSS, CAN BE MADE ������
WORSE WITH PREPROCESSORS
![Page 40: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/40.jpg)
doing evil with scss!
.great-grandfather {
.grandfather {
.father {
#wtf {
color: #f60;
}
}
}
}
.great-grandfather
.grandfather
.father#wtf {
color: #f60;
}
/*
why high specificity id? */
SCSS CSS
![Page 41: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/41.jpg)
AUTOMATING TASKS
![Page 42: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/42.jpg)
let’s use Grunt?
![Page 43: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/43.jpg)
grunt.js
- low learning curve
- large number of plugins
- huge open source community
![Page 44: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/44.jpg)
I’ve to con"gure node.js?
![Page 45: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/45.jpg)
$ 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
![Page 46: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/46.jpg)
tasks
- test runners
- preprocessors
- js / css lint
- create sprites
- concatenation
![Page 47: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/47.jpg)
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
![Page 48: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/48.jpg)
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
![Page 49: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/49.jpg)
LET'S CREATE ACODING STANDARD?
![Page 50: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/50.jpg)
standards- quotes, braces, semicolons
- Space vs Tab
- Single quote vs double quotes
- nomenclatures for functions, Object Literal, conditional statement...
![Page 51: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/51.jpg)
https://github.com/rwaldron/idiomatic.js/
![Page 52: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/52.jpg)
https://github.com/airbnb/javascript
![Page 54: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/54.jpg)
PERFORMANCE
![Page 55: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/55.jpg)
#everybodyloves
![Page 56: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/56.jpg)
http://www.broofa.com/Tools/JSLitmus/
![Page 58: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/58.jpg)
https://github.com/django-compressor/django-compressor
![Page 59: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/59.jpg)
https://github.com/davidsonfellipe/keepfast/
![Page 60: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/60.jpg)
http://browserdiet.com/
![Page 61: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/61.jpg)
What impact performance?- low conversions
- low engagement
- high rejection rates
![Page 62: Practical guide for front-end development for django devs](https://reader034.fdocuments.us/reader034/viewer/2022051512/53fded198d7f72a81c8b4bd8/html5/thumbnails/62.jpg)
- fellipe.com/talks
- github.com/davidsonfellipe
- twitter.com/davidsonfellipe
thankyou