SlideShare a Scribd company logo
1 of 83
Download to read offline
Flexible UI Components
UI Development For a Multi-Framework World
@kbal11
kball@zendev.com
https://zendev.com
Implementing UI is
Easier Than Ever
Let’s remember how it
used to be…
How It Used To Be
• Tables for layout
• Hand-coded CSS IF YOU WERE LUCKY
• Spend a week on a site, and then another
week getting it to work on Internet Explorer
Photo Credit: http://dullneon.com/randomnotes/2016/07/goodbye-yahoo.html
Yahoo
GeoCities
Photo Credit: http://geocitiessites.com/soho/veranda/4103/
When I first learned
about Grid 960…
When I first learned about
Grid 960…
We’ve come a long
way…
Modern UI Frameworks
[ bootstrap image ]
But We’re Still Doing It Wrong
JS Ecosystem When Modern
Frameworks Emerged
(Pre 1.0!) (Barely 1.0!)
JS Ecosystem Today
UI Libraries Are Done Two Ways
The Bootstrap Way
• Naive to JS Frameworks
• Provide “Vanilla” Implementation
• Every JavaScript Framework gets
its own “port” (rewrite)
The Material Way
• Pick a JavaScript Framework
• Deep Integration with that JS
• Rewrite if needed for other
frameworks
The Result Is The Same
[ image of visual
inconsistencies]
Photo Credit: https://www.thisiswhyimbroke.com/warping-mirrors/
Marketing
Site
Web App Mobile
App
Environments Are Not
Consolidating
Marketing
Site
Web App
Mobile
App
Wordpress +
jQuery
Mobile
App
Web App
Wordpress +
jQuery
Mobile
App
React +
Redux
Wordpress +
jQuery
Ionic
(Angular)
React +
Redux
Environments Have
• Different DOM manipulation paradigms
• Different “natural” markup structures
• Different approaches to state
Environments Don’t Have
• Different User Expectations
• Different Branding Needs
We Can Do Better
About Me
• Lead of ZURB Foundation project
• Founder & President ZenDev, LLC
• Known to get a bit over-excited
about CSS and JavaScript
Photo Credit: ZURB
Just a little over-excited
About ZenDev
• Frontend Consulting - Strategy, Architecture, and all things
ZURB Foundation
• Team Training - ZURB Foundation
• Publishing Friday Frontend newsletter: 

https://zendev.com/friday-frontend.html
ZURB Foundation 7
ZURB Foundation 7
• Design Language Agnostic
• JavaScript Framework Agnostic
• “Flexible UI Components”
Design Goals
Flexible UI Components
Flexible UI Components
Components designed to be
adapted to any JS framework
Principles of Flexible UI
Components
• Components Should Be State Driven
• Coupling Should Be Event Driven
• Components Should Be “DOM Flexible”
• Components Should Be State Driven
• Coupling Should Be Event Driven
• Components Should Be “DOM Flexible”
Principles of Flexible UI
Components
The 2 Component
Programming Models
• Imperative Manipulation
• State-driven implicit manipulation
Imperative manipulation is like
telling your kids what to do
• Go to your room
• Pick out one pair of underwear
• Pick out one pair of pants
• Pick out one shirt
Imperative manipulation is like
telling your kids what to do
Photo Credit: My Wife
Imperative Manipulation Example
elem.setAttribute(‘aria-selected’: ‘active’);
elem.classList.add(‘selected’);
Paradigms Using Imperative Manipulation
• Native JavaScript
• jQuery
• Polymer/Web Components
State driven manipulation is like
me taking my car to the shop
• This car should be more awesome.
Make it happen.
State driven manipulation is like
me taking my car to the shop
Photo Credit: http://www.mycarconnector.com/pimp-my-ride-was-a-big-fat-lie/
Photo Credit: https://www.pinterest.com/pin/431219733043180678/
Photo Credit: http://www.carsut.com/pimped-out-cars/
State Driven Example
component.setState({‘selected’: true});
Examples of State Driven
• Angular
• React
• Vue
• Ember
State => Imperative is easy.
Imperative => State is HARD.
Implication: Treat
EVERYTHING as State
EVERYTHING as State
• Application State
• UI State
• User entered content
• ARIA attributes
• Components Should Be State Driven
• Coupling Should Be Event Driven
• Components Should Be “DOM Flexible”
Principles of Flexible UI
Components
Coupling Should Be Event Driven
• Loose Coupling > Tight Coupling
• Enables Different Models of State
Loose Coupling > Tight
Coupling
Photo Credit: https://gfycat.com/gifs/detail/abandonedsizzlinghatchetfish
Challenges of Tight Coupling
Loose Coupling
• Allows multitude of component
relationship models
• Enables multitude of programming
models
Multiple Models of State
• Redux: event === dispatch
• RxJS: Components => observables
• Native: event => update local state
imperatively
Redux
myComponent.on(‘core.event’, (e, stateChange) => {
dispatch(‘MY_COMPONENT_CHANGE’, stateChange)
});
RXJS
myComponent.subscribe(‘core.event’, (stateChange) => {
doSomethingWithIt();
});
Flexible UI Components
• Components Should Be State Driven
• Coupling Should Be Event Driven
• Components Should Be “DOM Flexible”
What does “DOM Flexible”
Mean?
• Explicit over Implicit
• Classes and Attributes over Elements
• Can still facilitate common cases via opt-in
Class and Attributes Over
Elements
<ul	class="dropdown	menu"	data-dropdown-menu>	
		<li>	
				<a	href="#">Item	1</a>	
				<ul	class="menu">	
						<li><a	href="#">Item	1A</a></li>	
				</ul>	
		</li>	
		<li><a	href="#">Item	2</a></li>	
