這些熱門GitHub代碼庫,每個前端開發者都應該收藏

作者:前端宇宙 公號 / 劉小夕

經常會有小夥伴讓推薦好的代碼庫,最近看到了 sayanide 寫的文章,都是非常棒的代碼庫,供大家學習參考。

手頭有大量的資源????總是一件很棒的事。

作爲一個碼農,我們需要專注於功能和最佳實踐,而不是一遍遍地編寫樣板代碼。消除無用功,投入時間學習使用正確的工具或者懂得使用有用的資源可以極大的幫助我們節省時間。

通過本篇文章,我們將會了解一些能夠極大的幫助我們提升 WEB 開發技能的 GitHub 庫,這些庫也會幫助你編寫更好的代碼。

Node.js Best Practices

這個庫是一個很棒的地方,可以讓你隨時瞭解 Node 世界,並在使用時瞭解最佳實踐。擁有 40k Star 和 133 位貢獻者,這個庫幾乎每天都有更新。

該庫對排名較高 Node.js 的最佳實踐進行了總結和整理,包括 Node.js + Docker 最佳實踐。目前擁有超過80多種最佳實踐,風格指南和結構建議等。

一些常見的最佳做法包括:

  • 更好地組織項目

  • 錯誤處理實踐

  • 代碼風格實踐

  • 測試和整體質量實踐

  • 進行生產實踐等等

倉庫地址:

 https://github.com/goldbergyoni/nodebestpractices

HTML5 Boilerplate

HTML5 Boilerplate 是一個專業的前端模板,用於構建快速、健壯和適應性強的 Web 應用程序或者網站。

該項目是多年迭代開發和社區知識的產物。它沒有強加特定的開發理念或者框架,所以你可按照自己的方式自由地構建代碼。

包括像如下的預定義功能:

  • Normalize.css

  • jQuery with CDN

  • Apache Server Configs

  • 有用的 CSS 助手類

  • 默認樣式,性能優化等

根據你想要用的內容以及使用方法,將所需文件複製粘貼到你的工程目錄裏即可。這樣就爲你提供了一個配置好的模板,從而加快了開發速度。

倉庫地址: https://github.com/h5bp/html5-boilerplate

RealWorld

掌握一個新框架的核心概念和意識形態並不是一件令人沮喪的事情。

如果你沒有正確理解這個概念的話,你需要閱讀文檔,運行示例代碼,拆解示例應用程序並將其重新組合在一起,在本地安裝 CLI 等等,它需要花費太多的經歷,令人沮喪。

RealWorld 允許你選擇任何前端(React,Angular2 等)和任何後端(Node , Django 等),並將它們集成在一起以查看應用程序的真實示例。

由於這些實現和技術棧相關,它們顯然不能混用,但它們仍然遵循相同的功能和UX規範。

一些常用集成實例:

  • Angular + ngrx + nx

  • ClojureScript + re-frame

  • React / MobX

  • Go + Gin

  • NestJS + TypeORM/Prisma

你可以在倉庫中找到無窮無盡的示例。盡情去尋找吧!

倉庫地址: https://github.com/gothinkster/realworld

You Don't Know JS Yet

這是一系列深入研究 JavaScript 語言核心機制的書籍。

所有的書籍均爲免費,你可以隨時在線閱讀。

作者建議閱讀的順序爲:

  • Get Started

  • Scope & Closures

  • Objects & Classes (還未開始)

  • Types & Grammar (還未開始)

  • Sync & Async (還未開始)

  • ES.Next & Beyond (還未開始)

倉庫地址: https://github.com/getify/You-Dont-Know-JS

Airbnb JavaScript Guide

這是 Airbnb 提供的非常精確和專業的風格指南。

本指南將通過深入基礎知識和代碼片段來幫助你由深入淺地理解 JavaScript

本指南涉及的一些熱門內容如下:

  • 箭頭函數

  • 變量提升

  • 解構

  • 註釋

  • 性能

  • 測試

倉庫地址: https://github.com/airbnb/javascript

Storybook

Storybook 是 UI 組件的開發環境,它允許你瀏覽組件庫,查看每個組件的不同狀態,以及交互地開發和測試組件。

Storybook 在 app 之外運行,這允許你獨立開發 UI 組件,提高組件的重用性、測試性和開發速度。你可以快速構建,而不必擔心應用程序特定的依賴關係。

它附帶了一個 CLI 和一些代碼示例,供你熟悉 Storybook.

倉庫地址: https://github.com/storybookjs/storybook

Front-End-Checklist

Front-End-Checklist 是一個詳盡的列表,列出了在網站或者 HTML 頁面投入使用前所需要具備或者測試的所有元素。

它是一個基於前端 Web 開發的倉庫,更關注性能、安全性和 SEO 等。

Front-End-Checklist 中的所有項目對於大多數工程都是必須的,但其中有些元素可以省略。

包括:

  • ????文檔或者文章

  • ????在線工具/測試工具

  • ????媒體或者視頻內容

倉庫地址: https://github.com/thedaviddias/Front-End-Checklist

靈感和資源

這篇文章的令該來源於 Tech Sapien 和他所有令人驚歎的工作。庫中的圖片???? 也是取自同一處。

總結

上面提到的所有的庫並不是唯一可用的資源,除此之外我敢肯定還有大量的令人驚歎的項目。這些是其中一些我覺得很有用的資源,同時我自己也經常沉浸其中。

不要忘了給這些庫點 Star????。以感謝所有出色的貢獻者,感謝他們爲我們創造瞭如此有用的資源✌????

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章