SlideShare a Scribd company logo
@daloog#eatdog
Component Driven
…and modular UI code with
ViewModel
Alexey Demedetskyi
@daloog#eatdog
“Design is never done.”
@daloog#eatdog
@daloog#eatdog
Art
@daloog#eatdog
Art
Engineering
@daloog#eatdog
Art
Engineering
UI - ?
@daloog#eatdog
@daloog#eatdog
Driver?
@daloog#eatdog
Feedback loop
@daloog#eatdog
Definition of
done
@daloog#eatdog
Evolution?
@daloog#eatdog
Better result
@daloog#eatdog
Better tools
@daloog#eatdog
Art
Engineering
UI - ?
@daloog#eatdog
Art
Engineering
UI
@daloog#eatdog
UI is the hardest CS
problem
@daloog#eatdog
@daloog#eatdog
@daloog#eatdog
@daloog#eatdog
@daloog#eatdog
Zero* dependency** rule
* - not actually zero
** - internal is ok
@daloog#eatdog
Module
External
dependency
@daloog#eatdog
TDD?
@daloog#eatdog
@daloog#eatdog
Singletons
@daloog#eatdog
Parent is always
responsible for child
dependencies
@daloog#eatdog
Module
Internal
dependency
@daloog#eatdog
Module context always
should be external
@daloog#eatdog
Zero dependency
UI?
@daloog#eatdog
Component
UI
@daloog#eatdog
@daloog#eatdog
Action
@daloog#eatdog
VM == Props
@daloog#eatdog
MVVM
@daloog#eatdog
React
@daloog#eatdog
VM + Dynamic
Animations, partial updates, etc.
@daloog#eatdog
Deposit
Time
@daloog#eatdog
Deposit
Time
@daloog#eatdog
Deposit
Time
++ - - -
@daloog#eatdog
State = f(t)
@daloog#eatdog
Event = ΔState
@daloog#eatdog
State = ∫Event
@daloog#eatdog
@daloog#eatdog
CQRS
Event sourcing
@daloog#eatdog
@daloog#eatdog
Data driven
@daloog#eatdog
VM + Complexity
Containers, transition
@daloog#eatdog
m/@dan_abramov/smart-and-dumb-components-7ca2f9
@daloog#eatdog
FriendsList
VC
Friend VC
FriendsList
VM
Friend VM
@daloog#eatdog
@daloog#eatdog
@daloog#eatdog
Shared state
@daloog#eatdog
http://redux.js.org
@daloog#eatdog
Questions?
dalog@me.com

More Related Content

PPTX
Fractal test planning
PPTX
Beter code for better tests
PDF
Awesome application in 2014
PPTX
Data flow layer. Захарченко Артем
PDF
Выжить с помощью ООП. Максим Гопей
PDF
API в SAAS, с облаком и без: ресурсы, SLA, балансировка, расширяемость
PDF
Mapbox GL: как работают современные векторные карты
PDF
Принципы Solid на практике
Fractal test planning
Beter code for better tests
Awesome application in 2014
Data flow layer. Захарченко Артем
Выжить с помощью ООП. Максим Гопей
API в SAAS, с облаком и без: ресурсы, SLA, балансировка, расширяемость
Mapbox GL: как работают современные векторные карты
Принципы Solid на практике

Similar to View models for component driven (19)

PDF
ACM SIGCHI EICS-2019 Keynote. Quid, Pedro J. Molina
PDF
Think components. March 2017
PDF
A Graphical Way of Thinking About React Designs
PPTX
Data flow architecture of spa @ codibly [warning for open minds only]
PDF
Mobx Internals
PPTX
Software Development: Beyond Training wheels
PDF
Development principles in test automation!
PPTX
Compose Camp by GDSC NSUT
PDF
Domain-Driven Design
PPTX
Immutable Data and TypeScript in an Ember.js Application
PPT
Why do complex software application projects drag?
PDF
Writing Code for Humans, not Computers
PPTX
Koala component model (1)
PDF
Simon Brown: Software Architecture as Code at I T.A.K.E. Unconference 2015
PPT
A MDA-Compliant Environment for Developing User Interfaces of Information Sys...
PDF
JSDayIE 2019 - Vue distilled
PPTX
C4_Architecture_Diagrams_CE_Karunagappally.pptx
PDF
Think horizontally ood, ddd and bdd
PDF
Think horizontally @Codemotion
ACM SIGCHI EICS-2019 Keynote. Quid, Pedro J. Molina
Think components. March 2017
A Graphical Way of Thinking About React Designs
Data flow architecture of spa @ codibly [warning for open minds only]
Mobx Internals
Software Development: Beyond Training wheels
Development principles in test automation!
Compose Camp by GDSC NSUT
Domain-Driven Design
Immutable Data and TypeScript in an Ember.js Application
Why do complex software application projects drag?
Writing Code for Humans, not Computers
Koala component model (1)
Simon Brown: Software Architecture as Code at I T.A.K.E. Unconference 2015
A MDA-Compliant Environment for Developing User Interfaces of Information Sys...
JSDayIE 2019 - Vue distilled
C4_Architecture_Diagrams_CE_Karunagappally.pptx
Think horizontally ood, ddd and bdd
Think horizontally @Codemotion
Ad

