More Related Content
Similar to Declarativemagic
Similar to Declarativemagic (20)
Recently uploaded
Recently uploaded (20)
Declarativemagic
- 2. Introduction Feather Knee. Yes! It’s my real name! @featherart
- 3. Declarative vs Imperative Both are programming paradigms
- 4. Wait, paradigm? noun, 15th c. 1. A typical example or pattern of something, or an archetype. Synonyms: model, template, example
- 5. Programming Paradigm • A pattern for organizing code, either by execution model, or by state • Sometimes, but not always, language-specific
- 6. Some Paradigms • Imperative • Functional • Declarative • Object-oriented • Procedural
- 7. Pop Quiz! JavaScript can be used with the following paradigm: A. Procedural B. Object-oriented C. Functional D. All of the above
- 8. Pop Quiz! JavaScript can be used with the following paradigm: A. Procedural B. Object-oriented C. Functional D. All of the above
- 9. Such Flexible! Practical foundations, the duct tape of languages 🎉🎉🎉
- 10. Q: Best Way?
- 11. A: It depends
- 12. Different Goals Speed of execution 🏁 Efficient use of resources 🌵 Readability & ease of testing 👀
- 13. React • Declarative by design • Not first to have that idea
- 14. Declarative Logic of computation without description of control flow
- 15. Imperative Use of statements to change a program’s state Explicit control over flow
- 19. Better Way? • Both have same approximate runtime 🏁 • One is easier to read 👀
- 20. Q: How do I know They have approximately the same runtime?
- 21. A: Big O Analysis Under the hood, they both use a for-loop Iterate through an Array of N elements -> O(N)
- 22. Big O Analysis Runtimes of algorithms
- 23. Big O Analysis O (N) +- O (N)
- 24. Loose is ok Clean, readable code may leave yak slightly hairy!
- 25. But this is still bad Still a triple loop, even if you’re using Array methods O(N) O(N) O(N) O(N^3)
- 28. Big O? O(1) O(N)
- 29. Why So Speedy? Under the covers Set uses a Hash, so constant lookup!
- 30. 3 Array Methods .filter() => Array .map() => Array .reduce() => *
- 31. Pop Quiz! One of these almost became another Array method: A. .squiggle() B. .slurp() C. .smoosh() D. None of the above
- 32. Pop Quiz! One of these almost became another Array method: A. .squiggle() B. .slurp() C. .smoosh() D. None of the above
- 33. 3 Array Methods .filter() => Array .map() => Array .reduce() => *
- 34. Suppose you are … The sorting hat for a day
- 37. 3 Array Methods .filter() => Array .map() => Array .reduce() => *
- 38. Suppose you just … Get really excited about things for no apparent reason!!!
- 39. Map Imperatively
- 41. Fun Fact If you do a lot of React, map() will be your new BFF
- 42. mapping JSX elements onto an Array… Map!
- 43. JQuery • Direct manipulation of DOM elements • Every change in state is a refresh
- 44. React DOM never gets touched directly Focus on how UI should look at any given moment vs. how to change it over time (state)
- 45. Changing State key difference! paradigm: pattern for organizing code, either by execution model, or by state
- 46. What is State? • State of an application = the current value of any variables • Logged in to your bank account: currentUser = “Your Name”
- 47. Imperative UI Direct manipulation of DOM elements to reflect changes in state The horrors of old time string concatenation before we got template strings in ES6. Much appending!
- 48. Declarative UI Never directly touch DOM elements The horrors of old time string concatenation before we got template strings in ES6. set state DOM reflects change
- 49. To Summarize Declarative in general describes what, now how Set state to update DOM Goal of readability
- 50. Further ?s/comments Come see me on break! Reach out on Twitter @featherart I also wrote a Medium story plus GitHub repo with code samples https://goo.gl/H2FpJ4