</ul>
Class and Attributes Over
Elements
<ul	class="dropdown	menu"	data-dropdown-menu>	
		<li	class="dropdown-menu-item"	data-dropdown-menu-item>	
				<a	href="#">Item	1</a>	
				<ul	data-dropdown-submenu	class=“menu”>	
						<li	class="dropdown-menu-item"	data-dropdown-menu-item>	
								<a	href="#">Item	1A</a>	
						</li>	
				</ul>	
		</li>	
		<li	class="dropdown-menu-item"	data-dropdown-menu-item>	
				<a	href="#">Item	2</a>	
		</li>	
</ul>
Class and Attributes Over
Elements
• Allows Finer Control
• Allow More Variation
• More Verbose
More Verbose: Too Much Typing?
Facilitate Common Cases
Facilitate Common Cases
<ul	class="dropdown	menu"	data-dropdown-menu>	
		<li>	
				<a	href="#">Item	1</a>	
				<ul	class="menu">	
						<li><a	href="#">Item	1A</a></li>	
				</ul>	
		</li>	
		<li><a	href="#">Item	2</a></li>	
</ul>
Facilitate Common Cases
<ul	class="dropdown	menu	s-dropdown-menu"	data-
dropdown-menu	data-dropdown-menu-implicit>	
		<li>	
				<a	href="#">Item	1</a>	
				<ul	class="menu">	
						<li><a	href="#">Item	1A</a></li>	
				</ul>	
		</li>	
		<li><a	href="#">Item	2</a></li>	
</ul>
Lets Review
Flexible UI Components
• Components Should Be State Driven
• Coupling Should Be Event Driven
• Components Should Be “DOM Flexible”
Re-imagining the model
of UI Frameworks
Component Libraries
are Developer Utilities
The Old Model
Component Libraries
are Developer Utilities
The Old Model
The New Model
• Put User Experience First
• Enable Shared Language Between Design &
Development
• Enable Consistency Across All Brand Faces
Component Libraries…
How Do We Get There?
1. Recognize UI/UX as a primary concern.
2. Advocate against JS Framework elitism
3. UI Frameworks need more JavaScript experts involved.
4. JavaScript Frameworks need more designers involved.
How Do We Get There?
Questions?
Thank you!
@kbal11
kball@zendev.com
https://zendev.com

More Related Content

What's hot

jQuery Conference 2012 keynote
jQuery Conference 2012 keynotejQuery Conference 2012 keynote
jQuery Conference 2012 keynotedmethvin
 
Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece
Transforming Front-End Disaster Code™ Into A Maintainable MasterpieceTransforming Front-End Disaster Code™ Into A Maintainable Masterpiece
Transforming Front-End Disaster Code™ Into A Maintainable MasterpieceDan Gribbin
 
Automated perf optimization - jQuery Conference
Automated perf optimization - jQuery ConferenceAutomated perf optimization - jQuery Conference
Automated perf optimization - jQuery ConferenceMatthew Lancaster
 
