Taming complexity in JavaScript
-
Upload
binary-studio -
Category
Software
-
view
91 -
download
1
Transcript of Taming complexity in JavaScript
![Page 1: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/1.jpg)
Taming complexity in JavaScriptMykyta Semenistyi
![Page 2: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/2.jpg)
Mykyta Semenistyi
@msemenistyi
Tech LeadBinaryStudio
http://www.binary-studio.com/
![Page 3: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/3.jpg)
![Page 4: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/4.jpg)
C# JS
Enterprise Startup
![Page 5: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/5.jpg)
The art of programming is the art of organizing complexity, of mastering multitude and avoiding its bastard chaos as effectively as possible.
Edsger W. Dijkstra
![Page 6: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/6.jpg)
Ubiquitous state
![Page 7: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/7.jpg)
Managing state is hard
Server responsesCached dataLocally generated dataUI data
![Page 8: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/8.jpg)
jQuery
![Page 9: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/9.jpg)
AngularChild Controller + Parent controllers chain
Markup
![Page 10: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/10.jpg)
Flux -> Redux
![Page 11: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/11.jpg)
Immutability
reducer (oldState) -> newState
![Page 12: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/12.jpg)
Pure functions
![Page 13: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/13.jpg)
Pure functions
![Page 14: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/14.jpg)
Asynchronicity
![Page 15: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/15.jpg)
![Page 16: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/16.jpg)
UI Thread
...onclick XHR state change
setTimeout setInterval
onclick XHR state change
setTimeout
Event Loop
![Page 17: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/17.jpg)
Callback hell
![Page 18: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/18.jpg)
Async
![Page 19: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/19.jpg)
Async
![Page 20: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/20.jpg)
Promises
![Page 21: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/21.jpg)
Promises
![Page 22: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/22.jpg)
GeneratorsOutput ->
<- Input
![Page 23: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/23.jpg)
Generators - Coroutines
![Page 24: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/24.jpg)
Async await
![Page 25: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/25.jpg)
API implicitness
![Page 26: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/26.jpg)
Implementation implicitness
Digest loops
Directives
Scope inheritance
![Page 27: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/27.jpg)
DSL - Webpack
![Page 28: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/28.jpg)
![Page 29: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/29.jpg)
Inheritance
Favor aggregation over inheritance Go
F
![Page 30: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/30.jpg)
Custom implementations
![Page 31: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/31.jpg)
![Page 32: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/32.jpg)
![Page 33: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/33.jpg)
leftpad
![Page 34: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/34.jpg)
Outtakes
There are people behind npm modules
People happen to be assholes
Npm has fixed the issue within hours
Npm has updated its policy of unpublishing
![Page 35: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/35.jpg)
![Page 36: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/36.jpg)
Why?
Waste of time
High probability of bugs
No bugfixes and upgrades from others
![Page 37: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/37.jpg)
Selecting tools
Be aware
Avoid JavaScript fatigue
Consider ecosystem
![Page 38: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/38.jpg)
![Page 39: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/39.jpg)
Signal vs NoisejQuery - DOM API Backbone - UI Architecture
![Page 40: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/40.jpg)
Code inconsistency
![Page 41: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/41.jpg)
CoffeeScript
![Page 42: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/42.jpg)
TypeScript
![Page 43: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/43.jpg)
ES2015
![Page 44: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/44.jpg)
Linters
![Page 45: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/45.jpg)
Flow
![Page 46: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/46.jpg)
BE CONSISTENT.
If you're editing code, take a few minutes to look at the code around you and determine its style. If they use spaces around all their arithmetic operators, you should too. If their comments have little boxes of hash marks around them, make your comments have little boxes of hash marks around them too.
Google JS Styleguide
![Page 47: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/47.jpg)
Recap
Tame state
Use modern approaches for asynchronicity
Prefer composition
Don’t try to invent you language - use JS
Utilize what others have created
Choose tools wisely
Use tools if necessary
Love JS
![Page 48: Taming complexity in JavaScript](https://reader035.fdocuments.us/reader035/viewer/2022062523/58f1987e1a28ab8d1a8b4591/html5/thumbnails/48.jpg)
yield ‘end’;