Good tips for front-end development for Django Devs

1. davidson fellipe
front-end engineer at globo.com
PRACTICAL GUIDE
FOR FRONT-END
DEVELOPMENT FOR
DJANGO DEVS

2. - HTML ~ 2001
- front-end engineer
- globo.com ~ 2010
- more about me at
fellipe.com
me

3. globo.com
- 35 multidisciplinary teams
using agile methodologies
- large open source community
- projects at opensource.globo.com

4. globo.com
- 3 multidisciplinary teams
- all engineers code for client side
sports at globo.com

5. https://www.!ickr.com/photos/frontendbr/1691161875/sizes/o/
WHY
FRONT-END?

6. 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

7. USER EXPERIENCE
OPTIMIZED

8. 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?

9. CODE NEEDS TO
WORK IN DIFFERENT
ENVIRONMENTS

10. MULTIPLE BROWSERS
MULTIPLE VERSIONS
MULTIPLE RESOLUTIONS
MULTIPLE DEVICES

11. 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...

12. http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2.jpg

13. http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2.jpg

14. IT’S MUCH MORE
THAN CONVERT
JPG TO HTML

16. http:globoesporte.com

17. - 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?

18. +
combining elements

20. MAKE
APPS!

21. 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

23. our requirements
- DRY
- components
- fonts and icons
- similar interactions across site
- possibility of themes
- low speci"city of CSS

24. 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

25. 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

26. 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

27. DO MORE
TEMPLATE TAGS

28. 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)

29. 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

30. DO YOU WANT TO
CREATE A UI LIB?
NO, I DON’T!

33. CSS
VS
PREPROCESSORS

34. good parts
- improve productivity
- easy to work with modules
- use of mixins, variables, selector
inheritance and nesting

39. BAD PRACTICES WITH
CSS, CAN BE MADE
WORSE WITH
PREPROCESSORS

40. doing evil with scss!
.great-grandfather {
.grandfather {
.father {
#wtf {
color: #f60;
}
}
}
}
.great-grandfather
.grandfather
.father
#wtf {
color: #f60;
}
/*
why high specificity id? */
SCSS CSS

41. AUTOMATING
TASKS

42. let’s use Grunt?

43. grunt.js
- low learning curve
- large number of plugins
- huge open source community

44. I’ve got to congure
node.js?

45. $ make grunt-cong
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

46. tasks
- test runners
- preprocessors
- js / css lint
- create sprites
- concatenation

47. 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

48. Gruntle
.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

49. LET'S CREATE A
CODING STANDARD?

50. standards
- quotes, braces, semicolons
- Space vs Tab
- Single quote vs double quotes
- nomenclatures for functions,
Object Literal, conditional
statement...

51. https://github.com/rwaldron/idiomatic.js/

52. https://github.com/airbnb/javascript

53. http://csslint.net/

54. PERFORMANCE

55. #everybodyloves

56. http://www.broofa.com/Tools/JSLitmus/

57. http://pitomba.org/

58. https://github.com/django-compressor/django-compressor

59. https://github.com/davidsonfellipe/keepfast/

60. http://browserdiet.com/

61. What impact
performance?
- low conversions
- low engagement
- high rejection rates

62. - fellipe.com/talks
- github.com/davidsonfellipe
- twitter.com/davidsonfellipe
thankyou