New Perspectives on Performance
New Perspectives on PerformanceNew Perspectives on Performance
New Perspectives on Performancemennovanslooten
 
Harness jQuery Templates and Data Link
Harness jQuery Templates and Data LinkHarness jQuery Templates and Data Link
Harness jQuery Templates and Data LinkBorisMoore
 
Going Node.js at Netflix
Going Node.js at NetflixGoing Node.js at Netflix
Going Node.js at Netflixmicahr
 
HTML5 Web Workers-unleashed
HTML5 Web Workers-unleashedHTML5 Web Workers-unleashed
HTML5 Web Workers-unleashedPeter Lubbers
 
JsViews - Next Generation jQuery Templates
JsViews - Next Generation jQuery TemplatesJsViews - Next Generation jQuery Templates
JsViews - Next Generation jQuery TemplatesBorisMoore
 
jQuery UI & Mobile - The Great Merger
jQuery UI & Mobile - The Great MergerjQuery UI & Mobile - The Great Merger
jQuery UI & Mobile - The Great Mergerscottgonzalez
 
Beginning jQuery Mobile
Beginning jQuery MobileBeginning jQuery Mobile
Beginning jQuery MobileTroy Miles
 
Make your Backbone Application dance
Make your Backbone Application danceMake your Backbone Application dance
Make your Backbone Application danceNicholas Valbusa
 
React Walk-Thru - Santa Cruz JS, May 2015
React Walk-Thru - Santa Cruz JS, May 2015React Walk-Thru - Santa Cruz JS, May 2015
React Walk-Thru - Santa Cruz JS, May 2015Simon Sturmer
 
Rapid Testing, Rapid Development
Rapid Testing, Rapid DevelopmentRapid Testing, Rapid Development
Rapid Testing, Rapid Developmentmennovanslooten
 
Making Single Page Applications (SPA) faster
Making Single Page Applications (SPA) faster Making Single Page Applications (SPA) faster
Making Single Page Applications (SPA) faster Boris Livshutz
 
Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the WebUsing Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Webphilogb
 
Web app with j query &amp; javascript (5:4)
Web app with j query &amp; javascript (5:4)Web app with j query &amp; javascript (5:4)
Web app with j query &amp; javascript (5:4)Thinkful
 
Back to the 90s' - Revenge of the static website
Back to the 90s' - Revenge of the static websiteBack to the 90s' - Revenge of the static website
Back to the 90s' - Revenge of the static websiteYves Goeleven
 
There Are No “Buts” in Progressive Enhancement [Øredev 2015]
There Are No “Buts” in Progressive Enhancement [Øredev 2015]There Are No “Buts” in Progressive Enhancement [Øredev 2015]
There Are No “Buts” in Progressive Enhancement [Øredev 2015]Aaron Gustafson
 

What's hot (20)

jQuery Conference 2012 keynote
jQuery Conference 2012 keynotejQuery Conference 2012 keynote
jQuery Conference 2012 keynote
 
Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece
Transforming Front-End Disaster Code™ Into A Maintainable MasterpieceTransforming Front-End Disaster Code™ Into A Maintainable Masterpiece
Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece
 
Automated perf optimization - jQuery Conference
Automated perf optimization - jQuery ConferenceAutomated perf optimization - jQuery Conference
Automated perf optimization - jQuery Conference
 
New Perspectives on Performance
New Perspectives on PerformanceNew Perspectives on Performance
New Perspectives on Performance
 
Wheel.js
Wheel.jsWheel.js
Wheel.js
 
Harness jQuery Templates and Data Link
Harness jQuery Templates and Data LinkHarness jQuery Templates and Data Link
Harness jQuery Templates and Data Link
 
Going Node.js at Netflix
Going Node.js at NetflixGoing Node.js at Netflix
Going Node.js at Netflix
 
HTML5 Web Workers-unleashed
HTML5 Web Workers-unleashedHTML5 Web Workers-unleashed
HTML5 Web Workers-unleashed
 
JsViews - Next Generation jQuery Templates
JsViews - Next Generation jQuery TemplatesJsViews - Next Generation jQuery Templates
JsViews - Next Generation jQuery Templates
 
jQuery UI & Mobile - The Great Merger
jQuery UI & Mobile - The Great MergerjQuery UI & Mobile - The Great Merger
jQuery UI & Mobile - The Great Merger
 
