Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Agenda › Introduction to LIFF-UI (LUI) › Our Users › Motivation › Features › Example › Future

Slide 3

Slide 3 text

› 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)

Slide 4

Slide 4 text

LINE Sticker Shop LINE POINT Our Users Who are using LUI LINE NEWS Fortune And More

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

› LUI Navigation Bar › LUI Navigation Back Example Components

Slide 8

Slide 8 text

Example Components LUI Navigation Bar + LUI Navigation Back LUI Navigation Back LUI Navigation Bar

Slide 9

Slide 9 text

Example Components LUI Navigation Bar + LUI Navigation Back LUI Navigation Back LUI Navigation Bar

Slide 10

Slide 10 text

Example Components LUI Navigation Bar + LUI Navigation Back Customizable Slots

Slide 11

Slide 11 text

Example Components LUI Navigation Bar + LUI Navigation Back Customizable Slots

Slide 12

Slide 12 text

Example Components LUI Navigation Bar + LUI Navigation Back Customizable Slots

Slide 13

Slide 13 text

Example Components LUI Navigation Bar + LUI Navigation Back Customizable Slots

Slide 14

Slide 14 text

Example Components LUI Navigation Bar + LUI Navigation Back Auto Android Layout

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Documentation

Slide 18

Slide 18 text

Future of LUI More handy components coming Publish to MINI developers Better guide and tools support

Slide 19

Slide 19 text

Thank you