- Home
Internet
- True beauty is on the inside, but your users are shallow
If you can't read please download the document
True beauty is on the inside, but your users are shallow
Embed Size (px)
Citation preview
- 1. True beauty is on the inside ...but your users are shallow.
Loek van Gent 2 June 2015 Writing better front-end code
- 2. PHP (Zend)many, many years Django/Python 3 yearsMe #afk
- 3. Listen up guys, we've got a cool idea... Multi-tenant &
white label site
- 4. The big refactor
- 5. Sorry, we could not display the entire diff because too many
files (1,805) changed.
- 6. WOW! I REALLY love that new design!!!
- 7. True beauty is on the inside ...but your product manager is
shallow.
- 8. So, what's all this fuzz about front-end?
- 9. So, how can we write better front-end code?
- 10. $ django-admin createproject true_beauty $ django-admin
startapp heart $ django-admin startapp spirit
- 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. 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. Group your front-end! since 1.8
- 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. 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. Ok. Let's look at some front-end tools.
- 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. Structured CSS: Sass .item { width: $container-width;
color: $first-color; .col-4 { width: $container-width / 4; }
&:hover {...} }
- 19. Building your front-end: Grunt
- 20. Installing these and other tools: NPM
- 21. This is starting to look like an entire project within my
Django project
- 22. Now you're getting it!
- 23. Front-endBack-end
- 24. Django Server to provide data Django Rest Framework
- 25. Full-stack Javascript Framework for front-end Ember,
Angular, React...
- 26. Back-end Front-end
- 27. TestingBack-end
- 28. Front-end Mock Api
- 29. Ember CLI
- 30. $ ember new good_looks $ cd good_looks $ ember generate
route eyes $ ember generate route smile
- 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. $ ember serve --proxy http://localhost:8000
- 33. Summing it up...
- 34. Love your front-end It's the only thing your users get to
see
- 35. Group your front-end
- 36. Use tools to help structure your front-end code
- 37. Start using Ember* It is the future! AngularReact No!
Forget about Backbone
- 38. Suggestions? Questions? That's all for now. @loek1pc
gannetson