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. @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

4. https://twitter.com/uipatternscom/status/610073038596476928
@ALINPANDICHI #ITAKEUNCONF

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

12. FOR EXAMPLE...
https://eventrix.co
@ALINPANDICHI #ITAKEUNCONF

13. FOR EXAMPLE...
https://github.com/apandichi/web-components-feature-dev
@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

15. DEMO TIME!
@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

18. @ALINPANDICHI #ITAKEUNCONF
https://mozaicworks.com/public-trainings-and-workshops/unit-testing-for-react-and-redux-workshop/

19. @ALINPANDICHI #ITAKEUNCONF

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