Blog - LINE ENGINEERING

sunderls

sunderls is a front-end engineer

【LINE証券 FrontEnd】Page Stack の進化と課題
sunderls2020-06-19
sunderls is a front-end engineer
Header Parallax Transition swipe gestureの改善 componentCanSwipe componentWillExit Page Stackは膨大化になるのでは？ BrowserのNative Swipe Gestureとコンフリクトしない？ブラウザー環境ではPage Stackを使う意味あるのか？ Functional Componentでは動けるか？結論この記事は、LINE証券の開発メンバーが、LINE証券のフロントエンドにまつわる様々なトピックや、開発中に得た知見を共有する【LINE証券 FrontEnd】シリーズの2記事目です。はじめにこんにちは、sunderlsです。2年前Page Stackについての記事「LINEマンガ：Page Stackを使ってサクサクなページ遷移を実現できました」を出しました。LINE証券でもこのアプローチをとっています。この記事ではPage Stackはどう進化したのか、どんな課題を抱えているのかを説明します。 Header Parallax Transition P
コード分割（Code Splitting）を簡単に実装できるgrow-loaderを作った話
sunderls2017-12-21
sunderls is a front-end engineer
はじめにこんにちは、LINEマンガJavaScript担当の@sunderlsです。これはLINE Advent Calendar 2017の22日目の記事です。今日は、webpackローダーのgrow-loaderを紹介します。 LINE Engineering Blogの記事「LINEマンガ：Page Stackを使ってサクサクなページ遷移を実現できました」でご紹介しましたが、LINEマンガはWeb技術で実装されています。 Webでネイティブアプリに近いユーザー体験を提供するため、いろいろ工夫しています。今回は、数ある工夫の中からコード分割の実装を紹介したいと思います。なぜコードを分割するのか LINEマンガでは、JavaScriptのソースコードをもともと1つのファイルにバンドルしていました。しかしサービスが成長するにつれて、ページ数が増え仕様も複雑になり、バンドル後のファイルサイズがどんどん大きくなってきました。将来を考えると1つにバンドルするのはやはり望ましくないと考え、コード分割の実装を始めました。一般的な実装最初はreact-loadableのようなHOC（Hi
LINEマンガ：Page Stackを使ってサクサクなページ遷移を実現できました
sunderls2017-10-19
sunderls is a front-end engineer
はじめにこんにちは、LINEマンガでJavaScriptを使った開発を担当しているsunderlsです。 LINEの中でマンガを読めるようになったことに、皆さんお気づきでしょうか。「···」をタップし、「LINEマンガ」アイコンをタップすると、マンガをサクサク読むことができます。実はこの画面はWeb技術で実装しています。画面遷移のスムーズさは、体感的にはネイティブアプリに近いのではと思っていますが、いかがでしょうか。どのような技術を使ったのか、簡単に解説したいと思います。 Webでの実装の課題普段、ReactやVueを使っている方も多いと思います。Routerにトランジションを加えれば、問題なく動作するのではないかと思われるかもしれません。確かにその実装でも動作はしますが、画面遷移をスムーズにするには以下のようないくつかの課題があります。「戻る」ボタンをタップすると、遅延を感じる RouterによってDOMが入れ替えられるのが原因です。 LINEマンガの場合はトップページが長くて複雑なので、「戻る」ボタンの遅延はさらに感じやす
- LINE MANGA

1