Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

WOW Financial × FrontEnd

Slide 3

Slide 3 text

LIU Shuo フロントエンドエンジニア LINE株式会社 フィナンシャル開発センター Web開発室

Slide 4

Slide 4 text

FrontEnd BackEnd Plan Infra Marketing User Design Vendor PM QA

Slide 5

Slide 5 text

Responsibilities プランナー、バックエンド、デザイナーなど協⼒し Web技術でUIを開発する WOWを作る

Slide 6

Slide 6 text

& Plan Wireframe/Spec Review 積極的に提案 無理せず 随時相談 声かけ/Slack

Slide 7

Slide 7 text

Wireframe example

Slide 8

Slide 8 text

& Design Design Review MTG Interaction Guideline `Pixel` Perfect / Design QA 無理せず積極提案 随時相談(Slackで⽇韓翻訳bot)

Slide 9

Slide 9 text

Zeplin コミュニケーション System design CSS snippets

Slide 10

Slide 10 text

`Pixel` Perfect 余⽩が⼤事 全体的なバランスが⼤事 Design Systemが課題

Slide 11

Slide 11 text

& PM 開発⾒積もり、⽇程調整 定例、朝会 おかげで開発に集中できる

Slide 12

Slide 12 text

& BackEnd API MOCKを⾃分で管理する API Specは相談しながら決める Node.js持ちながら、⼀部BFFを適⽤中

Slide 13

Slide 13 text

& Vendor External JS library integration 偶に⼤変

Slide 14

Slide 14 text

& Infra Node.js/static server deployment private NPM registry CDN CI …

Slide 15

Slide 15 text

Private NPM registry 社内⽤ いいものはシェアしましょう! pkg(node)

Slide 16

Slide 16 text

Jenkins pipeline

Slide 17

Slide 17 text

& Marketing Data Tracking 要件レビュー、実装（偶に⼤変)

Slide 18

Slide 18 text

& QA QAの⽅は⽬が鋭い 私たちは妥協せず、無理せず Issueの⼤半はフロントエンド Oh, Android …

Slide 19

Slide 19 text

vs User UX重視、ユーザ⽬線 Smoothさを追求 パフォーマンス向上 Error Tracking(Sentry)

Slide 20

Slide 20 text

12 Team members Fukuoka + Osaki 英語(Slack) + ⽇本語 + TypeScript !

Slide 21

Slide 21 text

Tech Stack lerna TS + React + Jest CSS-modules(postCSS) + styled-components + SVG express prettier + eslint + stylelint LINE Internal SDK, lottie-web …(growing)

Slide 22

Slide 22 text

TypeScript Advanced Types noImplicitAny: true(*) Fix external modules うちのチームに @uhyo_ がいる

Slide 23

Slide 23 text

E2E + Unit test

Slide 24

Slide 24 text

Code Review

Slide 25

Slide 25 text

WebDev Style(WIP) Done is better than perfect Write simple & easy-to-delete code We discuss Design before coding …

Slide 26

Slide 26 text

To Challenge Micro Frontends SSR Standardization …

Slide 27

Slide 27 text

WOW of FrontEnd UXやパフォーマンスに妥協しない 新技術を積極的に⼊れてみる体制 誰でも提案できる、話し合える環境 他部署のFrontEndエンジニアと簡単にコミュニケーション メンバーと⼀緒に成⻑していく

Slide 28

Slide 28 text

FrontEnd in LINE Corp Tokyo/Kyoto/Fukuoka/Korea/Vietnam/Taiwan.. Global Workshop UIT Meetup(Tokyo) Many web apps running in LINE

Slide 29

Slide 29 text

Join us, WOW together 求める経験・スキルなどはこちら https://linecorp.com/ja/career/position/1102

Slide 30

Slide 30 text

LINE証券 FrontEnd LINE Engineering Blogを通じて発信しています。 ぜひご覧になってください。LINE証券 FrontEnd

Slide 31

Slide 31 text

Thanks