Practical guide for front-end development for Django Devs

Practical guide for front-end development for Django Devs

Good tips for front-end development for Django Apps

054c583ad5dc09a861874e14dcb43e4c?s=128

Davidson Fellipe

May 03, 2014
Tweet

Transcript

  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

  15. None
  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

  19. None
  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
  22. None
  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!
  31. None
  32. None
  33. CSS VS PREPROCESSORS

  34. good parts - improve productivity - easy to work with

    modules - use of mixins, variables, selector inheritance and nesting
  35. None
  36. None
  37. None
  38. None
  39. BAD PRACTICES WITH CSS, CAN BE MADE

  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 con"gure node.js?

  45. $ 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
  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. 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
  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