SlideShare a Scribd company logo
Frontend development
approaches that reduce the risks
of project failure
Viktor Turskyi
JavaScript fwdays’24
● 20 years in IT
● 13 years in software business
● Delivered more than 80 projects of
different scale
● Did 15 projects for 5 companies from
Fortune 500 list
● 3 years at Google
● youtube.com/@AboutProgramming
Is High Quality Software Worth
the Cost?
JavaScript fwdays’24
Do we need architecture for
frontend?
JavaScript fwdays’24
“If you think good architecture is
expensive, try bad architecture.”
—Brian Foote and Joseph Yoder
JavaScript fwdays’24
What is most popular
architecture today?
JavaScript fwdays’24
Big Ball of Mud
http://www.laputan.org/mud/mud.html#BigBallOfMud
JavaScript fwdays’24
JavaScript fwdays’24
Source: https://martinfowler.com/articles/is-quality-worth-cost.html
JavaScript fwdays’24
Source: https://martinfowler.com/articles/is-quality-worth-cost.html
What is the best architectural
decision?
JavaScript fwdays’24
Robert Martin
“The job of architect is not to make decision, the
job of the architect is to defer decisions as long
as possible”
“Good architecture maximizes number of
decisions not made”
https://www.youtube.com/watch?v=o_TH-Y78tt4
JavaScript fwdays’24
How can we make better
architectural decisions?
JavaScript fwdays’24
Solution is in technical domain
but problem statement in
business/product domain.
JavaScript fwdays’24
Understand business/product
domain. Focus on business
problems
JavaScript fwdays’24
Why to understand domain?
● Problems you solve comes from domain. Otherwise you will solve wrong problems.
● Requirements (including non functional) comes from domain.
● Creating good Domain Model requires understanding the domain
● Simplifies communication with stakeholders (you talk to them using their
language)
● Simplifies adding new changes
● Psychological comfort. Engineers prefer to write products that they understand.
JavaScript fwdays’24
Conduct business/product
trainings
JavaScript fwdays’24
Universal approach for better decisions
1. Always ask yourself “What problem do we want to solve?”
2. Find several potential solutions (not all possible, two can be enough)
3. Select the best solution for your problem
Let’s discuss problem microservices case again.
JavaScript fwdays’24
How to make “better” design?
● Understand business/product domain
● Understand technologies deeply
● Optimize for change
● Assemble first
● Think about abstractions
JavaScript fwdays’24
Why to understand technologies deeply?
● You cannot choose right technologies without knowing their properties
● You cannot know their properties without knowing implementation details
What will happen to DB if you will increase amount of data 10 times? Can you answer
that without knowing how indexes work?
Docker vs VMs? What are the properties? (Why docker is slow on OSX?)
Is MongoID secure as a token for password recovery?
React Native is native or not native?
JavaScript fwdays’24
Optimize for
change
One of Agile Manifesto principles:
Welcome changing requirements, even late in
development. Agile processes harness change
for the customer's competitive advantage.
https://agilemanifesto.org/principles.html
JavaScript fwdays’24
How to optimize for change?
● Do not write code which support everything. In this case, the result will be
opposite.
● Expect changes! Evaluate risks
● Simplify (simplicity and easiness is not the same, “Simple made easy”)!
● Good abstraction but without overengineering. Reduce coupling, increase
cohesion.
● Stay in touch with product managers (while you developing A they are already
thinking about B)
JavaScript fwdays’24
Can we predict future?
JavaScript fwdays’24
Talk to product managers - they
live in future
JavaScript fwdays’24
Assemble first principle
JavaScript fwdays’24
https://webbylab.com/cases/mercedes/
JavaScript fwdays’24
How to organize work on this?
JavaScript fwdays’24
What does it mean to assemble first?
● Create abstractions
● Think about data which goes through your system
● Implement behaviour just with simple boxes
● Iteratively add details to each box
JavaScript fwdays’24
Why to assemble first?
● You will have abstractions of components that really fit each other
● You will have end-to-end working functionality early to and will get early feedback
● Feature owners can test their own pieces in fully working environment
● You can discover risks as earlier
● Early integration becomes possible
● Much easier to parallelize the work
● Not having time to deliver 100% will allow you to compromise on some visuals
than on end-to-end experience for case when you assemble at the very end
JavaScript fwdays’24
https://blog.udemy.com/how-to-draw-a-realistic-cat-step-by-step/
JavaScript fwdays’24
https://blog.udemy.com/how-to-draw-a-realistic-cat-step-by-step/
JavaScript fwdays’24
Does it guarantee success? No!
JavaScript fwdays’24
Priorities/Commitment
P0 - must
P1 - should
P2 - might
JavaScript fwdays’24
https://blog.udemy.com/how-to-draw-a-realistic-cat-step-by-step/
P0, P1, P2 P0, P1
P0
JavaScript fwdays’24
Abstractions
JavaScript fwdays’24
What are good abstractions
● They are usable. Think how they will be used while designing them
● You can understand them. You should be able to predict system behaviour
● You should know where to put specific code
● Tests are just statistical proofs that something is working
● They are not dependent on context
● Low coupling
● High cohesion
JavaScript fwdays’24
Developes are afraid of new abstractions
● Story about Test factory and assertDate method
● Story about Controllers/Mediators/Managers in UI
● Story about Extra behaviour in slides engine
● Story about Builders for UI components
● etc
JavaScript fwdays’24
Level editors concept
JavaScript fwdays’24
Universal toolkits
JavaScript fwdays’24
Builders
JavaScript fwdays’24
Type of builders
● Form Builder
● Dialog Builder
● Grid Builder
● Page Builder
JavaScript fwdays’24
Form builder schema
{
api: { load: (id) => {} , save: (data) => {}},
inputs: [
{field: ‘name’, type: ‘text’, label: ‘Name’}
],
}
JavaScript fwdays’24
Form builder
function UserEditForm({id}) {
const schema = {...}
return <FormBuilder schema={schema} />
}
JavaScript fwdays’24
Dialog builder
function UserEditDialog({id}) {
const schema = {
title: ‘Edit dialog’,
formSchema: {}
}
return <DialogBuilder schema={schema} />
}
JavaScript fwdays’24
Grid builder schema
source: { list: Promise.resolve(data)},
columns: [
{field: ‘id’, type: ‘id’, label: ‘Id’},
{field: ‘name’, type: ‘url’, label: ‘Name’, urlFormatter: (user) => `/users/${user.id}`}
],
rowActions: [
{icon: <DeleteIcon />, label: ‘Delete’, confirm: true },
{icon: <EditIcon />, label: ‘Edit’, action: (row) => {
dialogService.open(UserEditDialog, {id: row.id})
}],
JavaScript fwdays’24
Grid builder
function UsersGrid() {
const schema = {...}
return <GridBulder schema={schema} />
}
JavaScript fwdays’24
Page builder
{
title: ‘users’,
layout: {component: MainLayout, props: {selected: ‘users’} },
gridSchema: {...},
}
JavaScript fwdays’24
Builders pros
● You have consistent behaviour across your UI
● Increases development speed a lot
● Can be iteratively updated each time you have a new requirement
● Easier to design
● Minimum extra time for development as the features should be done in any case
JavaScript fwdays’24
Is technical debt a bad thing?
JavaScript fwdays’24
Some thoughts on technical debt
● Doing things the quick and dirty way sets us up with a “technical debt”, which is
similar to a financial debt.
● Another metaphor is “Pollution”. Pollutants gradually affect people and as time
passes by, makes it exponentially harder and costly to fix it.
● You can't cook food without dirtying the dishes. Clean the kitchen after cooking
● You introduce technical debt even if all you do is just write similar code.
JavaScript fwdays’24
Some thoughts on patterns and best
practices
Pattern is just a common solution (not a secret solution) which works for a common
problem.
Ask yourself why such pattern or best practice does exist and be ready to not follow it if
this “why” is not related to your case.
JavaScript fwdays’24
Chat example
Let’s design together
JavaScript fwdays’24
@turskyi
Viktor
Turskyi
Thank you

More Related Content

Similar to "Impact of front-end architecture on development cost", Viktor Turskyi

Business of Front-end Web Development
Business of Front-end Web DevelopmentBusiness of Front-end Web Development
Business of Front-end Web Development
Rachel Andrew
 
Pain Driven Development by Alexandr Sugak
Pain Driven Development by Alexandr SugakPain Driven Development by Alexandr Sugak
Pain Driven Development by Alexandr Sugak
Sigma Software
 
MongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch TutorialMongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB
 
JSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontendJSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontend
Vlad Fedosov
 
Designing with Code
Designing with CodeDesigning with Code
Designing with Code
Adityo Pratomo
 
Lean frontend development
Lean frontend developmentLean frontend development
Lean frontend development
Matteo Guidotto
 
A modern architecturereview–usingcodereviewtools-ver-3.5
A modern architecturereview–usingcodereviewtools-ver-3.5A modern architecturereview–usingcodereviewtools-ver-3.5
A modern architecturereview–usingcodereviewtools-ver-3.5
SSW
 
Advanced Techniques for Testing Responsive Apps and Sites -- By Aakrit Prasad
 Advanced Techniques for Testing Responsive Apps and Sites -- By Aakrit Prasad Advanced Techniques for Testing Responsive Apps and Sites -- By Aakrit Prasad
Advanced Techniques for Testing Responsive Apps and Sites -- By Aakrit Prasad
Applitools
 
DDD in Pixel Federation v1 | TechForce Meetup vol.3
DDD in Pixel Federation v1 | TechForce Meetup vol.3DDD in Pixel Federation v1 | TechForce Meetup vol.3
DDD in Pixel Federation v1 | TechForce Meetup vol.3
Pixel Federation
 
JavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web frameworkJavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web framework
Alive Kuo
 
The art and pain of teaching JavaScript
The art and pain of teaching JavaScriptThe art and pain of teaching JavaScript
The art and pain of teaching JavaScript
Christian Heilmann
 
Strangle The Monolith: A Data Driven Approach
Strangle The Monolith: A Data Driven ApproachStrangle The Monolith: A Data Driven Approach
Strangle The Monolith: A Data Driven Approach
VMware Tanzu
 
Implementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing CompanyImplementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing Company
Marcos Labad
 
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch TutorialMongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB
 
Single Page Applications – Know The Ecosystem system
Single Page Applications – Know The Ecosystem systemSingle Page Applications – Know The Ecosystem system
Single Page Applications – Know The Ecosystem system
Synerzip
 
GDayX - Advanced Angular.JS
GDayX - Advanced Angular.JSGDayX - Advanced Angular.JS
GDayX - Advanced Angular.JS
Nicolas Embleton
 
Going web native
Going web nativeGoing web native
Going web native
Marcus Hellberg
 
Build and Deploy a Python Web App to Amazon in 30 Mins
Build and Deploy a Python Web App to Amazon in 30 MinsBuild and Deploy a Python Web App to Amazon in 30 Mins
Build and Deploy a Python Web App to Amazon in 30 Mins
Jeff Hull
 
Nicolas Embleton, Advanced Angular JS
Nicolas Embleton, Advanced Angular JSNicolas Embleton, Advanced Angular JS
Nicolas Embleton, Advanced Angular JS
JavaScript Meetup HCMC
 
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JSFestUA
 

Similar to "Impact of front-end architecture on development cost", Viktor Turskyi (20)

Business of Front-end Web Development
Business of Front-end Web DevelopmentBusiness of Front-end Web Development
Business of Front-end Web Development
 
Pain Driven Development by Alexandr Sugak
Pain Driven Development by Alexandr SugakPain Driven Development by Alexandr Sugak
Pain Driven Development by Alexandr Sugak
 
MongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch TutorialMongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch Tutorial
 
JSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontendJSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontend
 
Designing with Code
Designing with CodeDesigning with Code
Designing with Code
 
Lean frontend development
Lean frontend developmentLean frontend development
Lean frontend development
 
A modern architecturereview–usingcodereviewtools-ver-3.5
A modern architecturereview–usingcodereviewtools-ver-3.5A modern architecturereview–usingcodereviewtools-ver-3.5
A modern architecturereview–usingcodereviewtools-ver-3.5
 
Advanced Techniques for Testing Responsive Apps and Sites -- By Aakrit Prasad
 Advanced Techniques for Testing Responsive Apps and Sites -- By Aakrit Prasad Advanced Techniques for Testing Responsive Apps and Sites -- By Aakrit Prasad
Advanced Techniques for Testing Responsive Apps and Sites -- By Aakrit Prasad
 
DDD in Pixel Federation v1 | TechForce Meetup vol.3
DDD in Pixel Federation v1 | TechForce Meetup vol.3DDD in Pixel Federation v1 | TechForce Meetup vol.3
DDD in Pixel Federation v1 | TechForce Meetup vol.3
 
JavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web frameworkJavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web framework
 
The art and pain of teaching JavaScript
The art and pain of teaching JavaScriptThe art and pain of teaching JavaScript
The art and pain of teaching JavaScript
 
Strangle The Monolith: A Data Driven Approach
Strangle The Monolith: A Data Driven ApproachStrangle The Monolith: A Data Driven Approach
Strangle The Monolith: A Data Driven Approach
 
Implementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing CompanyImplementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing Company
 
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch TutorialMongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
 
Single Page Applications – Know The Ecosystem system
Single Page Applications – Know The Ecosystem systemSingle Page Applications – Know The Ecosystem system
Single Page Applications – Know The Ecosystem system
 
GDayX - Advanced Angular.JS
GDayX - Advanced Angular.JSGDayX - Advanced Angular.JS
GDayX - Advanced Angular.JS
 
Going web native
Going web nativeGoing web native
Going web native
 
Build and Deploy a Python Web App to Amazon in 30 Mins
Build and Deploy a Python Web App to Amazon in 30 MinsBuild and Deploy a Python Web App to Amazon in 30 Mins
Build and Deploy a Python Web App to Amazon in 30 Mins
 
Nicolas Embleton, Advanced Angular JS
Nicolas Embleton, Advanced Angular JSNicolas Embleton, Advanced Angular JS
Nicolas Embleton, Advanced Angular JS
 
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
 

More from Fwdays

"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
Fwdays
 
"Microservices and multitenancy - how to serve thousands of databases in one ...
"Microservices and multitenancy - how to serve thousands of databases in one ..."Microservices and multitenancy - how to serve thousands of databases in one ...
"Microservices and multitenancy - how to serve thousands of databases in one ...
Fwdays
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
Fwdays
 
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
Fwdays
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
Fwdays
 
"Black Monday: The Story of 5.5 Hours of Downtime", Dmytro Dziubenko
"Black Monday: The Story of 5.5 Hours of Downtime", Dmytro Dziubenko"Black Monday: The Story of 5.5 Hours of Downtime", Dmytro Dziubenko
"Black Monday: The Story of 5.5 Hours of Downtime", Dmytro Dziubenko
Fwdays
 
"Reaching 3_000_000 HTTP requests per second — conclusions from participation...
"Reaching 3_000_000 HTTP requests per second — conclusions from participation..."Reaching 3_000_000 HTTP requests per second — conclusions from participation...
"Reaching 3_000_000 HTTP requests per second — conclusions from participation...
Fwdays
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
Fwdays
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
"What I learned through reverse engineering", Yuri Artiukh
"What I learned through reverse engineering", Yuri Artiukh"What I learned through reverse engineering", Yuri Artiukh
"What I learned through reverse engineering", Yuri Artiukh
Fwdays
 
"Micro frontends: Unbelievably true life story", Dmytro Pavlov
"Micro frontends: Unbelievably true life story", Dmytro Pavlov"Micro frontends: Unbelievably true life story", Dmytro Pavlov
"Micro frontends: Unbelievably true life story", Dmytro Pavlov
Fwdays
 
"Objects validation and comparison using runtime types (io-ts)", Oleksandr Suhak
"Objects validation and comparison using runtime types (io-ts)", Oleksandr Suhak"Objects validation and comparison using runtime types (io-ts)", Oleksandr Suhak
"Objects validation and comparison using runtime types (io-ts)", Oleksandr Suhak
Fwdays
 
"JavaScript. Standard evolution, when nobody cares", Roman Savitskyi
"JavaScript. Standard evolution, when nobody cares", Roman Savitskyi"JavaScript. Standard evolution, when nobody cares", Roman Savitskyi
"JavaScript. Standard evolution, when nobody cares", Roman Savitskyi
Fwdays
 
"How Preply reduced ML model development time from 1 month to 1 day",Yevhen Y...
"How Preply reduced ML model development time from 1 month to 1 day",Yevhen Y..."How Preply reduced ML model development time from 1 month to 1 day",Yevhen Y...
"How Preply reduced ML model development time from 1 month to 1 day",Yevhen Y...
Fwdays
 
"GenAI Apps: Our Journey from Ideas to Production Excellence",Danil Topchii
"GenAI Apps: Our Journey from Ideas to Production Excellence",Danil Topchii"GenAI Apps: Our Journey from Ideas to Production Excellence",Danil Topchii
"GenAI Apps: Our Journey from Ideas to Production Excellence",Danil Topchii
Fwdays
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
Fwdays
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
Fwdays
 
"What is a RAG system and how to build it",Dmytro Spodarets
"What is a RAG system and how to build it",Dmytro Spodarets"What is a RAG system and how to build it",Dmytro Spodarets
"What is a RAG system and how to build it",Dmytro Spodarets
Fwdays
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
Fwdays
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
Fwdays
 

More from Fwdays (20)

"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
 
"Microservices and multitenancy - how to serve thousands of databases in one ...
"Microservices and multitenancy - how to serve thousands of databases in one ..."Microservices and multitenancy - how to serve thousands of databases in one ...
"Microservices and multitenancy - how to serve thousands of databases in one ...
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
 
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
 
"Black Monday: The Story of 5.5 Hours of Downtime", Dmytro Dziubenko
"Black Monday: The Story of 5.5 Hours of Downtime", Dmytro Dziubenko"Black Monday: The Story of 5.5 Hours of Downtime", Dmytro Dziubenko
"Black Monday: The Story of 5.5 Hours of Downtime", Dmytro Dziubenko
 
"Reaching 3_000_000 HTTP requests per second — conclusions from participation...
"Reaching 3_000_000 HTTP requests per second — conclusions from participation..."Reaching 3_000_000 HTTP requests per second — conclusions from participation...
"Reaching 3_000_000 HTTP requests per second — conclusions from participation...
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
"What I learned through reverse engineering", Yuri Artiukh
"What I learned through reverse engineering", Yuri Artiukh"What I learned through reverse engineering", Yuri Artiukh
"What I learned through reverse engineering", Yuri Artiukh
 
"Micro frontends: Unbelievably true life story", Dmytro Pavlov
"Micro frontends: Unbelievably true life story", Dmytro Pavlov"Micro frontends: Unbelievably true life story", Dmytro Pavlov
"Micro frontends: Unbelievably true life story", Dmytro Pavlov
 
"Objects validation and comparison using runtime types (io-ts)", Oleksandr Suhak
"Objects validation and comparison using runtime types (io-ts)", Oleksandr Suhak"Objects validation and comparison using runtime types (io-ts)", Oleksandr Suhak
"Objects validation and comparison using runtime types (io-ts)", Oleksandr Suhak
 
"JavaScript. Standard evolution, when nobody cares", Roman Savitskyi
"JavaScript. Standard evolution, when nobody cares", Roman Savitskyi"JavaScript. Standard evolution, when nobody cares", Roman Savitskyi
"JavaScript. Standard evolution, when nobody cares", Roman Savitskyi
 
"How Preply reduced ML model development time from 1 month to 1 day",Yevhen Y...
"How Preply reduced ML model development time from 1 month to 1 day",Yevhen Y..."How Preply reduced ML model development time from 1 month to 1 day",Yevhen Y...
"How Preply reduced ML model development time from 1 month to 1 day",Yevhen Y...
 
"GenAI Apps: Our Journey from Ideas to Production Excellence",Danil Topchii
"GenAI Apps: Our Journey from Ideas to Production Excellence",Danil Topchii"GenAI Apps: Our Journey from Ideas to Production Excellence",Danil Topchii
"GenAI Apps: Our Journey from Ideas to Production Excellence",Danil Topchii
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
"What is a RAG system and how to build it",Dmytro Spodarets
"What is a RAG system and how to build it",Dmytro Spodarets"What is a RAG system and how to build it",Dmytro Spodarets
"What is a RAG system and how to build it",Dmytro Spodarets
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 

Recently uploaded

Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
saastr
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Alpen-Adria-Universität
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptxPublic CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
marufrahmanstratejm
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 

Recently uploaded (20)

Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptxPublic CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 

"Impact of front-end architecture on development cost", Viktor Turskyi

  • 1. Frontend development approaches that reduce the risks of project failure Viktor Turskyi
  • 2. JavaScript fwdays’24 ● 20 years in IT ● 13 years in software business ● Delivered more than 80 projects of different scale ● Did 15 projects for 5 companies from Fortune 500 list ● 3 years at Google ● youtube.com/@AboutProgramming
  • 3. Is High Quality Software Worth the Cost? JavaScript fwdays’24
  • 4. Do we need architecture for frontend? JavaScript fwdays’24
  • 5.
  • 6. “If you think good architecture is expensive, try bad architecture.” —Brian Foote and Joseph Yoder JavaScript fwdays’24
  • 7. What is most popular architecture today? JavaScript fwdays’24
  • 8. Big Ball of Mud http://www.laputan.org/mud/mud.html#BigBallOfMud JavaScript fwdays’24
  • 11. What is the best architectural decision? JavaScript fwdays’24
  • 12. Robert Martin “The job of architect is not to make decision, the job of the architect is to defer decisions as long as possible” “Good architecture maximizes number of decisions not made” https://www.youtube.com/watch?v=o_TH-Y78tt4 JavaScript fwdays’24
  • 13. How can we make better architectural decisions? JavaScript fwdays’24
  • 14. Solution is in technical domain but problem statement in business/product domain. JavaScript fwdays’24
  • 15. Understand business/product domain. Focus on business problems JavaScript fwdays’24
  • 16. Why to understand domain? ● Problems you solve comes from domain. Otherwise you will solve wrong problems. ● Requirements (including non functional) comes from domain. ● Creating good Domain Model requires understanding the domain ● Simplifies communication with stakeholders (you talk to them using their language) ● Simplifies adding new changes ● Psychological comfort. Engineers prefer to write products that they understand. JavaScript fwdays’24
  • 18. Universal approach for better decisions 1. Always ask yourself “What problem do we want to solve?” 2. Find several potential solutions (not all possible, two can be enough) 3. Select the best solution for your problem Let’s discuss problem microservices case again. JavaScript fwdays’24
  • 19. How to make “better” design? ● Understand business/product domain ● Understand technologies deeply ● Optimize for change ● Assemble first ● Think about abstractions JavaScript fwdays’24
  • 20. Why to understand technologies deeply? ● You cannot choose right technologies without knowing their properties ● You cannot know their properties without knowing implementation details What will happen to DB if you will increase amount of data 10 times? Can you answer that without knowing how indexes work? Docker vs VMs? What are the properties? (Why docker is slow on OSX?) Is MongoID secure as a token for password recovery? React Native is native or not native? JavaScript fwdays’24
  • 21. Optimize for change One of Agile Manifesto principles: Welcome changing requirements, even late in development. Agile processes harness change for the customer's competitive advantage. https://agilemanifesto.org/principles.html JavaScript fwdays’24
  • 22. How to optimize for change? ● Do not write code which support everything. In this case, the result will be opposite. ● Expect changes! Evaluate risks ● Simplify (simplicity and easiness is not the same, “Simple made easy”)! ● Good abstraction but without overengineering. Reduce coupling, increase cohesion. ● Stay in touch with product managers (while you developing A they are already thinking about B) JavaScript fwdays’24
  • 23. Can we predict future? JavaScript fwdays’24
  • 24. Talk to product managers - they live in future JavaScript fwdays’24
  • 27.
  • 28.
  • 29.
  • 30. How to organize work on this? JavaScript fwdays’24
  • 31. What does it mean to assemble first? ● Create abstractions ● Think about data which goes through your system ● Implement behaviour just with simple boxes ● Iteratively add details to each box JavaScript fwdays’24
  • 32. Why to assemble first? ● You will have abstractions of components that really fit each other ● You will have end-to-end working functionality early to and will get early feedback ● Feature owners can test their own pieces in fully working environment ● You can discover risks as earlier ● Early integration becomes possible ● Much easier to parallelize the work ● Not having time to deliver 100% will allow you to compromise on some visuals than on end-to-end experience for case when you assemble at the very end JavaScript fwdays’24
  • 35. Does it guarantee success? No! JavaScript fwdays’24
  • 36. Priorities/Commitment P0 - must P1 - should P2 - might JavaScript fwdays’24
  • 39. What are good abstractions ● They are usable. Think how they will be used while designing them ● You can understand them. You should be able to predict system behaviour ● You should know where to put specific code ● Tests are just statistical proofs that something is working ● They are not dependent on context ● Low coupling ● High cohesion JavaScript fwdays’24
  • 40. Developes are afraid of new abstractions ● Story about Test factory and assertDate method ● Story about Controllers/Mediators/Managers in UI ● Story about Extra behaviour in slides engine ● Story about Builders for UI components ● etc JavaScript fwdays’24
  • 44. Type of builders ● Form Builder ● Dialog Builder ● Grid Builder ● Page Builder JavaScript fwdays’24
  • 45. Form builder schema { api: { load: (id) => {} , save: (data) => {}}, inputs: [ {field: ‘name’, type: ‘text’, label: ‘Name’} ], } JavaScript fwdays’24
  • 46. Form builder function UserEditForm({id}) { const schema = {...} return <FormBuilder schema={schema} /> } JavaScript fwdays’24
  • 47. Dialog builder function UserEditDialog({id}) { const schema = { title: ‘Edit dialog’, formSchema: {} } return <DialogBuilder schema={schema} /> } JavaScript fwdays’24
  • 48. Grid builder schema source: { list: Promise.resolve(data)}, columns: [ {field: ‘id’, type: ‘id’, label: ‘Id’}, {field: ‘name’, type: ‘url’, label: ‘Name’, urlFormatter: (user) => `/users/${user.id}`} ], rowActions: [ {icon: <DeleteIcon />, label: ‘Delete’, confirm: true }, {icon: <EditIcon />, label: ‘Edit’, action: (row) => { dialogService.open(UserEditDialog, {id: row.id}) }], JavaScript fwdays’24
  • 49. Grid builder function UsersGrid() { const schema = {...} return <GridBulder schema={schema} /> } JavaScript fwdays’24
  • 50. Page builder { title: ‘users’, layout: {component: MainLayout, props: {selected: ‘users’} }, gridSchema: {...}, } JavaScript fwdays’24
  • 51. Builders pros ● You have consistent behaviour across your UI ● Increases development speed a lot ● Can be iteratively updated each time you have a new requirement ● Easier to design ● Minimum extra time for development as the features should be done in any case JavaScript fwdays’24
  • 52. Is technical debt a bad thing? JavaScript fwdays’24
  • 53. Some thoughts on technical debt ● Doing things the quick and dirty way sets us up with a “technical debt”, which is similar to a financial debt. ● Another metaphor is “Pollution”. Pollutants gradually affect people and as time passes by, makes it exponentially harder and costly to fix it. ● You can't cook food without dirtying the dishes. Clean the kitchen after cooking ● You introduce technical debt even if all you do is just write similar code. JavaScript fwdays’24
  • 54. Some thoughts on patterns and best practices Pattern is just a common solution (not a secret solution) which works for a common problem. Ask yourself why such pattern or best practice does exist and be ready to not follow it if this “why” is not related to your case. JavaScript fwdays’24
  • 55. Chat example Let’s design together JavaScript fwdays’24