作者 | 張旭乾 責編 | 夢依丹
出品 | CSDN(id:)
前端和后端開發，哪一個更容易上手？我們時常會在各大技術論壇看到類似的提問。話說興趣是最好的老師，不實踐，你可能很難知道自己更喜歡哪一個？
從Java開發再到前端工程師，他在轉型路上遇到過哪些困難？本文作者張旭乾分享了他的轉型經歷，以及他在學習前端開發過程中，遇到的問題和總結出來的一些經驗，希望對你有所啟發。
我的學習經歷
編程入門
在 2008 年的時候，我進入大專學習 Java 開發，HTML 和 CSS 只是專業的附屬品。那時，主要還是前后端一體化開發，HTML 和 CSS 只是為了結合 Java 里的 生成頁面。 則完全沒有講。
2010 年快畢業的時候，我參加了五個月的 Java EE 培訓，在這期間了解了 HTML、CSS，以及一部分簡單的 DOM 操作和 ，能夠編寫一些帶交互的頁面和 Ajax 異步請求。
在這期間，我沒有太重視 HTML/CSS/JS 基礎。因為本身剛入門，并不知道哪些重要，哪些不重要。在做項目的時候，頁面部分要自己在網上搜索 HTML 標簽和 CSS 屬性的用法。對于 JS 部分，則只會 ，高級的語法（例如閉包、原型鏈）完全沒有概念，只知道該怎么定義變量，處理事件，做一些基本的邏輯處理。
順利轉正，還加薪10%
我的第一份工作是 Java 開發，當時公司用的技術很新潮，算是前后端分離的雛形。頁面部分完全使用了 ExtJS 庫，它提供了一組現成的 UI 組件，所有的數據都是通過 Ajax 來從后端獲取，后端則用 Java 的 提供JSON 數據。
這份工作的主要難點是一開始不了解前后端分離的開發模式。由于是第一次嘗試完全在客戶端 JS 去請求數據，所以理解起來需要一點時間，當時閱讀了 ExtJS 相關的文檔，才大體的了解到這種開發模式。基本上是利用 Ajax 請求數據，然后通過它內置的 API 來填充 UI。后面隨著開發的功能變多，對這種模式也適應了。
努力學習還是有回報的，過了三個月試用期之后，因為工作比較出色，在拿到正式員工薪資的基礎上，又額外加薪了 10%。所以剛進入公司的時候不要怕上不了手，主流的技術遇到不會的地方要善于自行查找資料解決，對于公司內部的技術要勇于向前輩請教。
自由職業：實踐與進階
2010 年底從第一家公司離職，回到家里自己充電，學習了 PHP。因為當時建站非常流行，學了 PHP 既可以做個人站長，也可以通過自由職業，為客戶建站來賺取收入。因為部署網站的主機基本上都支持 PHP 和 ASP，而 PHP 更加流行，所以我就自學了 PHP，通過官方文檔，加上實戰并結合搜索引擎搜索問題來學習。學完了之后就在網上發了個廣告，提供個人建站服務，此時的我還是全棧開發。
2011 年底左右，廣告發完了我就忘了，沒把它太當回事。大年初六突然收到一個客戶的電話，需要做一個網站，這讓我興奮不已。我給這位客戶一共做了兩個網站：
真正有挑戰的是第 2 個項目，頁面部分幾乎遇到了前端開發中全部常見的難題：
JS 代碼管理
當時 UI 部分選擇了和 配套的 UI。 UI 封裝了一組常見的 UI 組件，例如拖拽、對話框、按鈕等組件，可以少寫一些邏輯代碼。盡管如此，編寫出來的 文件還是亂七八糟，因為頁面上有很多表格組件，需要在獲取數據后，手動去循環展示表格，并在刪除或修改的時候，還要修改 DOM 更新表格；另外還有其它邏輯，例如登錄、查詢等。
雖然代碼分散在了不同的 JS 里，但是有的頁面因為業務邏輯比較復雜，加上當時我也不太了解 JS 的復用方式和邏輯，導致了很多重復的代碼。我還有當時的源代碼，可以感受一下代碼的長度（兩張圖片為同一 JS 文件的不同部分，這里通過縮略圖展示）：
一個 JS 文件中的代碼
兼容性調整
彼時，瀏覽器主流的還是 IE，所以還是需要做一些兼容性調整。不過好在 主打的就是兼容全部瀏覽器，所以 JS 方面沒有太大問題，剩下的就是 CSS。這個項目在 IE、、火狐下顯示的都不一致，后來查了一下，解決方法可以根據瀏覽器特定的語法，編寫只在特定瀏覽器能識別的 CSS 屬性，或者選擇器，也就是所謂的 CSS hacks。另外也可以使用瀏覽器特殊的 HTML 指令，加載不同的 CSS 文件，最終把頁面調成一致就可以了。
性能調優
因為項目頁面部分處理數據比較多，加上開發經驗有限，當時也只是在代碼效率上進行了優化，例如減少不必要的循環操作等。
與客戶溝通需求
這個是開發的軟技能了，學會如何拒絕不合理的需求。因為當時我是第一次面對客戶，也沒有自信，所以客戶說改什么，我立刻就開始給他改。這期間客戶最常見的話術就是：“這個功能很簡單，你做一下”，或者“這個問題很容易解決，花不了你幾分鐘”。當時我真覺得功能或者問題挺簡單的，但是實際操作起來，發現要比想象的難多了。做了幾次之后，知道無論多簡單的功能或問題，都會涉及很多的細節，所以后面客戶再提要求的時候，我就把這些細節先說清楚，給他一個大概的完工時間，再加上新增的功能需要額外收費，客戶就會自己斟酌要不要做了。
網頁設計水平
還有一個意外，讓我學了一部分設計知識。在給這個客戶做質量保證系統的時候，還要求附帶一個產品的官網，客戶給我發了產品資料之后，我參考網上同品類的網站，幫他設計了一版，但是客戶以不夠大氣為由，讓我重新設計，我又設計了一次，客戶還是覺得不夠好，反復幾次，似乎無法滿足他的需求，他就把官網這部分給別人做了。當時我也有點憋氣，于是買了本《寫給大家看的設計書》，專門學習了一些設計原則，努力提高自己的設計能力。后來等客戶的官網上線之后，發現設計的也一般，大概是審美不同吧。
在自由職業后半段時間學習了其它的框架，那個時候 3、 之類的 HTML/CSS 框架開始爆火，因為十分喜歡學習新的技術，我就去看了看它們的介紹，看到 3 內置了很多組件，并且不怎么需要寫 CSS，就學了一下 3。 3 內部使用了 LESS 這個 CSS 預編譯工具來生成 CSS，如果要自定義它的樣式，還需要會 LESS。我就又看了一下 LESS 的文檔，發現它提供了很多實用的功能，例如變量、繼承、嵌套等，感覺很有意思也順便學了。
從這里你就可以知道：前端庫是互相依賴的。如果直接看前端需要哪些庫，那么零零散散的有一堆，但是當你真的開始下手學習一個框架的時候，你會發現好多框架可以從一條線里牽出來，構成一個完整的開發工具庫，這些自然就都掌握了。
初識 Vue
前邊所有的經歷，奠定了我轉型前端所需要的技術基礎。而在從事自由職業期間，我發現我還是喜歡看做得見的項目，從 0 設計界面，直至實現出來，很有成就感，并且我也享受在設計過程中，靈感迸發的快樂，心底就有了想轉前端的火苗。不過第 2 份工作，從 2013 年到 2016 年，我仍然做的是 Java 開發。
真正讓我對前端產生興趣，是 2016 年去留學之后。在 2017 年第一個學期，有同學問我 React 的問題，我不太會，于是就上網幫同學查，查著查著，就發現前端已經獨立作為一個職業了，再接著從 React 文檔找問題的解決方案時，發現之前我用 的問題在 React 中全部都解決了，可以不用手動維護數據和 UI 之間的同步了，這讓我感到很欣慰，發誓等這學期放暑假，就深入學習一下。
很快，暑假就到了，要兌現承諾開始學前端。當時室友學了高級 Web 編程，主要講的是 React，React 在那個時候還非常難用，應該還是 React 15，需要手動配置好多東西：Babel、Bower.js 之類的。看著室友遇到一個組件顯示不出來，經過一天的搜索解決方案，才發現是組件名大小寫不一致導致的css 設置圖片自動填充，這個讓我有點對 React 好感度降低css 設置圖片自動填充，不想學了。
后來我就研究了一下 Vue，發現普遍的說法是：功能和 React 類似，但是國內用 Vue 的多，國外用 React 的多。看了下 Vue 是華人尤雨溪開發的，很佩服，據說上手比較容易，于是就決定先看看 Vue?
在把 Vue 官方文檔基礎部分看完之后，結合 的一些視頻所教授的開發方法，大概一周的時間，覺得可以上手了，就想了一下練習項目。當時了解到 Vue 適合開發單頁應用，看了一下單頁應用的特點，發現似乎就是網頁版 App 的概念? 于是，我就想著把當時我用的最多的網易云音樂模仿一下。花了一周多的時間，實現了首頁 UI、添加歌曲，播放、暫停、快進、快退等功能，期間學會了 CSS flex 布局。
使用 Vue 仿網易云音樂（左）的最終界面（右）
后來發現網頁版的功能局限性比較大，想著能不能做成桌面端的。當時室友在學校的課里學 ，一個跨平臺的桌面開發框架，只用編寫 HTML? CSS 和 ，就可以生成在 Mac、、Linux 操作系統都能運行的應用。于是我又把應用遷到了 上面。
從 這里也了解到了，Node.js 到底和瀏覽器 JS 運行時到底有什么不同：在 Node.js 的環境下，可以訪問更底層的操作系統級 API，例如訪問本地文件，這樣可以方便用戶自行添加音樂。
做這個項目的時候，也遇到了很多問題：
通過這個小項目的開發，對 VUE 算是入門了，還得出了結論：
學前端，或者任何編程知識，一定要結合實踐才能快速入門并掌握它們。
受挫轉型前端，嘗試 React
學完 Vue 之后暑假差不多也快結束了，最后一個學期都在努力學專業課，沒有再看前端相關的東西。2018 年回國之后，開始找工作。因為留學的主要方向是分布式和云計算，所以我還是想以 Java 開發為主。面試的時候遭到了很多不屑，大多是看我剛研究生畢業，而以前的開發經歷也沒什么出彩的地方，就都草草了事了。這些經歷讓我很受打擊，但是讓我清楚的知道了，縱使有一肚子墨水，但是拿不出實際的產品，或者滿足不了面試官的喜好，就不可能面試成功。
當然我不會否定自己，最后一次面試失敗之后，突然就想要不要改行做一下前端，畢竟留學的時候鉆研了不少，又在自由職業的時候做過一些產品，更是有濃厚的興趣，于是我立刻下了決心轉前端。
下定決心之后，我一刻也沒閑著，開始看前端的工作要求。在某招聘 App 上搜了一圈，發現 React 在大廠用的多、工資也高一點，我就又開始自學 React，花了一周看了看官方文檔，寫了一個特別小的、只有一個頁面的小例子，之后就開始投簡歷了。期間還看了看 React 、Redux，以及 ES6 的新特性。
在閱讀 React 官方文檔的時候，發現有一節是《 in React》，里邊詳細的介紹了 React 組件化開發的步驟，并且解釋了什么時候需要定義組件，文檔提供了一個表格 UI 作為示例，把它拆解成了表格整體、搜索框、表格內容、類別行和產品行組件，說明了為什么這么拆解，有沒有其它拆解的方法，以及拆解過程的方案折中，建議看一看。