SlideShare a Scribd company logo

Incremental Feature Development with Web Components

As a developer, your responsibility is to deliver feature-rich applications fast. Sometimes, you can nail it with your eyes closed! Most of the times, you need a reliable technique to attack the complexity behind that user story with 10 acceptance criteria. During this live-coding session, I will show you one such technique. It might look like “user story slicing”, or “taking baby steps”. It’s more than that! I will start from the most simple requirement, and evolve the feature, bit by bit. I will add layers upon layers of Web Components in an almost mindless fashion. The feature will be ready to be pushed into production before you can say “incremental iterative development”. I’ll be using React, but it shouldn’t matter that much.

1 of 20
Download to read offline
@ALINPANDICHI #ITAKEUNCONF
INCREMENTAL FEATURE
DEVELOPMENT WITH
WEB COMPONENTS
A   L I V E   C O D I N G   T A L E
Alin Pandichi  |  Software Developer at MozaicLabs
SO, WHAT DO YOU DO?
Agile Talks in Bucharest
Open Space
Coding Dojo
Product Development from scratch
Global Day of Coderetreat
Software Developer
at MozaicLabs
building eventriX 
@ALINPANDICHI #ITAKEUNCONF
INCREMENTAL FEATURE
DEVELOPMENT
"increasing increments of capability"
- Wikipedia -
https://pixabay.com/en/steps-staircase-climbing-1081909/
@ALINPANDICHI #ITAKEUNCONF
https://en.wikipedia.org/wiki/Iterative_and_incremental_development
https://twitter.com/uipatternscom/status/610073038596476928
@ALINPANDICHI #ITAKEUNCONF
AS A DEVELOPER,
I WANT TECHNIQUES,
SO THAT I CAN DEAL
 WITH COMPLEXITY
https://www.solutionsiq.com/resource/blog-post/what-big-user-stories-could-be-telling-you/
@ALINPANDICHI #ITAKEUNCONF
TECHNIQUES TO DEAL
WITH COMPLEXITY
Story Slicing
Prioritization
Commit often
(baby steps)
Web Components
(composable, reusable,
interoperable)
https://www.solutionsiq.com/resource/blog-post/what-big-user-stories-could-be-telling-you/
@ALINPANDICHI #ITAKEUNCONF
https://mozaicworks.com/blog/splitting-user-stories/
https://en.wikipedia.org/wiki/MoSCoW_method
http://blog.adrianbolboaca.ro/2013/03/taking-baby-steps/

Recommended

[Codecamp] The sorry state of frontend code
[Codecamp] The sorry state of frontend code[Codecamp] The sorry state of frontend code
[Codecamp] The sorry state of frontend codeAlin Pandichi
 
Unit Testing your React / Redux app (@BucharestJS)
Unit Testing your React / Redux app (@BucharestJS)Unit Testing your React / Redux app (@BucharestJS)
Unit Testing your React / Redux app (@BucharestJS)Alin Pandichi
 
Coding Dojo - The learning remote control
Coding Dojo - The learning remote controlCoding Dojo - The learning remote control
Coding Dojo - The learning remote controlAlin Pandichi
 
The sorry state of frontend code [a talk @ Softbinator]
The sorry state of frontend code [a talk @ Softbinator] The sorry state of frontend code [a talk @ Softbinator]
The sorry state of frontend code [a talk @ Softbinator] Alin Pandichi
 
Behavior driven development - a recap (@ Symfony Bucharest Meetup)
Behavior driven development - a recap (@ Symfony Bucharest Meetup)Behavior driven development - a recap (@ Symfony Bucharest Meetup)
Behavior driven development - a recap (@ Symfony Bucharest Meetup)Alin Pandichi
 
The sorry state of frontend code
The sorry state of frontend codeThe sorry state of frontend code
The sorry state of frontend codeAlin Pandichi
 
How to unit test your React/Redux app
How to unit test your React/Redux appHow to unit test your React/Redux app
How to unit test your React/Redux appAlin Pandichi
 
