Actual Front End Development

A talk Miguel Melo gave on our GDGLx Sessions #1 at Uniplaces.

Transcript

1. Actual Front-end Development
2. 2 miguel.melo@uniplaces.com Miguel Melo @miguelbmelo
3. 3 So… Front-end development…
5. 5 Simple Right?
9. 9 0. Motivation Sane, testable and readable CSS said no-one ever… The pain - Hard to test (but not impossible); - Hard to maintain (but not impossible); - Hard to debug; - Lack of conventions; - Lot’s of duplicated code; - Where did I put my reset.css file again? - Not all browsers are made equal!
10. 10 0. CSS Frameworks to the rescue! Sane, testable and readable CSS said no-one ever… The gain - Ships with tested code (?) - Conventions! Lots of conventions! - Built-in Grid systems - and so much more…
11. 11 0. CSS Frameworks to the rescue…? Sane, testable and readable CSS said no-one ever… The pain - Ships with tested code (?) - Conventions! Lots of conventions! - Built-in Grid systems; - and so much more…
12. 12 0. There’s a better way! Sane, testable and readable CSS Let’s build our own CSS Framework!
14. 14 0. There’s a better way! Sane, testable and readable CSS Ok ok… so not a framework, but rather a toolkit with everything we need!
15. 15 0. Motivation Sane, testable and readable CSS The pain input[type="checkbox"] { display: block !important; width: 32px !important; height: 32px !important; margin: 0 !important; opacity: 0 !important; } “the easiest way to maintain CSS is to write less of it “ .header { @include header(); &——user { // … } } The goal
16. 16 1. Setting Expectations The why, the what & the how Performance & Maintainability & Easy Learning Curve What? A bower component to ease adoption, update and a fast way to start working on the front-end following Uniplaces’ design language. How? Exposing several sets of SCSS mixins, variables, colour palettes that can and should be used alongside with existing code - this also means little to no unused CSS in output files. Goal? Easy to learn, maintain and scale as well as being a “single source of truth” as well as abstracting design details for commonly used components. Why? Current workflow consists of Bootstrap.css + BucketAdmin.css + Custom CSS - hardly maintainable.
17. 17 1. Setting Expectations The why, the what & the how Performance & Maintainability & Easy Learning Curve What? A bower component to ease adoption, update and a fast way to start working on the front-end following Uniplaces’ design language - using whatever stack we want! How? Exposing several sets of SCSS mixins, variables, colour palettes that can and should be used alongside with existing code - this also means little to no unused CSS in output files. Goal? Easy to learn, maintain and scale as well as being a “single source of truth” as well as abstracting design details for commonly used components. Why? Current workflow consists of Bootstrap.css + BucketAdmin.css + Custom CSS - hardly maintainable.
18. 18 1. Setting Expectations The why, the what & the how Performance & Maintainability & Easy Learning Curve What? A bower component to ease adoption, update and a fast way to start working on the front-end following Uniplaces’ design language - using whatever stack we want! How? Exposing several sets of SCSS mixins, variables, colour palettes that can and should be used alongside with existing code - this also means little to no unused CSS in output files. Goal? Easy to learn, maintain and scale as well as being a “single source of truth” as well as abstracting design details for commonly used components. Why? Current workflow consists of Bootstrap.css + BucketAdmin.css + Custom CSS - hardly maintainable.
19. 19 1. Setting Expectations The why, the what & the how Performance & Maintainability & Easy Learning Curve What? A bower component to ease adoption, update and a fast way to start working on the front-end following Uniplaces’ design language - using whatever stack we want! How? Exposing several sets of SCSS mixins, variables, colour palettes that can and should be used alongside with existing code - this also means little to no unused CSS in output files. Goal? Easy to learn, maintain and scale as well as being a “single source of truth” as well as abstracting design details for commonly used components. Why? Current workflow consists of Bootstrap.css + BucketAdmin.css + Custom CSS - hardly maintainable.
20. 20 2. Setup Integrating UniQ in current workflows Setup Requirements Why bower? Easy way to quickly get started. How quick? One command: $ npm install bower —global $ bower install uniq —save $ bower update
21. 21 3. Usage Abstraction, Abstraction, Abstraction… Import Usage @import “../bower_components/uniq/src/styles/main”; .special-button { @include button(); } .custom-link { @include link(); }
22. 22 Tips & Tricks You can do it too! Usage @mixin button() { background-color: #8ADA55; border-radius: 4px; text-align: center; } .special-button { @include button(); @include col(2); // spans for a 2 column width }
23. @mixins vs. @extends vs. @placeholder’s
24. 24 @mixin’s vs @extend’s vs @placeholder’s It’s all about that Gzip - Less property duplication; - Extends don’t allow arguments; - Extends don’t work within media queries; - Extends, when nested, can extend unintended code; - Extends group the compiled CSS based on reused declarations, not on how the code is contextually written Sass Mixins vs Extends: The Data - by Shay Howe
25. 25 Real-world examples Usage @mixin button() { background-color: #00ADEF; border-radius: 4px; text-align: center; color: #FFF; } .call-to-action { @include button(); }
26. 26 Real-world examples Advantages - Reuse it in all your projects; - Evolves with you and your team; - Less bloat exported CSS files; - Provides separation of concerns; - As simple to write as CSS / SCSS; - No need to learn other peoples framework; - Works with any web-dev stack; Simpler code already Show me MOAAAR!!! Disadvantages - It’s time consuming at first; - You will (in some cases) re-invent the wheel; - You need to be at the top of your “A-game” to build it.
27. Demo
28. How about documentation?
29. How about documentation?
30. Thank you miguel.melo@uniplaces.com @miguelbmelo