Beginning jQuery Mobile
Beginning jQuery MobileBeginning jQuery Mobile
Beginning jQuery Mobile
 
Make your Backbone Application dance
Make your Backbone Application danceMake your Backbone Application dance
Make your Backbone Application dance
 
React Walk-Thru - Santa Cruz JS, May 2015
React Walk-Thru - Santa Cruz JS, May 2015React Walk-Thru - Santa Cruz JS, May 2015
React Walk-Thru - Santa Cruz JS, May 2015
 
Rapid Testing, Rapid Development
Rapid Testing, Rapid DevelopmentRapid Testing, Rapid Development
Rapid Testing, Rapid Development
 
Making Single Page Applications (SPA) faster
Making Single Page Applications (SPA) faster Making Single Page Applications (SPA) faster
Making Single Page Applications (SPA) faster
 
Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the WebUsing Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Web
 
GCC 11-13-15
GCC 11-13-15GCC 11-13-15
GCC 11-13-15
 
Web app with j query &amp; javascript (5:4)
Web app with j query &amp; javascript (5:4)Web app with j query &amp; javascript (5:4)
Web app with j query &amp; javascript (5:4)
 
Back to the 90s' - Revenge of the static website
Back to the 90s' - Revenge of the static websiteBack to the 90s' - Revenge of the static website
Back to the 90s' - Revenge of the static website
 
There Are No “Buts” in Progressive Enhancement [Øredev 2015]
There Are No “Buts” in Progressive Enhancement [Øredev 2015]There Are No “Buts” in Progressive Enhancement [Øredev 2015]
There Are No “Buts” in Progressive Enhancement [Øredev 2015]
 

Viewers also liked

Hdfc mobile app casestudy - UX / UI Design for Agents Mobile App
Hdfc mobile app casestudy - UX / UI Design for Agents Mobile AppHdfc mobile app casestudy - UX / UI Design for Agents Mobile App
Hdfc mobile app casestudy - UX / UI Design for Agents Mobile Appram bal
 
Ux Ui Design for Mobile Apps
Ux Ui Design  for  Mobile AppsUx Ui Design  for  Mobile Apps
Ux Ui Design for Mobile AppsVishal Kirti
 
Asap casestudy - UX / UI Design for Corporate Instant Messaging Mobile App
Asap casestudy - UX / UI Design for Corporate Instant Messaging Mobile AppAsap casestudy - UX / UI Design for Corporate Instant Messaging Mobile App
Asap casestudy - UX / UI Design for Corporate Instant Messaging Mobile Appram bal
 
Understanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideUnderstanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideBabajide Aroyewun
 
Build a real app with react native
Build a real app with react nativeBuild a real app with react native
Build a real app with react nativeJohn Pham
 
oneplus ecommerce mobile website and app ios and android ui, ux design
oneplus ecommerce mobile website and app ios and android ui, ux designoneplus ecommerce mobile website and app ios and android ui, ux design
oneplus ecommerce mobile website and app ios and android ui, ux designJitender singh danu (JD)
 
Building Your First iOS App with Xamarin for Visual Studio
Building Your First iOS App with Xamarin for Visual StudioBuilding Your First iOS App with Xamarin for Visual Studio
Building Your First iOS App with Xamarin for Visual StudioXamarin
 
youdare universal mobile app ios, android, ipad UI/UX design
youdare universal mobile app ios, android, ipad UI/UX designyoudare universal mobile app ios, android, ipad UI/UX design
youdare universal mobile app ios, android, ipad UI/UX designJitender singh danu (JD)
 

Viewers also liked (8)

Hdfc mobile app casestudy - UX / UI Design for Agents Mobile App
Hdfc mobile app casestudy - UX / UI Design for Agents Mobile AppHdfc mobile app casestudy - UX / UI Design for Agents Mobile App
Hdfc mobile app casestudy - UX / UI Design for Agents Mobile App
 
Ux Ui Design for Mobile Apps
Ux Ui Design  for  Mobile AppsUx Ui Design  for  Mobile Apps
Ux Ui Design for Mobile Apps
 
Asap casestudy - UX / UI Design for Corporate Instant Messaging Mobile App
Asap casestudy - UX / UI Design for Corporate Instant Messaging Mobile AppAsap casestudy - UX / UI Design for Corporate Instant Messaging Mobile App
Asap casestudy - UX / UI Design for Corporate Instant Messaging Mobile App
 
Understanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideUnderstanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun Babajide
 
Build a real app with react native
Build a real app with react nativeBuild a real app with react native
Build a real app with react native
 
oneplus ecommerce mobile website and app ios and android ui, ux design
oneplus ecommerce mobile website and app ios and android ui, ux designoneplus ecommerce mobile website and app ios and android ui, ux design
oneplus ecommerce mobile website and app ios and android ui, ux design
 
Building Your First iOS App with Xamarin for Visual Studio
Building Your First iOS App with Xamarin for Visual StudioBuilding Your First iOS App with Xamarin for Visual Studio
Building Your First iOS App with Xamarin for Visual Studio
 
youdare universal mobile app ios, android, ipad UI/UX design
youdare universal mobile app ios, android, ipad UI/UX designyoudare universal mobile app ios, android, ipad UI/UX design
youdare universal mobile app ios, android, ipad UI/UX design
 

Similar to Flexible UI Components for a Multi-Framework World

NinjaScript 2010-10-14
NinjaScript 2010-10-14NinjaScript 2010-10-14
NinjaScript 2010-10-14lrdesign
 
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD CombinationLotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD CombinationSean Burgess
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIMarcin Grzywaczewski
 
JavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) uploadJavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) uploadRuss Fustino
 
NinjaScript and Mizugumo 2011-02-05
NinjaScript and Mizugumo 2011-02-05NinjaScript and Mizugumo 2011-02-05
NinjaScript and Mizugumo 2011-02-05lrdesign
 
React && React Native workshop
React && React Native workshopReact && React Native workshop
React && React Native workshopStacy Goh
 
Comparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAsComparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAsJennifer Estrada
 
Webcomponents are your frameworks best friend
Webcomponents are your frameworks best friendWebcomponents are your frameworks best friend
Webcomponents are your frameworks best friendFilip Bruun Bech-Larsen
 
Getting started with jQuery
Getting started with jQueryGetting started with jQuery
Getting started with jQueryGill Cleeren
 
React basic by Yoav Amit, Wix
React basic by Yoav Amit, Wix React basic by Yoav Amit, Wix
React basic by Yoav Amit, Wix Chen Lerner
 
From MEAN to the MERN Stack
From MEAN to the MERN StackFrom MEAN to the MERN Stack
From MEAN to the MERN StackTroy Miles
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web ComponentsRich Bradshaw
 
JQuery mobile
JQuery mobileJQuery mobile
JQuery mobileGary Yeh
 
jQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPagesjQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPagesTeamstudio
 
An Angular developer moving to React
An Angular developer moving to ReactAn Angular developer moving to React
An Angular developer moving to ReactSouvik Basu
 
Building Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript SpaghettiBuilding Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript SpaghettiJared Faris
 
Getting started with Vue.js - CodeMash 2020
Getting started with Vue.js - CodeMash 2020Getting started with Vue.js - CodeMash 2020
Getting started with Vue.js - CodeMash 2020Burton Smith
 

Similar to Flexible UI Components for a Multi-Framework World (20)

NinjaScript 2010-10-14
NinjaScript 2010-10-14NinjaScript 2010-10-14
NinjaScript 2010-10-14
 
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD CombinationLotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UI
 
JavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) uploadJavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) upload
 
NinjaScript and Mizugumo 2011-02-05
NinjaScript and Mizugumo 2011-02-05NinjaScript and Mizugumo 2011-02-05
NinjaScript and Mizugumo 2011-02-05
 
React && React Native workshop
React && React Native workshopReact && React Native workshop
React && React Native workshop
 
React.js at Cortex
React.js at CortexReact.js at Cortex
React.js at Cortex
 
Comparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAsComparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAs
 
Webcomponents are your frameworks best friend
Webcomponents are your frameworks best friendWebcomponents are your frameworks best friend
Webcomponents are your frameworks best friend
 
Jquery Mobile
Jquery MobileJquery Mobile
Jquery Mobile
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
Getting started with jQuery
Getting started with jQueryGetting started with jQuery
Getting started with jQuery
 
React basic by Yoav Amit, Wix
React basic by Yoav Amit, Wix React basic by Yoav Amit, Wix
React basic by Yoav Amit, Wix
 
