Frameworkless Frontend Development
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871951/logo_extrategy_fondo_blu_trasp_1_.png)
Why do we use frameworks?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
Reinventing the square wheel
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
Photo by Dakota Corbin on Unsplash
By Falk2 (Own work) [CC BY-SA 4.0], via Wikimedia Commons
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
Every framework you’ve ever seen is really just an echo of this statement:
My language sucks!
Robert C. Martin (Uncle Bob)
I ❤️️ JavaScript
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/4154307/Screen_Shot_2017-09-23_at_14.44.05.png)
Ehi guys, if I would need to have data binding without using Angular/React or whatever, what do you suggest?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/4154347/meme1.jpeg)
Welcome Frameworkless!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
Talk is cheap, show me the code
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
Linus Torvalds
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/4771638/277hhj.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
What is Frameworkless?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/4159222/meme.jpeg)
In a nutshell...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
Frameworkless means to learn how to code without frameworks, learning from frameworks themselves
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
And to add a "No Framework" option on the table everytime that we need to start a new project or feature
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
And when using a framework, don't think that the "Framework way" is the only way
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/4154457/image.jpg)
Emergent Design
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
...architectures should be driven by the underlying technical requirements of the system, rather than speculative planning for a future that may change.
Thoughtworks Technology Radar
The right architecture should be defined by your features...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
Let the need for a framework to emerge
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
How to choose then?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
Context is Everything
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
How is more important then What
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
Non-functional requirement
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
accessibility
accountability
accuracy
adaptability
administrability
affordability
agility
auditability
autonomy
availability
compatibility
composability
configurability
correctness
credibility
customizability
debugability
degradability
demonstrability
dependability
deployability
determinability
discoverability
distributability
durability
effectiveness
efficiency
extensibility
fault tolerance
fidelity
flexibility
inspectability
installability
integrity
interoperability
learnability
maintainability
manageability
mobility
modifiability
modularity
operability
orthogonality
performances
portability
precision
predictability
process capabilities
producibility
provability
recoverability
recoverability
relevance
reliability
repeatability
reproducibility
resilience
responsiveness
reusability
robustness
safety
scalability
seamlessness
securability
self-sustainability
serviceability
simplicity
stability
standards compliance
survivability
sustainability
tailorability
testability
timeliness
traceability
transparency
usability
wow effect
Framework Compass Radar
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
Introducing...
Choose a small set of NFR and put them on a Radar Chart...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
![](https://cdn-images-1.medium.com/max/1600/1*RAdzPnipwpm19sPMWbUvOw.png)
All members of the team should fill the chart
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
![](https://cdn-images-1.medium.com/max/1600/1*gdoQGNGEobhoDwAcBtB8tQ.png)
Try to choose a framework / library that matches the values of the Chart
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
The importance is in the discussion itself, not in the tool
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
Longevity > Velocity
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
Longevity < Velocity
Tech decisions are not just about the code...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
...but it's also about people!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
Programming is a social activity
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
Uncle Bob
One More Thing...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
Frameworkless Movement
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
Get Involved
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
Thanks
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2779824/profilo001.jpg)
f.strazzullo@extrategy.net
@TheStrazz86
https://github.com/francesco-strazzullo
https://medium.com/@TheStrazz86
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
https://slides.com/francescostrazzullo