Head first into composition API

A live coding demo to showcase Vue Composition API and maybe address FUD if that’s still relevant.

Resources:
https://vue-composition-api-rfc.netlify.com
https://github.com/vuejs/composition-api
https://github.com/znck/dogsay

Transcript

1. Composition API
   

   View Slide

2. Why do we
   need one more API?
   

   View Slide

3. We had problems!
   Code Organisation
   
   Logic Extraction
   

   View Slide

4. Options Based API
   Component Logic can be
   
   split in 6-10 options.
   
   data, props, computed,
   methods, watch and life cycle
   
   methods
   

   View Slide

5. Logic Extraction
   There is no efficient logic
   extraction mechanism in
   
   current API.
   

   View Slide

6. Problems with
   Mixins
   Namespace Collision
   
   Obscure and unclear origin
   

   View Slide

7. Problems with
   Mixin Factories
   Namespace Collision
   
   Obscure and unclear origin
   

   View Slide

8. Problems with
   Scoped Slots
   Locked in Templates
   
   Multiple Sources
   
   Limited Intellisense
   

   View Slide

9. Problems with
   Type Inference
   this type is complex
   
   Limited Intellisense
   

   View Slide

10. How does
    Composition API
    
    solve this?
    

    View Slide

11. Crash Course
    JavaScript
    define function
    
    call functions
    

    View Slide

12. Crash Course
    Composition API
    define function
    
    call functions
    

    View Slide

13. Code
    

    View Slide

14. Resources
    vue-composition-api-rfc.netlify.com
    github.com/vuejs/composition-api
    github.com/znck/dogsay
    

    View Slide