Practical guide for front-end development for django devs
•
10 likes•2,142 views
The document provides an overview of front-end development for Django developers. It discusses using HTML, CSS, JavaScript and other front-end technologies. It recommends using components, preprocessors and task automation like Grunt. It also discusses standards, performance optimization and creating UI libraries.
Report
Share
More Related Content
What's hot
What's hot (20)
Similar to Practical guide for front-end development for django devs
Similar to Practical guide for front-end development for django devs (20)
More from Davidson Fellipe
More from Davidson Fellipe (19)
Recently uploaded
Recently uploaded (20)
Practical guide 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
- 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
- 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...
- 14. IT’S MUCH MORE THAN CONVERT JPG TO HTML
- 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?
- 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
- 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!
- 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...
- 54. PERFORMANCE
- 55. #everybodyloves
- 61. What impact performance? - low conversions - low engagement - high rejection rates
- 62. - fellipe.com/talks - github.com/davidsonfellipe - twitter.com/davidsonfellipe thankyou