Download to read offline
![FUNCTIONAL JAVASCRIPT WITH REACT
AND VUE
• Let’s talk about paradigms:
• Write a function in your favorite language that takes
in an array of numbers and returns a new array which
has doubled all of the items in the array.
• [1,2,3] => [2, 4, 6];](https://image.slidesharecdn.com/functionalcss-181116125125/85/Functional-Css-25-320.jpg)
![FUNCTIONAL JAVASCRIPT WITH REACT
AND VUE
• Let’s talk about paradigms:
• Write a function in your favorite language that takes
in an array of numbers and returns a new array which
has doubled all of the items in the array.
• [1,2,3] => [2, 4, 6];](https://image.slidesharecdn.com/functionalcss-181116125125/75/Functional-Css-25-2048.jpg)
More Related Content
Functional Css
- 1. FUNCTIONAL CSS? And Javascriptif we get to it
- 3. CSS ISN’T APROGRAMMING LANGUAGE?
- 4. CAN YOU READTHIS CSS?
- 5.
- 6. WHICH COLOR IS#NAVIGATION?
- 7.
- 8. NOW WHAT COLORIS NAVIGATION?
- 9.
- 10. THE PROMISE OFINHERITANCE • Inheritance refers to parents receiving properties from their parents: • This reduces the amount of code we have to write. •However, if we nest more inherit from more than one parent, it makes it very difficult to keep track of side effects.
- 11. TAKING THE COUT OF CSS •Don’t use the Cascade.
- 12. WHAT IS THEBOX-SIZING OF EACH ELEMENT? •Nav – border-box; •Nav::after – border-box; •Ul::after – content-box; •Li – content-box; •A – content-box;
- 13. DON’T RELY ONSPECIFICITY
- 14. ANSWERS •Navbar is yellow •Liis displayed block with yellow as its color •A is blue with text-decoration
- 15. WHAT IS THEPANACEA? • We’ve found that the cascade can lead to some undesirable effects: • It causes non-obvious behavior and can be easily overridden from the parent • But remembering specificity and the cascade is way too much cognitive load.
- 16. ENTER BEM • BEM(Block Element Modifier) is a way of writing css that is: • DRY: blocks are self contained and reusable • Separated from HTML: Because they don’t rely on the cascade, it is predictable to see which code is applied where • Singly Responsible: They only extend default/initial behavior, or explicitly say which properties they change.
- 17. BACK TO SCHOOL •BEM CSS only uses classes: No inline styles, no !important, no ids, no tag selectors, no descendant selectors, no plus selectors. • This avoids specificity and the cascade, and decouples your css from your html. This means you can alter your html without suffering from non-obvious effects.
- 18. AN EXAMPLE OFBEM HTML
- 19.
- 20. WHAT IS ABLOCK? •An independent, reusable part of your interface: •Navbars, headers, sections, footers, image galleries, carousels. •Can contain Elements and other blocks. •Can contain one or more Modifiers. •<div class=“large-hero”>
- 21. WHAT IS ANELEMENT? • An element belongs to a specific block. • It is denoted by two underscores following the block. • <div class=“large-hero__title”> • It may have one or more modifiers.
- 22. WHAT IS AMODIFIER? • A modifier modifies a block or element • Indicates a state that is different from the default • Generally used for when elements need to be styled in many different ways (think buttons) • Denoted by two dashes connecting it to the block or element it modifies • <button class=“btn btn—orange btn—large”>
- 23. LET’S COMPARE THISTO SMACSS • SMACSS has five parts (rather than 3). Base, layout, module, state and theme. • This is a little bit more complicated than it needs to be – really, we can communicate as much information as we need with just 3 parts (block, element, modifier).
- 24. WHAT ARE THEDOWNSIDES OF BEM? • Every element you need to modify must have a class name, and only those class names are allowed to modify that element. • This means we have to write more code to do the same amount of work. • But this saves us work in the long run by lowering the amount of technical debt – what you see is what you get, and you don’t have to worry about the cascade, specificity, or css which is coupled to your html.
- 25. FUNCTIONAL JAVASCRIPT WITHREACT AND VUE • Let’s talk about paradigms: • Write a function in your favorite language that takes in an array of numbers and returns a new array which has doubled all of the items in the array. • [1,2,3] => [2, 4, 6];
- 26.
- 27. FIND THE 5COUNTRIES IN THE WORLD WITH THE HIGHEST POPULATION • SELECT country_name • FROM countries • ORDER BY population • LIMIT 5;
- 28. ENTER FUNCTIONAL COMPONENTS •Frameworks allow us greater control over our javascript, but also allow for easily extensible components so we can reuse code. • But for components to be easily extended, we need pure components (the same input generates the same output).
- 29. PURE COMPONENTS INREACT
- 30. HOW DO WEUSE THEM?
- 31. HOW TO USECUSTOMIZABLE REACT COMPONENTS • You can pass state from parent to child using the props system, by passing those down and accessing them on the child component. • Easy exporting and importing.
- 32.
- 33. EASY INSERTION INTOPARENT COMPONENT
- 34. FUNCTIONAL COMPONENTS INVUE • Vue uses templates, so its easy to see where your html, javascript, and css lay. • They are all on one page, so anyone can reference them. • Styles are scoped so they don’t leak out into global scope. • Easy to reference, and easy to change with computed and data components. • Easy to pass props into.
- 35. WRAP UP • Byusing “functional” CSS, we can lower technical debt and make code more maintainable and easier for developers, present and future to reason with. • Just because CSS allows us many different ways to select the same code, it doesn’t mean we should. • Picking and choosing logical features and discarding the non-obvious ones will make developers more productive. • Functional Javascript components are easily extensible and, if coded properly, will lower the amount of code written in the future. • It’s important to get started on seeing features which come up often and writing generalized components that suit those needs. • Frameworks give the developer a lot more control over their code than normal javascript— with lifecycle methods, computed properties, data, methods, props, etc – all serve to make the developer’s User Experience better.