前段時間,有幾個朋友問我如何成為一名前端開發(fā)人員。我向他們介紹了要走的路,還給了他們一些關(guān)鍵字,例如Git、HTML、CSS等。但后來我發(fā)現(xiàn),對于沒有任何編程背景的人來說,進(jìn)入這個行業(yè)是有障礙的。他們應(yīng)該首先熟悉生態(tài)系統(tǒng)。
他們很快就會被大量的教育材料所淹沒,對于每個關(guān)鍵字,谷歌都會返回大量的結(jié)果。就像你想買你的第一輛車,有很多不同的車型,有不同的選擇,價格相同。如果你沒有得到任何關(guān)于你的目標(biāo)規(guī)格的建議,你很快就會感到困惑,要么選擇壞的,要么離開商店。
在本文中,我將嘗試為您提供軟件開發(fā)生態(tài)系統(tǒng)的觀點和概述。我還將為您提供一些有用的關(guān)鍵字,以及一些指向?qū)W習(xí)材料和博客文章的鏈接。最后,你會帶著一張學(xué)習(xí)路線圖離開。
在開始之前,我想再次提醒一下,前端開發(fā)是最擁擠的開發(fā)者社區(qū)之一,所以不要害怕大量奇怪的名稱、庫和技術(shù)。目標(biāo)是使您免于被人群淹沒,并為您提供可以幫助您找到方向的知識。
讓我們從網(wǎng)頁由什么組成的問題開始。
將網(wǎng)站想象成一本包含一些頁面的書,一本高級書,其中每一頁都由圖像、文本、視頻、音頻和一個名為鏈接的特殊元素組成。在網(wǎng)頁上,我們可以將所有這些元素放在一起,將它們設(shè)置為帶有字體和顏色的書頁,也可以將它們放在不同的布局中。
正是鏈接使網(wǎng)頁不同于一本書。鏈接的作用是幫助您以非順序的順序在頁面之間導(dǎo)航。鏈接可以將訪問者帶到網(wǎng)站的任意頁面。您可以根據(jù)每頁上的鏈接在頁面之間跳轉(zhuǎn),甚至可以跳轉(zhuǎn)到其他書籍的頁面。
你在網(wǎng)頁上看到的幾乎所有其他東西都是這些基本元素的組合:
網(wǎng)站的目的是提供信息以及特定于業(yè)務(wù)的用戶體驗。
支持 Web 開發(fā)的主要技術(shù)有以下三種:
“超文本標(biāo)記語言 (HTML) 是設(shè)計用于在Web 瀏覽器中顯示的文檔的標(biāo)準(zhǔn)標(biāo)記語言。它可以通過級聯(lián)樣式表(CSS) 等技術(shù)和 JavaScript 等腳本語言來輔助?!?—維基百科
HTML 是一種標(biāo)記語言。這意味著您通過稱為標(biāo)簽的 HTML 元素創(chuàng)建頁面內(nèi)容。每個標(biāo)簽都有自己的特定屬性和行為。
這是HTML 標(biāo)記[1]列表。
HTML 用于構(gòu)建頁面內(nèi)容。在 CSS 的幫助下,可以根據(jù)布局、顏色、字體和樣式設(shè)置頁面樣式。使用 CSS,我們可以制作可維護(hù)和可擴(kuò)展的樣式。
JavaScript 是一種瀏覽器可以理解的動態(tài)腳本語言。在 JavaScript 的幫助下,網(wǎng)頁可以進(jìn)行交互,例如當(dāng)您單擊按鈕時,您可以向用戶顯示特定數(shù)據(jù)。想想你以前見過的所有登錄按鈕。JavaScript 支持它們以啟用它們的功能和交互。
所以現(xiàn)在我們知道,借助三種技術(shù),我們可以構(gòu)建網(wǎng)頁。我們將在進(jìn)一步的步驟中研究如何做到這一點。
在這一點上,我將為您提供整個軟件開發(fā)過程的廣泛而簡單的視角,從您開始編寫第一行代碼到您將 Web 應(yīng)用程序上線。這個過程在任何軟件開發(fā)平臺上都有所相同,包括 Android 和 iOS。
為您提供此概述的目的是表明軟件開發(fā)過程不僅僅是編寫代碼。在其中,您會聽到很多與流程其他部分相關(guān)的奇怪和新詞。
軟件開發(fā)過程非常重要
記住這個事實:整個過程是迭代的。每次將應(yīng)用程序上線時,您都應(yīng)該監(jiān)控用戶或利益相關(guān)者的請求和反饋,然后計劃更改。
如果您在團(tuán)隊中工作,甚至單獨工作,您需要了解的一件事就是源代碼控制。軟件開發(fā)發(fā)生在迭代中,并且在每次迭代中,您都會添加新功能或修復(fù)錯誤。為了跟蹤源代碼的變化,我們需要一種機(jī)制。源代碼控制工具是跟蹤代碼庫更改并允許團(tuán)隊中代碼庫協(xié)作的方法。
Git[2] 是開發(fā)人員最常用的源代碼控制工具之一。正如Web Development Glossary[3]中所述,“Git 是一個分布式版本控制系統(tǒng),用于在開發(fā)過程中跟蹤源代碼的更改。它是為協(xié)調(diào)程序員之間的工作而設(shè)計的,但它可用于跟蹤任何文件集的更改。它的目標(biāo)包括速度、數(shù)據(jù)完整性以及對分布式非線性工作流的支持?!?/span>
源代碼控制機(jī)制
這是一個有趣的話題。我們將了解一些重要的平臺,這些平臺可以幫助您與他人交流、學(xué)習(xí)和分享您的挑戰(zhàn)。技術(shù)行業(yè),尤其?是軟件行業(yè)的溝通對所有參與者都至關(guān)重要??萍夹袠I(yè)發(fā)展迅速,其中一個原因是該行業(yè)的溝通和知識共享精神。
在本主題中,我將為您提供一些指向技術(shù)知識中心的鏈接,尤其是那些用于前端開發(fā)的知識中心。
W3Schools 是開始學(xué)習(xí) JavaScript、HTML 和 CSS 的良好參考之一。它還涵蓋了一些其他主題,例如 React 和 SQL。這是開始使用命名主題的好地方。
如果您對特定案例有疑問,可以在 Stack Overflow 中找到答案。這是一個網(wǎng)站,任何在開發(fā)過程中遇到他們不知道如何解決的問題的開發(fā)人員都會首先查看問題和答案。這是一個知識共享和交流平臺。我想其他行業(yè)的人會羨慕我們擁有這個了不起的平臺。
如果您正在尋找任何 JavaScript 或 TypeScript 庫或工具,這里就是將它們保存為存儲庫的地方。將來,您將經(jīng)常使用該網(wǎng)站。這是一個參考和存儲庫,您將使用它來構(gòu)建自己的解決方案并避免重新發(fā)明輪子。
軟件開發(fā)通過將大問題分解為小問題、使用小塊解決方案(代碼)并將它們組合起來解決更大的問題來解決問題。
有幾個云源控制平臺,但這個很特別,因為您可以找到大量流行的開源項目和庫。此外,幾乎所有的 npm 包源代碼都托管在 GitHub 上。將 GitHub 視為共享代碼的平臺。
Udemy 是科技行業(yè)的教育平臺之一,可幫助開發(fā)人員提高技能。這個平臺上有大量與前端開發(fā)相關(guān)的不同課程,您可以瀏覽和選擇。 還有其他平臺,如Coursera、Edx、Lynda等,您可以在其中找到與前端開發(fā)相關(guān)的課程。
該平臺通過引入您需要找到答案的挑戰(zhàn)來幫助您提高編程技能。這些挑戰(zhàn)幫助你學(xué)習(xí)編程、算法和數(shù)據(jù)結(jié)構(gòu)。這是一個非常有用的平臺,可以提高您的編程技能。
在這里,我們將看看用于前端開發(fā)的不同技術(shù)。實際上,最重要的是要學(xué)習(xí) JavaScript。其余的是可以簡化您的開發(fā)的庫或框架,但最終,它們是基于瀏覽器理解的語言 JavaScript 的庫和框架。
請記住,JavaScript 是最重要的。學(xué)習(xí) JavaScript 極大地幫助您更好地閱讀和理解庫和框架。
你應(yīng)該學(xué)習(xí)的 JavaScript 概念:
接下來要學(xué)習(xí)的是熟悉HTML[10]和CSS3[11]。HTML 和 CSS 組合是您工作的視覺方面。嘗試了解它們的結(jié)構(gòu)和要領(lǐng)。其余的是不同類型的實現(xiàn),如果您了解 HTML 和 CSS,對您來說會很容易。
學(xué)習(xí)JQuery[12],這是一個 JavaScript 庫,旨在簡化 HTML DOM 樹的遍歷和操作,以及事件處理、CSS 動畫和 Ajax。它是免費的開源軟件。
注意:以下定義取自維基百科和其他在線資源。
首先,只關(guān)注一個。作為一名初級開發(fā)人員,你有很多工作機(jī)會——但我再次強調(diào) JavaScript,因為它是你知識的核心結(jié)構(gòu)。
要找到一份初級 Web 開發(fā)人員的工作,首先,請訪問 LinkedIn 等網(wǎng)站。搜索與前端開發(fā)相關(guān)的工作,看看最需要哪些關(guān)鍵字和庫,然后去學(xué)習(xí)它們。
您需要一些工具來編寫、執(zhí)行和調(diào)試代碼。以下是我對基本工具的建議。(注:以下定義取自維基百科和其他在線資源。)
“Visual Studio Code 是微軟為 Windows、Linux 和 macOS 開發(fā)的源代碼編輯器。它包括嵌入式 Git 和對調(diào)試、語法高亮顯示、智能代碼完成、片段和代碼重構(gòu)的支持?!?—維基百科。
“Z shell是一個 Unix shell 或 CLI,可以用作交互式登錄 shell 和 shell 腳本的命令解釋器。ZSH 支持插件并為您提供了許多有助于輕松使用 CLI 的功能”——維基百科。
“Postman 是一個流行的 API 客戶端,它使開發(fā)人員可以輕松地創(chuàng)建、共享、測試和記錄 API。這是通過允許用戶創(chuàng)建和保存簡單和復(fù)雜的 HTTP/s 請求以及讀取他們的響應(yīng)來完成的。” — DZone。
這些是必需品,但肯定有大量的瀏覽器插件和 VS Code 可以簡化您的開發(fā)生活。
為了實現(xiàn)一個目標(biāo),你應(yīng)該有一個計劃和一個路線圖。在本節(jié)中,我將嘗試為您提供成為前端開發(fā)人員的最低路線圖。您可以在兩個月或一年內(nèi)完成路線圖——這完全取決于您。你在這個職業(yè)發(fā)展上投入的時間是一個關(guān)鍵因素。
你可以通過開始 Udemy ReactJs 課程來學(xué)習(xí)前端開發(fā),但是在求職面試中,你會遇到很多新的和未知的問題和關(guān)鍵詞。我的目標(biāo)是幫助你作為一名真正的開發(fā)人員從根本上學(xué)習(xí)前端開發(fā)。還要記住,要學(xué)習(xí)一些東西,你需要做一些事情,所以你需要從零開始編寫代碼。
以下是每個主題的頂級課程和教程列表。那里有大量的內(nèi)容,但這些都是好的開始。只需從每個主題中選擇一兩個即可。
寫這篇文章的動機(jī)是幫助沒有編程背景的熱心人學(xué)習(xí)軟件開發(fā),尤其是 Web 前端開發(fā)。這里討論的內(nèi)容是您在學(xué)習(xí)任何庫或框架之前應(yīng)該學(xué)習(xí)的基本知識。在選擇任何高級教育材料之前,您需要非常了解 JavaScript + HTML + CSS。然后一切都變得容易多了,你會很快學(xué)會任何前端框架。
謝謝閱讀!
[1] HTML 標(biāo)記: https://www.w3schools.com/TAGS/default.ASP
[2] Git: https://git-scm.com/
[3] Web Development Glossary: https://books.google.ca/books?id=nYjhDwAAQBAJ&pg=PT101&lpg=PT101&dq=s+goals+include+speed,+data+integrity,+and+support+for+distributed,+non-linear+workflows.&source=bl&ots=8iV6gquLBx&sig=ACfU3U2E-OmUydwQiMArK3yDjR7M8-Zj-w&hl=en&sa=X&ved=2ahUKEwib0JWuqM_pAhWRVN8KHYeYBoAQ6AEwAHoECAkQAQ#v=onepage&q=s%20goals%20include%20speed%2C%20data%20integrity%2C%20and%20support%20for%20distributed%2C%20non-linear%20workflows.&f=false
[4] W3Schools: https://www.w3schools.com/
[5] Stack Overflow: https://stackoverflow.com/
[6] NPM JS: https://www.npmjs.com/
[7] GitHub: https://github.com/
[8] Udemy : https://www.udemy.com/
[9] hackerrank: https://www.hackerrank.com/
[10] HTML: https://www.w3schools.com/html/
[11] CSS3: https://css-tricks.com/
[12] JQuery: https://jquery.com/
[13] VS Code: https://code.visualstudio.com/
[14] ZSH: https://ohmyz.sh/
[15] Postman: https://www.postman.com/