From MEAN to the MERN Stack
From MEAN to the MERN StackFrom MEAN to the MERN Stack
From MEAN to the MERN Stack
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web Components
 
JQuery mobile
JQuery mobileJQuery mobile
JQuery mobile
 
jQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPagesjQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPages
 
An Angular developer moving to React
An Angular developer moving to ReactAn Angular developer moving to React
An Angular developer moving to React
 
Building Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript SpaghettiBuilding Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript Spaghetti
 
Getting started with Vue.js - CodeMash 2020
Getting started with Vue.js - CodeMash 2020Getting started with Vue.js - CodeMash 2020
Getting started with Vue.js - CodeMash 2020
 

More from FITC

Cut it up
Cut it upCut it up
Cut it upFITC
 
Designing for Digital Health
Designing for Digital HealthDesigning for Digital Health
Designing for Digital HealthFITC
 
Profiling JavaScript Performance
Profiling JavaScript PerformanceProfiling JavaScript Performance
Profiling JavaScript PerformanceFITC
 
Surviving Your Tech Stack
Surviving Your Tech StackSurviving Your Tech Stack
Surviving Your Tech StackFITC
 
How to Pitch Your First AR Project
How to Pitch Your First AR ProjectHow to Pitch Your First AR Project
How to Pitch Your First AR ProjectFITC
 
Start by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the AnswerStart by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the AnswerFITC
 
Cocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s StoryCocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s StoryFITC
 
Everyday Innovation
Everyday InnovationEveryday Innovation
Everyday InnovationFITC
 
HyperLight Websites
HyperLight WebsitesHyperLight Websites
HyperLight WebsitesFITC
 
Everything is Terrifying
Everything is TerrifyingEverything is Terrifying
Everything is TerrifyingFITC
 
Post-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future HumanPost-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future HumanFITC
 
The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)FITC
 
East of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR GameEast of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR GameFITC
 
Creating a Proactive Healthcare System
Creating a Proactive Healthcare SystemCreating a Proactive Healthcare System
Creating a Proactive Healthcare SystemFITC
 
World Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product DesignWorld Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product DesignFITC
 
The Power of Now
The Power of NowThe Power of Now
The Power of NowFITC
 
High Performance PWAs
High Performance PWAsHigh Performance PWAs
High Performance PWAsFITC
 
Rise of the JAMstack
Rise of the JAMstackRise of the JAMstack
Rise of the JAMstackFITC
 
From Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self DiscoveryFrom Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self DiscoveryFITC
 
Projects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time ForProjects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time ForFITC
 

More from FITC (20)

Cut it up
Cut it upCut it up
Cut it up
 
Designing for Digital Health
Designing for Digital HealthDesigning for Digital Health
Designing for Digital Health
 
Profiling JavaScript Performance
Profiling JavaScript PerformanceProfiling JavaScript Performance
Profiling JavaScript Performance
 
Surviving Your Tech Stack
Surviving Your Tech StackSurviving Your Tech Stack
Surviving Your Tech Stack
 
How to Pitch Your First AR Project
How to Pitch Your First AR ProjectHow to Pitch Your First AR Project
How to Pitch Your First AR Project
 
Start by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the AnswerStart by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the Answer
 
Cocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s StoryCocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s Story
 
Everyday Innovation
Everyday InnovationEveryday Innovation
Everyday Innovation
 
HyperLight Websites
HyperLight WebsitesHyperLight Websites
HyperLight Websites
 
Everything is Terrifying
Everything is TerrifyingEverything is Terrifying
Everything is Terrifying
 
Post-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future HumanPost-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future Human
 
The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)
 
East of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR GameEast of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR Game
 
Creating a Proactive Healthcare System
Creating a Proactive Healthcare SystemCreating a Proactive Healthcare System
Creating a Proactive Healthcare System
 
World Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product DesignWorld Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product Design
 
The Power of Now
The Power of NowThe Power of Now
The Power of Now
 
High Performance PWAs
High Performance PWAsHigh Performance PWAs
High Performance PWAs
 
Rise of the JAMstack
Rise of the JAMstackRise of the JAMstack
Rise of the JAMstack
 
From Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self DiscoveryFrom Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self Discovery
 
Projects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time ForProjects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time For
 

Recently uploaded

Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructureitnewsafrica
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 

Recently uploaded (20)

Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 

Flexible UI Components for a Multi-Framework World