More from EatDog (20)

PDF
Классифицируем текст в iOS без CoreML: как и зачем?
PDF
macOS app development for iOS devs: expand your horizons
PPTX
Dependency Injections in Kotlin
PDF
Быстрый в имплементации и в работе мониторинг с использованием ELK
PDF
Continuous integration / continuous delivery
PDF
Как мы экспериментируем в больших микросервисных системах
PDF
Отказоустойчивый Redis кластер
PDF
Кодстайл и насилие.
PDF
Refactor to Reactive With Spring 5 and Project Reactor
PDF
GraphQL: APIs the New Way.
PPTX
Большие проекты, архитектура и фреймворки.
PDF
Microservices in a Wild.
PDF
Dependency Rejection and TDD without Mocks
PPTX
Стероиды для Дотнетчика
PPTX
Domain Driven Design – просто о сложном.
PDF
OWASP: безопасное программирование на PHP.
PDF
Нельзя просто так взять и сделать версионирование API
PDF
Влияние UX на исходный код приложения. Валерий Сорокобатько
PPTX
Angular vs Angular 2 vs React. Сергей Александров
PPTX
Distributed Domain Driven Design with the help of Azure Reliable Actors
Классифицируем текст в iOS без CoreML: как и зачем?
macOS app development for iOS devs: expand your horizons
Dependency Injections in Kotlin
Быстрый в имплементации и в работе мониторинг с использованием ELK
Continuous integration / continuous delivery
Как мы экспериментируем в больших микросервисных системах
Отказоустойчивый Redis кластер
Кодстайл и насилие.
Refactor to Reactive With Spring 5 and Project Reactor
GraphQL: APIs the New Way.
Большие проекты, архитектура и фреймворки.
Microservices in a Wild.
Dependency Rejection and TDD without Mocks
Стероиды для Дотнетчика
Domain Driven Design – просто о сложном.
OWASP: безопасное программирование на PHP.
Нельзя просто так взять и сделать версионирование API
Влияние UX на исходный код приложения. Валерий Сорокобатько
Angular vs Angular 2 vs React. Сергей Александров
Distributed Domain Driven Design with the help of Azure Reliable Actors
Ad

Recently uploaded (20)

PDF
Claude Code: Everyone is a 10x Developer - A Comprehensive AI-Powered CLI Tool
PDF
Why TechBuilder is the Future of Pickup and Delivery App Development (1).pdf
PPTX
Introduction to Artificial Intelligence
PDF
Wondershare Filmora 15 Crack With Activation Key [2025
PDF
Design an Analysis of Algorithms II-SECS-1021-03
PDF
Which alternative to Crystal Reports is best for small or large businesses.pdf
PPTX
assetexplorer- product-overview - presentation
PPTX
Oracle E-Business Suite: A Comprehensive Guide for Modern Enterprises
PDF
Adobe Illustrator 28.6 Crack My Vision of Vector Design
PDF
SAP S4 Hana Brochure 3 (PTS SYSTEMS AND SOLUTIONS)
PDF
PTS Company Brochure 2025 (1).pdf.......
PDF
Odoo Companies in India – Driving Business Transformation.pdf
PDF
Adobe Premiere Pro 2025 (v24.5.0.057) Crack free
PDF
EN-Survey-Report-SAP-LeanIX-EA-Insights-2025.pdf
PDF
System and Network Administraation Chapter 3
PPTX
L1 - Introduction to python Backend.pptx
PPTX
Agentic AI Use Case- Contract Lifecycle Management (CLM).pptx
PPTX
history of c programming in notes for students .pptx
PPTX
ai tools demonstartion for schools and inter college
PDF
Digital Strategies for Manufacturing Companies
Claude Code: Everyone is a 10x Developer - A Comprehensive AI-Powered CLI Tool
Why TechBuilder is the Future of Pickup and Delivery App Development (1).pdf
Introduction to Artificial Intelligence
Wondershare Filmora 15 Crack With Activation Key [2025
Design an Analysis of Algorithms II-SECS-1021-03
Which alternative to Crystal Reports is best for small or large businesses.pdf
assetexplorer- product-overview - presentation
Oracle E-Business Suite: A Comprehensive Guide for Modern Enterprises
Adobe Illustrator 28.6 Crack My Vision of Vector Design
SAP S4 Hana Brochure 3 (PTS SYSTEMS AND SOLUTIONS)
PTS Company Brochure 2025 (1).pdf.......
Odoo Companies in India – Driving Business Transformation.pdf
Adobe Premiere Pro 2025 (v24.5.0.057) Crack free
EN-Survey-Report-SAP-LeanIX-EA-Insights-2025.pdf
System and Network Administraation Chapter 3
L1 - Introduction to python Backend.pptx
Agentic AI Use Case- Contract Lifecycle Management (CLM).pptx
history of c programming in notes for students .pptx
ai tools demonstartion for schools and inter college
Digital Strategies for Manufacturing Companies

View models for component driven