Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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.gl...
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.c...
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 DE...
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,
CAN...
http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2....
http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2....
IT’S MUCH MORE
THAN CONVERT
JPG TO HTML
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 tea...
+
combining elements
MAKE
APPS!
app example
- division of
responsibilities
- unit tests for each app
- management and
setup of dependencies
using pypi
- i...
our requirements
- DRY
- components
- fonts and icons
- similar interactions across site
- possibility of themes
- low spe...
thinking in
components
<header class="geui-title">
<h1 class="geui-title-label">
Normal <span class="geui-title-bold">Bold...
organizing your app
(ge)davidson ➜ .../ge_ui/static (master) $ tree
|-fonts
|---icons
|---opensans
|-img
|---ge_ui
|-----p...
how blocks work?
{% extends "core/delivery.html" %}
{% block css_delivery %}
{{ block.super }}
<link type="text/css"
rel="...
DO MORE
TEMPLATE TAGS
template tag
# -*- coding: utf-8 -*-
from django.template import Library
register = Library()
@register.inclusion_tag('com...
dropdown.html
<div class="geui-dropdown">
<span class="geui-dropdown-title">{{dropdown.title}}</span>
<ul class="geui-drop...
DO YOU WANT TO
CREATE A UI LIB?
NO, I DON’T!
CSS
VS
PREPROCESSORS
good parts
- improve productivity
- easy to work with modules
- use of mixins, variables, selector
inheritance and nesting
BAD PRACTICES WITH
CSS, CAN BE MADE
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Practical guide for front-end development for django devs
Upcoming SlideShare
Loading in …5
×

Practical guide for front-end development for django devs

1,839 views

Published on

Good tips for front-end development for Django Devs

Published in: Software, Technology

Practical guide for front-end development for django devs

  1. 1. davidson fellipe front-end engineer at globo.com PRACTICAL GUIDE FOR FRONT-END DEVELOPMENT FOR DJANGO DEVS
  2. 2. - HTML ~ 2001 - front-end engineer - globo.com ~ 2010 - more about me at fellipe.com me
  3. 3. globo.com - 35 multidisciplinary teams using agile methodologies - large open source community - projects at opensource.globo.com
  4. 4. globo.com - 3 multidisciplinary teams - all engineers code for client side sports at globo.com
  5. 5. https://www.!ickr.com/photos/frontendbr/1691161875/sizes/o/ WHY FRONT-END?
  6. 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. 7. USER EXPERIENCE OPTIMIZED
  8. 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. 9. CODE NEEDS TO WORK IN DIFFERENT ENVIRONMENTS
  10. 10. MULTIPLE BROWSERS MULTIPLE VERSIONS MULTIPLE RESOLUTIONS MULTIPLE DEVICES
  11. 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. 12. http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2.jpg
  13. 13. http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2.jpg
  14. 14. IT’S MUCH MORE THAN CONVERT JPG TO HTML
  15. 15. http:globoesporte.com
  16. 16. - 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?
  17. 17. + combining elements
  18. 18. MAKE APPS!
  19. 19. 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
  20. 20. our requirements - DRY - components - fonts and icons - similar interactions across site - possibility of themes - low speci"city of CSS
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. DO MORE TEMPLATE TAGS
  25. 25. 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)
  26. 26. 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
  27. 27. DO YOU WANT TO CREATE A UI LIB? NO, I DON’T!
  28. 28. CSS VS PREPROCESSORS
  29. 29. good parts - improve productivity - easy to work with modules - use of mixins, variables, selector inheritance and nesting
  30. 30. BAD PRACTICES WITH CSS, CAN BE MADE

×