LIFF SDK: UI Framework for LIFF Apps

Yang Gong
LINE Front-end Dev Team7 Front-End Engineers
https://linedevday.linecorp.com/2020/ja/sessions/3919
https://linedevday.linecorp.com/2020/en/sessions/3919

Transcript

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