true beauty is on the inside, but your users are shallow

Download True beauty is on the inside, but your users are shallow

If you can't read please download the document

Upload: loek-van-gent

Post on 12-Aug-2015

98 views

Category:

Internet


4 download

TRANSCRIPT

  1. 1. True beauty is on the inside ...but your users are shallow. Loek van Gent 2 June 2015 Writing better front-end code
  2. 2. PHP (Zend)many, many years Django/Python 3 yearsMe #afk
  3. 3. Listen up guys, we've got a cool idea... Multi-tenant & white label site
  4. 4. The big refactor
  5. 5. Sorry, we could not display the entire diff because too many files (1,805) changed.
  6. 6. WOW! I REALLY love that new design!!!
  7. 7. True beauty is on the inside ...but your product manager is shallow.
  8. 8. So, what's all this fuzz about front-end?
  9. 9. So, how can we write better front-end code?
  10. 10. $ django-admin createproject true_beauty $ django-admin startapp heart $ django-admin startapp spirit
  11. 11. Typical Django Project Layout true_beauty __init__.py settings.py urls.py wsgi.py manage.py spirit __init__.py models.py tests.py views.py heart __init__.py models.py tests.py views.py
  12. 12. true_beauty heart models.py tests.py views.py templates heart static css js spirit models.py tests.py views.py templates spirit static css js Typical Django Project Layout
  13. 13. Group your front-end! since 1.8
  14. 14. Django Project Layout true_beauty __init__.py settings.py urls.py wsgi.py templates static manage.py spirit __init__.py models.py tests.py views.py heart __init__.py models.py tests.py views.py you are here
  15. 15. Django Project Layout true_beauty __init__.py settings.py urls.py wsgi.py templates static manage.py spirit __init__.py models.py tests.py views.py heart __init__.py models.py tests.py views.py you are here front-end guys
  16. 16. Ok. Let's look at some front-end tools.
  17. 17. JS requirements: Bower { "name": "true_beauty", "description": "True beauty", "dependencies": { "jquery-ui": "~1.11.4", "jquery": "1.8.3", "moment": "2.9.0", } }
  18. 18. Structured CSS: Sass .item { width: $container-width; color: $first-color; .col-4 { width: $container-width / 4; } &:hover {...} }
  19. 19. Building your front-end: Grunt
  20. 20. Installing these and other tools: NPM
  21. 21. This is starting to look like an entire project within my Django project
  22. 22. Now you're getting it!
  23. 23. Front-endBack-end
  24. 24. Django Server to provide data Django Rest Framework
  25. 25. Full-stack Javascript Framework for front-end Ember, Angular, React...
  26. 26. Back-end Front-end
  27. 27. TestingBack-end
  28. 28. Front-end Mock Api
  29. 29. Ember CLI
  30. 30. $ ember new good_looks $ cd good_looks $ ember generate route eyes $ ember generate route smile
  31. 31. Typical Ember Project Layout app/ app.js index.html routes models views controllers components eyes.js smile.js templates application.hbs eyes.hbs smile.hbs
  32. 32. $ ember serve --proxy http://localhost:8000
  33. 33. Summing it up...
  34. 34. Love your front-end It's the only thing your users get to see
  35. 35. Group your front-end
  36. 36. Use tools to help structure your front-end code
  37. 37. Start using Ember* It is the future! AngularReact No! Forget about Backbone
  38. 38. Suggestions? Questions? That's all for now. @loek1pc gannetson