SlideShare a Scribd company logo
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Baker on Github
h ps://github.com/ing-bank/baker
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
I just heard that ING hates ... and does
....
Adding a bit of static type checking to a world of web components
I just heard that @JordyMoos hates ...
and does ....
Adding a bit of static type checking to a world of web components
ADDING A BIT OF STATIC TYPE CHECKINGADDING A BIT OF STATIC TYPE CHECKING
TO A WORLD OF WEB COMPONENTSTO A WORLD OF WEB COMPONENTS
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
WEB COMPONENTSWEB COMPONENTS
Web pla orm APIs
Component-based engineering
Encapsula on and Reusability
WEB PLATFORM APISWEB PLATFORM APIS
Custom Elements
Shadow DOM
HTML Template
HTML Imports
CUSTOM ELEMENTSCUSTOM ELEMENTS
SHADOW DOMSHADOW DOM
HTML TEMPLATEHTML TEMPLATE
HTML IMPORTSHTML IMPORTS
  
HTML IMPORTSHTML IMPORTS
ES MODULESES MODULES
Adding a bit of static type checking to a world of web components
WEB COMPONENTSWEB COMPONENTS
MOST IMPORTANTLY ...MOST IMPORTANTLY ...
IT IS A WEB STANDARDIT IS A WEB STANDARD
LETS SEE HOW WEB COMPONENTS WORKLETS SEE HOW WEB COMPONENTS WORK
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
ATTRIBUTES ARE A GOOD WAY TO GAINATTRIBUTES ARE A GOOD WAY TO GAIN
DATADATA
YOU ALSO MIGHT WANT TO INFORM OTHERYOU ALSO MIGHT WANT TO INFORM OTHER
ABOUT YOUR KNOWLEDGEABOUT YOUR KNOWLEDGE
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
LIBRARIESLIBRARIES
Polymer
Hybrids
Skate.js
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
ELMELM
Usability
Performance
Robustness
ELMELM
Pure Func onal language
ELMELM
Pure Func onal language
Sta cally Typed
ELMELM
Pure Func onal language
Sta cally Typed
Strongly Typed
"NO RUNTIME ERRORS""NO RUNTIME ERRORS"
SORRY NO ELM QUIZ!SORRY NO ELM QUIZ!
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
ELM EXAMPLEELM EXAMPLE
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
ELM LIVE DEMOELM LIVE DEMO
ADDING A BIT OF STATIC TYPE CHECKINGADDING A BIT OF STATIC TYPE CHECKING
TO A WORLD OF WEB COMPONENTSTO A WORLD OF WEB COMPONENTS
COMBINE THE TWOCOMBINE THE TWO
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
Adding a bit of static type checking to a world of web components
"CONCLUSION""CONCLUSION"
"CONCLUSION""CONCLUSION"
Split the Logic and View layer
"CONCLUSION""CONCLUSION"
Split the Logic and View layer
Elm for the logic
"CONCLUSION""CONCLUSION"
Split the Logic and View layer
Elm for the logic
Web Components for the view
"CONCLUSION""CONCLUSION"
"CONCLUSION""CONCLUSION"
Do not tangle too much to a framework
"CONCLUSION""CONCLUSION"
Do not tangle too much to a framework
Web Standards and Languages tend to outlive them
"CONCLUSION""CONCLUSION"
Do not tangle too much to a framework
Web Standards and Languages tend to outlive them
Write things that can be used in years
TAKE AWAYTAKE AWAY
TAKE AWAYTAKE AWAY
Do not go blind on one thing
TAKE AWAYTAKE AWAY
Do not go blind on one thing
Combine things
TAKE AWAYTAKE AWAY
Do not go blind on one thing
Combine things
Experiment
CODECODE
CODECODE
github.com/JordyMoos/elm-quiz
CODECODE
github.com/JordyMoos/elm-quiz
github.com/JordyMoos/jm-quiz
CODECODE
github.com/JordyMoos/elm-quiz
github.com/JordyMoos/jm-quiz
github.com/JordyMoos/elm-polymer-shop
LEARN ABOUT WEB COMPONENTSLEARN ABOUT WEB COMPONENTS
h ps://github.com/thepassle/webcomponents-
from-zero-to-hero
LEARN ABOUT ELMLEARN ABOUT ELM
guide.elm-lang.org
Play with the ELM
THANK YOUTHANK YOU
THANKS FOR THE LOGO PASCALTHANKS FOR THE LOGO PASCAL
h ps://twi er.com/passle_
ABOUT MEABOUT ME
h ps://www.linkedin.com/in/jordy-moos-8a809754/
h ps://twi er.com/jordymoos
h ps://github.com/jordymoos

More Related Content

PDF
Styleguide-Driven Development: The New Web Development
PPTX
vJUG24 - Spring Boot and Kotlin, a match made in Heaven
PPTX
Java One - Designing a DSL in Kotlin
PPTX
Secrets of a Blazor Component Artisan
PDF
React Storybook, Atomic Design, and ITCSS
PDF
Atomic design
PDF
Snappy Means Happy: Performance in Ember Apps
PDF
Use atomic design ftw
Styleguide-Driven Development: The New Web Development
vJUG24 - Spring Boot and Kotlin, a match made in Heaven
Java One - Designing a DSL in Kotlin
Secrets of a Blazor Component Artisan
React Storybook, Atomic Design, and ITCSS
Atomic design
Snappy Means Happy: Performance in Ember Apps
Use atomic design ftw

