Daisuke Shimizu LINE / UIT Department LINE develops numerous services in the form of web app. This session introduces technologies that the front-end development team has employed to resolve issues with reference to actual cases. In addition, the outlook of the newly released LINE Front-end Framework (LIFF) will also be discussed.

1. FUTURE OF LINE
THROUGH ITS FRONT-END DEVELOPMENT
LINE UIT Department Daisuke Shimizu

2. Agenda • What does LINE Front-End Team do?
• Challenges & Experience
• What's New & Next

3. UIT TEAM
TAIWAN
THAILAND
KOREA
TOKYO
FUKUOKA
VIETNAM New
KYOTO New

4. LET’S CONTRIBUTE TO OSS!

5. WEB APP AT LINE

6. FAMILY SERVICE

7. CHALLENGES & EXPERIENCE

8. HYBRID APP

9. COST & FLEXIBILITY
Web App
Native API Server APIBrowser API
Pros: low cost
Cons: flexibility
Pros: low cost
Cons: compatible
Pros: flexibility
Cons: high cost

10. COST & FLEXIBILITY
Web App
Native API Server APIBrowser API
Pros: low cost
Cons: flexibility
Pros: low cost
Cons: compatible
Pros: flexibility
Cons: high cost

11. CODE SPLITTING
grow loader
class SampleClass {
@grow
methodToGrow() {
// ...
}
@grow
methodToGrowAndBind = () => {
// ...
}
methodToBeBundled(){
}
}
const sample = new SampleClass();
console.assert(a.methodToGrow === undefined);
console.assert(a.methodToGrowAndBind === undefined);
sample.grow().then(() => {
sample.methodToGrow();
sample.methodToGrowAndBind();
});

12. SKELETON SCREEN

13. PAGE TRANSITION

14. LINE ANALYTICS
● “torimochi”

15. HEAT MAP
● “yakimochi”

16. UI FRAMEWORK
● “koromo“
● “koromo-vue“

17. import KvStickerPicker from
'@linecorp/koromo-vue/components/
sticker/Sticker';
export default {
...
methods: {
onSelect(data) {
console.log(data);
}
}
}
<kv-sticker-picker
:sticker-array=“stickerData"
@select="onSelect"/>

18. SASS LIBRARY
● “sasslai”

19. WHAT'S NEXT

20. LIFF
LINE Front-end Framework

22. liff.init(
data => {
// Now you can call LIFF API
const userId = data.context.userId;
liff.getProfile()
.then(profile => {
const pictureUrl = profile.pictureUrl;
const displayName = profile.displayName;
})
.catch((err) => {
window.alert(err.message);
});
},
err => {
// LIFF initialization failed
}
);
INIT & GET PROFILE

23. liff.sendMessages([
{
type:'text',
text:'Hello, World!'
}
])
.then(() => {
console.log('message sent');
})
.catch((err) => {
console.log('error', err);
});
MESSAGING API

24. CHAT APP PLATFORM
● Tenor GIFs

25. MULTIPLE VIEW TYPE
compact tall full

26. LINE DEVELOPERS COMMUNITY

27. (IMADOKO)
● Location sharing service
in chat screen

28. MY BODY BOT
● Clova Extensions Kit Messaging
API
● Healthcare App

29. 500+ active LIFF Apps
LET’S DEVELOP APP IN LINE
https://developers.line.me
https://github.com/line/line-liff-starter

30. THANK YOU