前言
大家好，我是前端開發中心(UIT) Front-end Dev. 9的鴻巣，負責 LINE Sukimani 和 LINE Creators Market 的前端開發。
為了調查內部前端工程師的趨勢和工具的使用，UIT 每年都會對公司進行「UIT Survey」調查。它始於 2018 年，基於Ashley Nolan-san所設計的第 5 次 Front-end Tooling Survey。 以下是 11 月進行的 2022 年調查的結果。
介紹
- 對象：LINE 前端工程師，受訪者包括日本、韓國、越南和泰國...等組織
- 約七成受訪者為日本工程師
- 回答語言: 英語
- 回答期間: 2022/11/22-2022/11/30
- 回收數: 123名
結果
・LINE前端工程師的職涯狀態
・關於 CSS/UI Framework
・JavaScript 周邊使用工具
・關於 React 的看法
・關於 Vue 的看法
技術主題從三個角度提出：個人經驗、內部專案的使用和偏好，與使用方式無關。 因此，根據主題的不同，最多會有三個不同的觀點問題。
關於 LINE的工程師
How many years have you worked for LINE?
How many companies have you worked at before LINE?
在加入 LINE 之前，超過 80% 的工程師曾在不止一家公司工作。
What language(s) do you use in your job?
|
LINE
|
LINE Fukuoka
|
LINE+
|
|---|---|---|
|
|
|
|
以上的題目是選擇題，有些工程師在工作中會用到多種系(縱軸是選擇該項目的受訪者人數的百分比)，雖然 LINE Tokyo 的許多工程師大多情況下都使用日語，但在 LINE Fukuoka 中，即使同在日本內的開發組織中，使用英語的比例越來越高了。 雖然每個組織間的趨勢都有些許差異，但我們可以看到有很多工程師每天都在接觸多種語系。 我們還有一個團隊，當有日語和英語的人同時存在時，他們會請口譯員來協助會議。
How many times do you work remotely in an average week?
近 70% 的工程師幾乎每天都在遠程工作。
關於 CSS/UI Framework
CSS Knowledge
How would you rate your own knowledge of CSS and its associated tolls and technologies?
Usage of CSS processors
Which of these CSS processors do you regularly use in your project(s) at LINE? (Multiple selection)
Experience with UI frameworks
Please indicate your experience with the following UI frameworks.
koromo、Astro、LDSG 是內部 UI 框架，koromo是基於Bootstrap實現的。
Usage of UI frameworks
Which of the following UI frameworks do you use in your project(s) at LINE? (Multiple selection)
|
All
|
LINE Fukuoka
|
|---|---|
|
|
|
對比整體趨勢，LINE Fukuoka 的工程師在他們負責的專案中，似乎大多是在不使用 UI 框架的情況下，從頭開始刻 UI。 在 LINE Fukuoka中，有很多為終端用戶開發服務的工程師，可能因為每個服務都有許多客製設計而影響到。
Preferred UI frameworks
Please indicate your most preferred UI frameworks.
雖然與之前的調查相比，更喜歡 Tailwind 的工程師人數有所增加，但可以看出，也有很多工程師更喜歡「None」，即從頭開始實現一個 UI，而不使用任何東西。
Usage of CSS methodologies or tools
Which of these CSS methodologies or tools do you use on your project(s) at LINE? (Multiple selection)
Experience with CSS features
Please indicate your experience with the following CSS features.
JavaScript及相關工具的使用
Javascript Knowledge
How do you rate your own knowledge of JavaScript and its associated tools and methodologies?
Experience with JavaScript libraries/frameworks
Please indicate your experience with the following JavaScript libraries/frameworks.
Usage of JavaScript libraries/frameworks
Which library/framework do you use for your project(s) at LINE? (Multiple selection)
60% 的工程師參與了採用 React 的項目，這說明 React 是占主導地位。
Preferred JavaScript libraries/frameworks
Please indicate your most preferred JavaScript library/framework.
|
All (LINE, LINE Fukuoka, LINE+, LINE Growth Technology, etc...)
|
LINE
|
|---|---|
|
|
|
從整個公司來看，React 占主導地位，但僅限於 LINE Tokyo工程師。而有很多工程師更喜歡 Vue.js。我不太確定因果關係，可能是 Vue.js 被用於許多 LINE Tokyo 工程師實際參與的專案當中。
Experience with JavaScript modules bundlers
Please indicate your experience with the following modules bundlers.
Usage of JavaScript module bundlers
Which module bundler do you use for your project(s) at LINE? (Multiple selection)
在公司裡，webpack 的採用的比例還是鋪天蓋地，但在新專案中導入 Vite 的數量也是持續上升中。
Preferred JavaScript module bundlers
Please select your most preferred JavaScript module bundlers for your next project at LINE.
從「公司接下來的項目會採用什麼？」的角度來看，似乎webpack還是很流行的。
Usage of Alt-JS
Which language do you use for your project(s) at LINE? (Multiple selection)
我們詢問的項目包含「正在使用 TypeScript」、「使用 JavaScript」還是「正在從 JavaScript 過渡到 TypeScript」。 雖然 70% 的工程師都有參與 TypeScript 專案開發，但一半的工程師還是持續參與 JavaScript 專案開發。
Experience with tools for testing
Please indicate your experience of tools for testing.
Usage of tools for testing
Which tools do you use for testing in your project(s) at LINE? (Multiple selection)
Usage of performance tools / features
Which performance tools / features do you use in your project(s) at LINE? (Multiple selection)
Knowledge regarding accessibility
Have you read any of the following documents related to accessibility? (Multiple selection)
內部文件已製定一份名為「LINE Accessibility Guidelines」來實踐無障礙設計來提供給工程師。
關於 React
Experience with libraries for React state management
Please indicate your experience with the following libraries for React state management.
Usage of library for React state management
Which of the following libraries do you use for React state management in your project(s) at LINE? (Multiple selection)
Preferred library for React state management
Please select your most preferred library for your next React project state management.
雖然 Recoil 是繼 Redux 之後第二受歡迎的狀態管理套件，但大多數工程師選擇什麼都不用。
Usage of CSS tools for React
Which of the following CSS tools for React do you use in your project(s) at LINE? (Multiple selection)
公司中似乎有一定數量的案例是將 CSS 與 React 應用程式的程式碼分開處理。 這可能是因為一些團隊除了前端工程師之外還特定的 Mark-up Engineer。
Preferred CSS tools for React
Please indicate your most preferred CSS tools for React.
關於 Vue
Experience with libraries for state management in Vue
Please indicate your experience with the following libraries for state management in Vue.
Pinia 被譽為下一代的 Vuex，但知名度仍然很低。
Usage of libraries for state management in Vue
Which of the following libraries for state management in Vue in your project(s)? (Multiple selection)
Preferred library for state management in Vue
Please select your most preferred library for your next Vue project state management.
總結
・每天使用多種語系工作的工程師很多。 另一方面，使用的語言因地區而異。
・遠端工作已經普及，近70%的工程師目前都在遠端工作。
・25% 的受訪者參與了內部不使用 UI 框架並從頭開始開發專案。
・雖然在公司裡喜歡 Tailwind 的工程師蔓延開來，但還是有很多工程師喜歡從頭開始撰寫 UI。
・喜歡 React 的工程師占大多。但根據地區不同，趨勢也有所不同，與其他區域相比，Vue 在 LINE Tokyo 中特別受歡迎。
・越來越多人使用 Vite 作為下一代打包工具而不是 webpack 的趨勢也越來越引人注目。
・預計未來採用 Vite 的案例數量將從「Preferred JavaScript module bundlers」的問題之後開始增加。
・儘管在內部項目中採用 Redux 的案例仍然很多，但根據經驗和喜好的反應，預計未來 Recoil 的使用率也會繼續成長。
・ Pinia 作為 Vuex 的繼承者，但 Vuex 在體驗、使用和偏好方面仍然佔據主導地位。
如果 UIT Survey 能夠激發在 LINE 或前端開發中心服務的前端工程師的興趣，我會非常高興。 除此之外，UIT 正在透過發布 Podcast「UIT INSIDE」來傳播相關訊息，在那裡您可以吸收到 「最新的前端」知識並可以定期參加Meetup，歡迎大家持續關注我們唷！