Similar to Adding a bit of static type checking to a world of web components (20)

PDF
Rails is Easy*
PDF
Change by HTML5
ODP
Moving from Web 1.0 to Web 2.0
PPTX
Web Components: The Future of Web Development is Here
PDF
Solving Common Web Component Problems - Simon MacDonald
PPTX
Web Components: The Future of Web Development is Here
PDF
Building a full-stack app with Golang and Google Cloud Platform in one week
PDF
Continuous Integration and Deployment Best Practices on AWS
PDF
Optimizing Spark Deployments for Containers: Isolation, Safety, and Performan...
PDF
Develop your first mobile App for iOS and Android
PDF
Develop your first mobile App for iOS and Android
KEY
A rough guide to JavaScript Performance
PDF
PHP is the King, nodejs the prince and python the fool
PDF
PHP is the king, nodejs is the prince and Python is the fool - Alessandro Cin...
PDF
Keypoints html5
PDF
Putting the A in JAMstack
PDF
"Will Git Be Around Forever? A List of Possible Successors" at UtrechtJUG
PDF
HTML5 and Beyond
ZIP
Looking into HTML5
PDF
Deep crawl the chaotic landscape of JavaScript
 
Rails is Easy*
Change by HTML5
Moving from Web 1.0 to Web 2.0
Web Components: The Future of Web Development is Here
Solving Common Web Component Problems - Simon MacDonald
Web Components: The Future of Web Development is Here
Building a full-stack app with Golang and Google Cloud Platform in one week
Continuous Integration and Deployment Best Practices on AWS
Optimizing Spark Deployments for Containers: Isolation, Safety, and Performan...
Develop your first mobile App for iOS and Android
Develop your first mobile App for iOS and Android
A rough guide to JavaScript Performance
PHP is the King, nodejs the prince and python the fool
PHP is the king, nodejs is the prince and Python is the fool - Alessandro Cin...
Keypoints html5
Putting the A in JAMstack
"Will Git Be Around Forever? A List of Possible Successors" at UtrechtJUG
HTML5 and Beyond
Looking into HTML5
Deep crawl the chaotic landscape of JavaScript
 
Ad

More from Jordy Moos (6)

PDF
NL - Voeg een beetje 'static type checking' toe aan een wereld van web compon...
PDF
How to Develop Orchestration Logic in APIs with Baker
PDF
Code splitting? How unnecessary in Elm 0.19!
PDF
Formal verification of algorithms
PDF
Elm, the runtime error killer
PDF
Elasticsearch, the story so far
NL - Voeg een beetje 'static type checking' toe aan een wereld van web compon...
How to Develop Orchestration Logic in APIs with Baker
Code splitting? How unnecessary in Elm 0.19!
Formal verification of algorithms
Elm, the runtime error killer
Elasticsearch, the story so far
Ad

Recently uploaded (20)

PPTX
Engineering Ethics, Safety and Environment [Autosaved] (1).pptx
PPTX
web development for engineering and engineering
PDF
SM_6th-Sem__Cse_Internet-of-Things.pdf IOT
PPTX
UNIT 4 Total Quality Management .pptx
PPTX
CYBER-CRIMES AND SECURITY A guide to understanding
PDF
composite construction of structures.pdf
PPTX
UNIT-1 - COAL BASED THERMAL POWER PLANTS
PDF
Digital Logic Computer Design lecture notes
PPT
introduction to datamining and warehousing
PDF
BMEC211 - INTRODUCTION TO MECHATRONICS-1.pdf
PPT
Mechanical Engineering MATERIALS Selection
DOCX
ASol_English-Language-Literature-Set-1-27-02-2023-converted.docx
PPT
Introduction, IoT Design Methodology, Case Study on IoT System for Weather Mo...
PDF
keyrequirementskkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
PPTX
Internet of Things (IOT) - A guide to understanding
PDF
PPT on Performance Review to get promotions
PPTX
M Tech Sem 1 Civil Engineering Environmental Sciences.pptx
PPTX
MET 305 2019 SCHEME MODULE 2 COMPLETE.pptx
PDF
Embodied AI: Ushering in the Next Era of Intelligent Systems
PDF
Mohammad Mahdi Farshadian CV - Prospective PhD Student 2026
Engineering Ethics, Safety and Environment [Autosaved] (1).pptx
web development for engineering and engineering
SM_6th-Sem__Cse_Internet-of-Things.pdf IOT
UNIT 4 Total Quality Management .pptx
CYBER-CRIMES AND SECURITY A guide to understanding
composite construction of structures.pdf
UNIT-1 - COAL BASED THERMAL POWER PLANTS
Digital Logic Computer Design lecture notes
introduction to datamining and warehousing
BMEC211 - INTRODUCTION TO MECHATRONICS-1.pdf
Mechanical Engineering MATERIALS Selection
ASol_English-Language-Literature-Set-1-27-02-2023-converted.docx
Introduction, IoT Design Methodology, Case Study on IoT System for Weather Mo...
keyrequirementskkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
Internet of Things (IOT) - A guide to understanding
PPT on Performance Review to get promotions
M Tech Sem 1 Civil Engineering Environmental Sciences.pptx
MET 305 2019 SCHEME MODULE 2 COMPLETE.pptx
Embodied AI: Ushering in the Next Era of Intelligent Systems
Mohammad Mahdi Farshadian CV - Prospective PhD Student 2026

Adding a bit of static type checking to a world of web components