Covariance and contravariance. Say what?! (Agile Talks #22)
Covariance and contravariance. Say what?! (Agile Talks #22)Covariance and contravariance. Say what?! (Agile Talks #22)
Covariance and contravariance. Say what?! (Agile Talks #22)Alin Pandichi
 

More Related Content

More from Alin Pandichi

Coding Dojo - Berlin Clock - TDD
Coding Dojo - Berlin Clock - TDDCoding Dojo - Berlin Clock - TDD
Coding Dojo - Berlin Clock - TDDAlin Pandichi
 
Coding Dojo - Golden Master Technique - Approval Tests - Gilded Rose Kata-
Coding Dojo - Golden Master Technique - Approval Tests - Gilded Rose Kata-Coding Dojo - Golden Master Technique - Approval Tests - Gilded Rose Kata-
Coding Dojo - Golden Master Technique - Approval Tests - Gilded Rose Kata-Alin Pandichi
 
Coding Dojo - Refactoring Tennis Kata
Coding Dojo - Refactoring Tennis KataCoding Dojo - Refactoring Tennis Kata
Coding Dojo - Refactoring Tennis KataAlin Pandichi
 
Software development - the java perspective
Software development - the java perspectiveSoftware development - the java perspective
Software development - the java perspectiveAlin Pandichi
 
Java 8 - Lambdas and much more
Java 8 - Lambdas and much moreJava 8 - Lambdas and much more
Java 8 - Lambdas and much moreAlin Pandichi
 

More from Alin Pandichi (6)

Coding Dojo - Berlin Clock - TDD
Coding Dojo - Berlin Clock - TDDCoding Dojo - Berlin Clock - TDD
Coding Dojo - Berlin Clock - TDD
 
Coding Dojo - Golden Master Technique - Approval Tests - Gilded Rose Kata-
Coding Dojo - Golden Master Technique - Approval Tests - Gilded Rose Kata-Coding Dojo - Golden Master Technique - Approval Tests - Gilded Rose Kata-
Coding Dojo - Golden Master Technique - Approval Tests - Gilded Rose Kata-
 
Coding Dojo - Refactoring Tennis Kata
Coding Dojo - Refactoring Tennis KataCoding Dojo - Refactoring Tennis Kata
Coding Dojo - Refactoring Tennis Kata
 
Avatar.js
Avatar.jsAvatar.js
Avatar.js
 
Software development - the java perspective
Software development - the java perspectiveSoftware development - the java perspective
Software development - the java perspective
 
Java 8 - Lambdas and much more
Java 8 - Lambdas and much moreJava 8 - Lambdas and much more
Java 8 - Lambdas and much more
 

Recently uploaded

killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이ssuser82c38d
 
killingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdfkillingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdfssuser82c38d
 
Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...
Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...
Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...ISPMAIndia
 
LLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flowLLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flowNaoki (Neo) SATO
 
Essence of Requirements Engineering: Pragmatic Insights for 2024
Essence of Requirements Engineering: Pragmatic Insights for 2024Essence of Requirements Engineering: Pragmatic Insights for 2024
Essence of Requirements Engineering: Pragmatic Insights for 2024Asher Sterkin
 
Getting Started with Trello for Beginners.pptx
Getting Started with Trello for Beginners.pptxGetting Started with Trello for Beginners.pptx
Getting Started with Trello for Beginners.pptxmavinoikein
 
AI Product Management by Abhijit Bendigiri
AI Product Management by Abhijit BendigiriAI Product Management by Abhijit Bendigiri
AI Product Management by Abhijit BendigiriISPMAIndia
 
DBA Fundamentals Group: Continuous SQL with Kafka and Flink
DBA Fundamentals Group: Continuous SQL with Kafka and FlinkDBA Fundamentals Group: Continuous SQL with Kafka and Flink
DBA Fundamentals Group: Continuous SQL with Kafka and FlinkTimothy Spann
 
P1 Inspection Types in Municity 5 Smartsheet
P1 Inspection Types in Municity 5 SmartsheetP1 Inspection Types in Municity 5 Smartsheet
P1 Inspection Types in Municity 5 SmartsheetMatthewTHawley
 
No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!Anthony Dahanne
 
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A..."Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...ISPMAIndia
 
killing camp week 6 problem - maximal matrix.pdf
killing camp week 6 problem - maximal matrix.pdfkilling camp week 6 problem - maximal matrix.pdf
killing camp week 6 problem - maximal matrix.pdfssuser82c38d
 
Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)Jeffrey Haguewood
 
The Game-Changer_ How Software Development Outsource Can Catapult Your Growth...
The Game-Changer_ How Software Development Outsource Can Catapult Your Growth...The Game-Changer_ How Software Development Outsource Can Catapult Your Growth...
The Game-Changer_ How Software Development Outsource Can Catapult Your Growth...emili denli
 
Open Sprintera (Where Open Source Sparks a Sprint of Possibilities)
Open Sprintera (Where Open Source Sparks a Sprint of Possibilities)Open Sprintera (Where Open Source Sparks a Sprint of Possibilities)
Open Sprintera (Where Open Source Sparks a Sprint of Possibilities)GDSCNiT
 
sql ppt for students who preparing for sql
sql ppt for students who preparing for sqlsql ppt for students who preparing for sql
sql ppt for students who preparing for sqlbharatjanadharwarud
 
maximum subarray ppt for killing camp students
maximum subarray ppt for killing camp studentsmaximum subarray ppt for killing camp students
maximum subarray ppt for killing camp studentsssuser82c38d
 
AUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdf
AUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdfAUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdf
AUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdfAutokey
 
"Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ...
"Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ..."Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ...
"Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ...ISPMAIndia
 

Recently uploaded (20)

killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
 
killingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdfkillingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdf
 
Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...
Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...
Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...
 
LLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flowLLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flow
 
Essence of Requirements Engineering: Pragmatic Insights for 2024
Essence of Requirements Engineering: Pragmatic Insights for 2024Essence of Requirements Engineering: Pragmatic Insights for 2024
Essence of Requirements Engineering: Pragmatic Insights for 2024
 
Getting Started with Trello for Beginners.pptx
Getting Started with Trello for Beginners.pptxGetting Started with Trello for Beginners.pptx
Getting Started with Trello for Beginners.pptx
 
AI Product Management by Abhijit Bendigiri
AI Product Management by Abhijit BendigiriAI Product Management by Abhijit Bendigiri
AI Product Management by Abhijit Bendigiri
 
DBA Fundamentals Group: Continuous SQL with Kafka and Flink
DBA Fundamentals Group: Continuous SQL with Kafka and FlinkDBA Fundamentals Group: Continuous SQL with Kafka and Flink
DBA Fundamentals Group: Continuous SQL with Kafka and Flink
 
P1 Inspection Types in Municity 5 Smartsheet
P1 Inspection Types in Municity 5 SmartsheetP1 Inspection Types in Municity 5 Smartsheet
P1 Inspection Types in Municity 5 Smartsheet
 
No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!
 
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A..."Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...
 
killing camp week 6 problem - maximal matrix.pdf
killing camp week 6 problem - maximal matrix.pdfkilling camp week 6 problem - maximal matrix.pdf
killing camp week 6 problem - maximal matrix.pdf
 
Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)
 
The Game-Changer_ How Software Development Outsource Can Catapult Your Growth...
The Game-Changer_ How Software Development Outsource Can Catapult Your Growth...The Game-Changer_ How Software Development Outsource Can Catapult Your Growth...
The Game-Changer_ How Software Development Outsource Can Catapult Your Growth...
 
Open Sprintera (Where Open Source Sparks a Sprint of Possibilities)
Open Sprintera (Where Open Source Sparks a Sprint of Possibilities)Open Sprintera (Where Open Source Sparks a Sprint of Possibilities)
Open Sprintera (Where Open Source Sparks a Sprint of Possibilities)
 
sql ppt for students who preparing for sql
sql ppt for students who preparing for sqlsql ppt for students who preparing for sql
sql ppt for students who preparing for sql
 
maximum subarray ppt for killing camp students
maximum subarray ppt for killing camp studentsmaximum subarray ppt for killing camp students
maximum subarray ppt for killing camp students
 
eLearning Content Development Company Code and Pixels.pdf
eLearning Content Development Company Code and Pixels.pdfeLearning Content Development Company Code and Pixels.pdf
eLearning Content Development Company Code and Pixels.pdf
 
AUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdf
AUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdfAUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdf
AUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdf
 
"Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ...
"Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ..."Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ...
"Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ...
 

Incremental Feature Development with Web Components

  • 1. @ALINPANDICHI #ITAKEUNCONF INCREMENTAL FEATURE DEVELOPMENT WITH WEB COMPONENTS A   L I V E   C O D I N G   T A L E Alin Pandichi  |  Software Developer at MozaicLabs
  • 2. SO, WHAT DO YOU DO? Agile Talks in Bucharest Open Space Coding Dojo Product Development from scratch Global Day of Coderetreat Software Developer at MozaicLabs building eventriX  @ALINPANDICHI #ITAKEUNCONF
  • 3. INCREMENTAL FEATURE DEVELOPMENT "increasing increments of capability" - Wikipedia - https://pixabay.com/en/steps-staircase-climbing-1081909/ @ALINPANDICHI #ITAKEUNCONF https://en.wikipedia.org/wiki/Iterative_and_incremental_development
  • 5. AS A DEVELOPER, I WANT TECHNIQUES, SO THAT I CAN DEAL  WITH COMPLEXITY https://www.solutionsiq.com/resource/blog-post/what-big-user-stories-could-be-telling-you/ @ALINPANDICHI #ITAKEUNCONF
  • 6. TECHNIQUES TO DEAL WITH COMPLEXITY Story Slicing Prioritization Commit often (baby steps) Web Components (composable, reusable, interoperable) https://www.solutionsiq.com/resource/blog-post/what-big-user-stories-could-be-telling-you/ @ALINPANDICHI #ITAKEUNCONF https://mozaicworks.com/blog/splitting-user-stories/ https://en.wikipedia.org/wiki/MoSCoW_method http://blog.adrianbolboaca.ro/2013/03/taking-baby-steps/
  • 7. TOOLS TO DEAL WITH COMPLEXITY Web Components 1. Address a common need. 2. Do one job really well. 3. Work predictably in a wide variety of circumstances. 4. Be useful right out of the box. https://www.solutionsiq.com/resource/blog-post/what-big-user-stories-could-be-telling-you/ @ALINPANDICHI #ITAKEUNCONF https://github.com/basic-web-components/components-dev/wiki/Ten-Principles-for-Great-General-Purpose-Web-Components
  • 8. TOOLS TO DEAL WITH COMPLEXITY Web Components 5. Be composable 6. Be styleable. 7. Be extensible. 8. Think small. 9. Adapt to the user and device. 10. Deliver the key benefit to HTML authors, not just coders. https://www.solutionsiq.com/resource/blog-post/what-big-user-stories-could-be-telling-you/ @ALINPANDICHI #ITAKEUNCONF https://github.com/basic-web-components/components-dev/wiki/Ten-Principles-for-Great-General-Purpose-Web-Components
  • 9. OK, I LIED A BIT... Web Components = encapsulated and interoperable custom elements that extend HTML itself https://saikoticmurhmade.deviantart.com/art/ALL-LIES-306278583 @ALINPANDICHI #ITAKEUNCONF
  • 10. OK, I LIED A BIT... Web Components = encapsulated and interoperable custom elements that extend HTML itself https://saikoticmurhmade.deviantart.com/art/ALL-LIES-306278583 @ALINPANDICHI #ITAKEUNCONF
  • 11. OK, I LIED A BIT... Web Components = encapsulated and interoperable custom elements that extend HTML itself https://saikoticmurhmade.deviantart.com/art/ALL-LIES-306278583 ___________________________ @ALINPANDICHI #ITAKEUNCONF
  • 14. REQUIREMENTS Material design A list of talks Button to add new talk Dialog form to add talk Speaker suggestions Auto-complete avatar Delay suggestions Loading bar @ALINPANDICHI #ITAKEUNCONF
  • 16. LAYERS OF COMPONENTS - Debounce   - Autosuggest     - Field       - Input @ALINPANDICHI #ITAKEUNCONF
  • 17. TOOLS & TECHNIQUES Slicing Prioritization Baby steps (commit often) Web Components (composable, reusable, interoperable) @ALINPANDICHI #ITAKEUNCONF https://mozaicworks.com/blog/splitting-user-stories/ https://en.wikipedia.org/wiki/MoSCoW_method http://blog.adrianbolboaca.ro/2013/03/taking-baby-steps/ https://developer.mozilla.org/en-US/docs/Web/Web_Components
  • 20. Q U E S T I O N S ?   F I N D M E O N T W I T T E R @AlinPandichi @ALINPANDICHI #ITAKEUNCONF