Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Incremental Feature Development with Web Components

141 views

Published on

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.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Incremental Feature Development with Web Components

  1. 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. 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. 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
  4. 4. https://twitter.com/uipatternscom/status/610073038596476928 @ALINPANDICHI #ITAKEUNCONF
  5. 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. 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. 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. 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. 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. 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. 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
  12. 12. FOR EXAMPLE... https://eventrix.co @ALINPANDICHI #ITAKEUNCONF
  13. 13. FOR EXAMPLE... https://github.com/apandichi/web-components-feature-dev @ALINPANDICHI #ITAKEUNCONF
  14. 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
  15. 15. DEMO TIME! @ALINPANDICHI #ITAKEUNCONF
  16. 16. LAYERS OF COMPONENTS - Debounce � - Autosuggest � � - Field � � � - Input @ALINPANDICHI #ITAKEUNCONF
  17. 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
  18. 18. @ALINPANDICHI #ITAKEUNCONF https://mozaicworks.com/public-trainings-and-workshops/unit-testing-for-react-and-redux-workshop/
  19. 19. @ALINPANDICHI #ITAKEUNCONF
  20. 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

×