Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LIFF SDK: UI Framework for LIFF Apps

LIFF SDK: UI Framework for LIFF Apps

Eebedc2ee7ff95ffb9d9102c6d4a065c?s=128

LINE DevDay 2020

November 26, 2020
Tweet

Transcript

  1. None
  2. Agenda › Introduction to LIFF-UI (LUI) › Our Users ›

    Motivation › Features › Example › Future
  3. › UI framework for building LIFF apps › A set

    of high quality components tailor- made for the LIFF apps › For internal use only right now LIFF-UI (LUI)
  4. LINE Sticker Shop LINE POINT Our Users Who are using

    LUI LINE NEWS Fortune And More
  5. Motivation Why we start making LUI › Reduce implementation costs

    other LINE developers might spent › Promote a consistent UI and UX for LINE family services using LIFF › Accelerate migration from old framework to LIFF framework internally
  6. Features of LUI › Provide consistent user experience across different

    LIFF apps Consistent Reusable › Reusable components via NPM and CDN that cover all kinds of scenarios Easy Integration › Using WebComponent based technology enables it to be quickly integrated into any frameworks Customizable › Flexible interface allows it to be customized to specific functional requirements
  7. › LUI Navigation Bar › LUI Navigation Back Example Components

  8. Example Components LUI Navigation Bar + LUI Navigation Back LUI

    Navigation Back LUI Navigation Bar
  9. Example Components LUI Navigation Bar + LUI Navigation Back LUI

    Navigation Back LUI Navigation Bar
  10. Example Components LUI Navigation Bar + LUI Navigation Back Customizable

    Slots
  11. Example Components LUI Navigation Bar + LUI Navigation Back Customizable

    Slots
  12. Example Components LUI Navigation Bar + LUI Navigation Back Customizable

    Slots
  13. Example Components LUI Navigation Bar + LUI Navigation Back Customizable

    Slots
  14. Example Components LUI Navigation Bar + LUI Navigation Back Auto

    Android Layout
  15. Usage of Components How to use LUI Navigation Bar +

    LUI Navigation Back › Use custom elements in plain HTML › Specify styles and behaviors by attributes › 3 customizable slots can hold child elements
  16. Usage of Components How to use LUI Navigation Bar +

    LUI Navigation Back › It is also super easy to integrate into the React or Vue apps › Can be combined with your existing components without compromising performance
  17. Documentation

  18. Future of LUI More handy components coming Publish to MINI

    developers Better guide and tools support
  19. Thank you