🔍 搜尋結果:ejs

🔍 搜尋結果:ejs

Angular 18 的新增功能

介紹 -- 2024 年 5 月 22 日星期三,Angular 核心團隊發布了 Angular 新版本:版本 18。 該版本不僅穩定了最新的API,還引入了許多旨在簡化框架的使用並改善開發人員體驗的新功能。 這些新功能是什麼?請仔細閱讀,找出答案。 新的控制流程語法現已穩定 ------------ 當最新版本的 Angular 發佈時,引入了一種管理視圖流的新方法。提醒一下,這個新的控制流程直接整合到 Angular 模板編譯器中,使以下結構指令成為可選: - 動圖 - ngFor - ngSwitch / ngSwitchCase ``` <!-- old way --> <div *ngIf="user">{{ user.name }}</div> <!-- new way --> @if(user) { <div>{{ user.name }}</div> } ``` 這個新的 API 現已穩定,我們建議使用這個新語法。 如果您想將應用程式遷移到這個新的控制流,可以使用原理圖。 ``` ng g @angular/core:control-flow ``` 此外,新的 @for 語法取代了 ngFor 指令,迫使我們使用 track 選項來優化清單的渲染,並避免在變更期間完全重新建立清單。 開發模式中新增了兩個新警告: - 如果追蹤鍵重複,則會發出警告。如果所選鍵值在您的集合中不唯一,則會引發此警告。 - 如果追蹤鍵是整個專案並且選擇此鍵會導致整個清單的破壞和重新建立,則會發出警告。如果認為該操作成本太高(但門檻較低),則會出現此警告。 Defer 語法現已穩定 ------------ @defer 語法也在最新版本的 Angular 中引入,讓您定義一個在滿足條件時延遲載入的區塊。當然,此區塊中使用的任何第三方指令、管道或庫也將被延遲載入。 這是它的使用範例 ``` @defer(when user.name === 'Angular') { <app-angular-details /> }@placeholder { <div>displayed until user.name is not equal to Angular</div> }@loading(after: 100ms; minimum 1s) { <app-loader /> }@error { <app-error /> } ``` 提醒一句, - 只要不滿足@defer區塊條件,就會顯示@Placeholder區塊 - 當瀏覽器下載@defer區塊的內容時,將顯示@loading區塊;在我們的例子中,如果下載時間超過 100 毫秒,就會顯示區塊加載,並且顯示的最短持續時間為 1 秒。 - 如果下載@defer區塊時發生錯誤,將顯示@error區塊 Zone js 會發生什麼 ------------- Angular 18 引進了一種觸發偵測變更的新方法。此前,毫不奇怪,檢測更改完全由 Zone Js 處理。現在,偵測變化由框架本身直接觸發。 為了實現這一點,框架中加入了一個新的變更檢測調度程序 ( *ChangeDetectionScheduler* ),並且該調度程序將在內部使用來引發變更檢測。這個新的調度程序不再基於 Zone Js,並且預設與 Angular 版本 18 一起使用。 這個新的調度程序將引發檢測更改,如果 - 觸發範本或主機偵聽器事件 - 附加或刪除視圖 - 非同步管道接收新值 - 呼叫 markForCheck 函數 - 訊號的值發生變化等。 小文化時刻:此偵測變更是由於內部呼叫*ApplicationRef.tick*函數所致。 正如我上面提到的,由於Angular 18 版本一直基於這個新的調度程序,因此當您遷移應用程式時,不會出現任何問題,因為Angular 可能會收到Zone Js 和/或這個新調度程序的檢測更改通知。 但是,要回到 Angular 18 之前的行為,您可以使用provideZoneChangeDetection 函數,並將*ignoreChangesOutsideZone* setter 選項設為true。 ``` bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ ignoreChangesOutsideZone: true }) ] }); ``` 另外,如果您希望僅依賴新的排程器而不依賴 Zone Js,則可以使用*ProvideExperimentalZonelessChangeDetection*函數。 ``` bootstrapApplication(AppComponent, { providers: [ provideExperimentalZonelessChangeDetection() ] }); ``` 透過實現*provideExperimentalZonelessChangeDetection*函數,Angular不再依賴Zone Js,這使得 - 如果專案的其他依賴項均不依賴它,則刪除 Zone js 依賴項 - 從 angular.json 檔案中的 polifills 中刪除區域 js 棄用 HttpClientModule ------------------- 自從 Angular 14 版本和獨立元件的到來以來,模組在 Angular 中已成為可選的,現在是時候看到第一個模組已棄用:我將其命名為 HttpClientModule 此模組負責為整個應用程式註冊 HttpClient 單例,以及註冊攔截器。 該模組可以輕鬆地替換為*ProvideHttpClient*函數,並提供支援 XSRF 和 JSONP 的選項。 這個函數有一個用於測試的孿生姊妹: *provideHttpClientTesting* ``` bootstrapApplication(AppComponent, { providers: [ provideHttpClient() ] }); ``` 像往常一樣,Angular 團隊提供了原理圖來幫助您遷移應用程式。 當發出*ng update @Angular/core @Angular /cli*命令時,如果在應用程式中使用,將發出遷移 HttpClientModule 的請求 內容後備 ---- ng-content 是 Angular 中的一個重要功能,尤其是在設計通用元件時。 此標籤可讓您投影自己的內容。然而,這項功能有一個重大缺陷。您無法為其指定預設內容。 從版本 18 開始,情況就不再如此。您可以在其中包含內容如果開發者沒有提供任何內容,將顯示的標籤。 我們以按鈕元件為例 ``` <button> <ng-content select=".icon"> <i aria-hidden="true" class="material-icons">send</i> </ng-content> <ng-content></ng-content> </button> ``` 使用按鈕元件時,如果沒有提供圖示類別的元素,則會顯示圖示傳送 表單事件:一種對表單事件進行分組的方法 ------------------- 這是社群很久以前提出的請求:有一個 api 將表單中可能發生的事件組合在一起;當我說事件時,我指的是以下事件 - 原始的 - 感動 - 狀態改變 - 重置 - 提交 Angular 18 版本公開了 AbstractControl 類別中的一個新事件屬性(允許 FormControl、FormGroup 和 FormArray 繼承該屬性),該屬性傳回一個 observable ``` @Component() export class AppComponent { login = new FormControl<string | null>(null); constructor() { this.login.events.subscribe(event => { if (event instanceof TouchedChangeEvent) { console.log(event.touched); } else if (event instanceof PristineChangeEvent) { console.log(event.pristine); } else if (event instanceof StatusChangeEvent) { console.log(event.status); } else if (event instanceof ValueChangeEvent) { console.log(event.value); } else if (event instanceof FormResetEvent) { console.log('Reset'); } else if (event instanceof FormSubmitEvent) { console.log('Submit'); } }) } } ``` 路由:重定向作為函數 ---------- 在最新版本的 Angular 之前,當您想要重新導向到另一個路徑時,可以使用*redirectTo*屬性。該屬性僅將一個字串作為其值 ``` const routes: Routes = [ { path: '', redirectTo: 'home', pathMath: 'full' }, { path: 'home', component: HomeComponent } ]; ``` 現在可以傳遞具有此屬性的函數。該函數將*ActivatedRouteSnapshot*作為參數,讓您可以從url中檢索queryParams或params。 另一個有趣的點是,這個函數是在註入上下文中呼叫的,使得注入服務成為可能。 ``` const routes: Routes = [ { path: '', redirectTo: (data: ActivatedRouteSnapshot) => { const queryParams = data.queryParams if(querParams.get('mode') === 'legacy') { const urlTree = router.parseUrl('/home-legacy'); urlTree.queryParams = queryParams; return urlTree; } return '/home'; }, pathMath: 'full' }, { path: 'home', component: HomeComponent }, { path: 'home-legacy', component: HomeLegacyComponent } ]; ``` 伺服器端渲染:兩個很棒的新功能 --------------- Angular 18 引進了兩個重要且期待已久的新伺服器端渲染功能 - 事件回放 - 國際化 ### 重播事件 當我們建立伺服器端渲染應用程式時,該應用程式會以 html 格式傳送回瀏覽器,顯示一個靜態頁面,然後由於水化現象而變得動態。在此水合階段期間,無法傳送對互動的回應,因此使用者互動會遺失,直到水合完成為止。 Angular 能夠記錄此水合作用階段的用戶交互,並在應用程式完全加載並交互後重播它們。 若要解鎖此功能,仍處於開發者預覽版,您可以使用 ServerSideFeature *withReplayEvents*函數。 ``` providers: [ provideClientHydration(withReplayEvents()) ] ``` ### 國際化 隨著 Angular 16 的發布,Angular 改變了頁面水合的方式。破壞性水合作用已被漸進性水合作用所取代。然而,當時缺乏一個重要的功能:國際化支持。 Angular 跳過了標記為 i18n 的元素。 有了這個新版本,這種情況就不再是這樣了。請注意,此功能仍處於開發預覽階段,可以使用*withI18nSupport*函數啟動。 ``` providers: [ provideClientHydration(withI18nSupport()) ] ``` 國際化 --- Angular 建議使用 INTL 原生 javascript API 來處理與 Angular 應用程式國際化相關的所有事務。 根據此建議, **@angular/common**套件公開的函數助手已被棄用。因此,不再建議使用 getLocaleDateFormat 等函數。 新的建構器包和棄用 --------- 到目前為止,自從 Angular 中出現 vite 以來,用於建立 Angular 應用程式的建構器位於以下套件中: **@angular-devkit/build-angular** 該套件包含 Vite、Webpack 和 Esbuild。對於將來僅使用 Vite 和 Esbuild 的應用程式來說,這個套件太重了。 考慮到這一潛在的未來,一個僅包含 Vite 和 Esbuild 的新包被建立,名稱為**@angular/build** 遷移到 Angular 18 時,如果應用程式不依賴 webpack(例如,沒有基於 Karma 的單元測試),則可以執行可選原理圖。此原理圖將修改 angular.json 檔案以使用新套件,並透過新增套件和刪除舊套件來更新 package.json。 重要的是,舊包可以繼續使用,因為它為新包提供了別名。 透過在專案的 node\_modules 中加入必要的依賴項,Angular 開箱即用地支援 Less Sass Css 和 PostCss。 然而,隨著新的**@angular/build**套件的到來,Less 和 PostCss 成為可選的,並且必須在 package.json 中明確作為開發依賴項。 當您遷移到 Angular 18 時,如果您希望使用新包,這些依賴項將自動新增。 不再需要降級非同步/等待 ------------ Zone js 不支援 Javascript 功能*async/await* 。 為了不限制開發人員使用此功能,Angular 的 CLI 將使用*async/await 的*程式碼轉換為「常規」Promise。 這種轉換稱為降級,就像它將 Es2017 程式碼轉換為 Es2015 程式碼一樣。 隨著應用程式不再基於 Zone Js,即使目前仍處於實驗階段,如果不再在 polyfill 中聲明 ZoneJs,Angular 將不再降級。 因此,應用程式的建置將更快、更輕。 新別名:by dev ---------- 從現在開始,當執行*ng dev*命令時,應用程式將以開發模式啟動。 實際上,ng dev 指令是*ngserve*指令的別名。 建立此別名是為了與 Vite 生態系統保持一致,特別是 npm run dev 指令。 未來 -- Angular 團隊再次交付了一個充滿新功能的版本,無疑將大大增強開發人員的體驗,並向我們展示 Angular 的未來一片光明。 未來我們可以期待什麼? 毫無疑問,性能和開發人員體驗持續改進。 我們還將看到基於訊號的表單、基於訊號的元件的引入,以及很快使用 @let 區塊聲明模板變數的能力。 --- 原文出處:https://dev.to/this-is-angular/whatnew-in-angular-18-60j

如何在NodeJS中實現授權

**介紹:** ------- 身份驗證和授權是 Web 應用程式安全性中的兩個基本概念。當我們建立 Web 應用程式時,確保只有正確的使用者才能存取我們網站的某些部分對於安全性至關重要。這就是身份驗證和授權發揮作用的地方。 在本文中,我們將討論身份驗證和授權,以及如何在 Nodejs 應用程式中實作它們。 那麼事不宜遲,讓我們開始吧! **了解授權** -------- ![顯示 HTML 程式碼的電腦螢幕特寫,並顯示錯誤訊息「驗證失敗。請聯絡管理員」。](https://images.unsplash.com/photo-1618044619888-009e412ff12a?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) ### **什麼是授權?** 授權是授予使用者執行特定工作/操作的權限的過程。它決定允許經過身份驗證的使用者在應用程式內執行哪些操作。經過驗證後,授權可確保使用者僅執行允許執行的操作,並遵循特定的規則和權限。 一些常見的身份驗證方式是: - 基於角色的存取控制 (RBAC) - 基於屬性的存取控制 (ABAC) - 基於策略的存取控制(PBAC) ### **授權如何運作?** 授權過程如下: - 經過身份驗證的使用者向伺服器發出請求。 - 伺服器驗證使用者並取得其指派的角色和權限。 - 伺服器評估使用者是否有權執行所請求的操作。 - 如果使用者獲得授權,伺服器將允許使用者執行請求的操作。 - 否則,它會拒絕存取並返回適當的回應。 ### **什麼是基於角色的存取控制 (RBAC)?** ![說明基於角色的存取控制 (RBAC) 的圖表。客戶端將帶有使用者憑證的管理服務請求傳送到管理節點管理器。管理節點管理器定義權限層級的角色,與服務 1、服務 2 和服務 3 互動以執行身份驗證並確保用戶端有權存取。然後客戶端接收並處理回應。](https://lh7-us.googleusercontent.com/mpwrmZ13hD2p5SL6s64A4USQOMGxvUT46zMXkyjcHC0nKGRfF_JHIdrkOR6FWZrpmNf35a8mLMGYRow84v--hZUNjNOkxTQj3I1Yi-KCtB4O8dfHqOK3N8Ejv1Xa6-J5-rY8YQNutGpzk_jXT9-pjvg) 基於角色的存取控制是一種存取控制方法,它根據使用者在應用程式中分配的角色向使用者授予權限。簡而言之,它控制用戶在應用程式中可以執行的操作。 RBAC 不是將權限指派給單一用戶,而是將使用者分組為角色,然後將權限指派給這些角色。這使得管理存取控制變得更加容易,因為我們只需要更新角色的權限,而不是每個單獨使用者的權限。 RBAC 的關鍵元件是: - 角色:定義應用程式內的一組職責、任務或功能 - 權限:代表使用者可以執行的特定操作。 - 角色分配:使用者被指派給一個或多個角色,每個角色都與一組權限相關聯。 - 存取控制策略:規定哪些角色可以存取特定資源以及他們可以採取哪些操作。 **在 NodeJS 中實作授權** ------------------ 到目前為止,我們已經了解了身份驗證和授權。讓我們探索如何在 NodeJS 應用程式中實現它們。 在本節中,我們將建立一個簡單的 NodeJs 應用程式並整合身份驗證和授權功能。 ### 基本專案設定和身份驗證 要設定基本的 Node.js 專案並新增 JWT 身份驗證,您可以查看以下文章,其中我詳細解釋了每個步驟: [設定基本 Node.js 專案並新增 JWT Auth](https://arindam1729.hashnode.dev/jwt-authentication-in-nodejs#heading-project-setup) ### **實施授權** 在本節中,我們將在 Nodejs 應用程式中實作授權。 #### 1. 更新用戶架構: 我們將更新使用者架構並新增一個「角色」字段,我們將在其中定義使用者的角色/範圍。我們將在後面的部分中使用這些角色進行授權。 ``` const mongoose = require("mongoose"); const userSchema = new mongoose.Schema({ username: { type: String, required: true, unique: true, }, password: { type: String, required: true, }, role:{ type: String, required: true, default: "user", } }); module.exports = mongoose.model("User", userSchema); ``` #### 2. 更新認證路由: 接下來,我們將更新`/signup`和`/login`路由。我們將從註冊路由的請求正文中獲取新新增的角色。 ``` // updated sign up router.post("/signup", async (req, res) => { try { const { username, password, role } = req.body; const user = new User({ username, password,role }); await user.save(); res.status(201).json({ message: "New user registered successfully" }); } catch (error) { res.status(500).json({ message: "Internal server error" }); } }); ``` 在登入路徑中,就像使用者名稱和密碼驗證一樣,我們也會驗證使用者的角色。 ``` // Updated Login route router.post("/login", async (req, res) => { const { username, password, role } = req.body; try { const user = await User.findOne({ username }); if (!user) { return res.status(401).json({ message: "Invalid username or password" }); } if (user.password !== password) { return res.status(401).json({ message: 'Invalid username or password' }); } if (user.role !== role) { return res.status(401).json({ message: 'Invalid role' }); } // Generate JWT token const token = jwt.sign( { id: user._id, username: user.username, role: user.role}, process.env.JWT_SECRET ); res.json({ token }); } catch (error) { res.status(500).json({ message: "Internal server error" }); } }); ``` #### 3. 建立管理驗證中間件: 現在,我們將建立一個中間件來驗證使用者是否是管理員。 ``` function verifyAdmin(req, res, next) { if (req.user.role !== "admin") { return res.status(401).json({ message: "Access denied. You need an Admin role to get access." }); } next(); } module.exports = verifyAdmin; ``` #### 4. 建立管理路由: 之後,我們將在主`index.js`中建立一個管理路由來驗證使用者是否具有管理員存取權限。 ``` // index.js const adminMiddleware = require("./middleware/admin"); app.get("/admin", userMiddleware, adminMiddleware, (req, res) => { const { username } = req.user; res.send(`This is an Admin Route. Welcome ${username}`); }); ``` #### 5. 測試端點: 在註冊路徑中,我們將建立一個具有管理員角色的新使用者。 為此,我們將使用以下正文向[`http://localhost:3000/auth/signup`](http://localhost:3000/auth/signup)發出 POST 請求: ``` {     "username": "Arindam Majumder",     "password": "071204",     "role": "admin" } ``` ![Postman 介面的螢幕截圖,顯示了「http://localhost:3000/auth/signup」的 POST 要求,其中包含包含使用者名稱、密碼和角色的 JSON 正文。回應正文顯示一則訊息:“新用戶註冊成功”,狀態為 201 Created。](https://lh7-us.googleusercontent.com/4AsIcyQYmEgP38jlExZ0JJk_nnzCLvbn6Vflg2w_fHMgnGv39JenYDBhd5W0OgOT516USD-RoPIVWqYPXBCmxMRfhUSOXcEjizs3ZELeAps6AqcB6PX7rM6Tpd1XJt2kgm0UVQ_xYmgNQTc2Cm1tKC4) 新用戶已註冊。我們更新後的註冊報價正常運作。 同樣,在登入路由中,我們將取得新使用者的令牌。 為此,我們將使用類似的正文向[`http://localhost:3000/auth/login`](http://localhost:3000/auth/login)發出 GET 請求: ``` { "username": "Arindam Majumder", "password": "071204", "role": "admin" } ``` 我們將得到一個像這樣的令牌: ![Postman 介面的螢幕截圖顯示了對「http://localhost:3000/auth/login」的 POST 要求。請求內文包含 JSON 資料,其中包含「使用者名稱」、「密碼」和「角色」欄位。回應正文顯示帶有「令牌」欄位的 JSON 物件。請求的狀態為 200 OK。](https://lh7-us.googleusercontent.com/H76nwPmFj-vCvnULTn0dmo2ABKjuHBx-aemMNYo9DCGTsSaKj_RpxrvdyQuENgGFN-TDefoN_-78fAenWQ3UjSeHkCpq1EIAceTWqTdbaKkvvbiTXYlrovVmYzmALcmYMakMyXw_xx7MYAm1NNWBoM8) 現在,我們將測試我們的管理路由。為此,我們將使用以下正文向[`http://localhost:3000/admin`](http://localhost:3000/admin)發出 GET 請求: ``` { "username": "Arindam Majumder", "password": "071204", "role": "admin" } ``` 這次我們還必須加入一個授權標頭並在其中加入令牌來驗證我們的用戶。 ``` Authorization = USERS_JWT_TOKEN ``` 我們將得到以下回應: ![Postman 介面的螢幕截圖,顯示了「http://localhost:3000/admin」的 GET 要求,其中包含 JSON 正文參數,包括「使用者名稱」、「密碼」和「角色」。回應部分顯示一條訊息:“這是一條管理路線。歡迎 Arindam Majumder。”狀態為 200 OK。](https://lh7-us.googleusercontent.com/hXtX9n0Bb0fJl50zJRbA50XGLPGwpKsgffdkQa_-w58p_Oo9fillBPy9f6k0jH2SOz2FOh5xwdKPLXqCcqerrrMgUpQkA2AKdqnZGN_tGjEYIiUJCqcCuibc-7Z-W-j7hlfXUOTtwf4oQQC5NvuetNA) 這意味著我們的端點正在按預期工作。 至此,我們已經在 NodeJs 應用程式中成功實現了授權。 **結論** ------ 總的來說,身份驗證和授權在現代 Web 應用程式中非常重要。 在本文中,我們介紹了身份驗證和授權的基礎知識以及如何將它們整合到 NodeJs 應用程式中。 希望您覺得這有幫助。不要忘記分享您對評論的回饋。 如需付費合作,請發送電子郵件至: <[email protected]> 在[Twitter](https://twitter.com/intent/follow?screen_name=Arindam_1729) 、 [LinkedIn](https://www.linkedin.com/in/arindam2004/) 、 [Youtube](https://www.youtube.com/channel/@Arindam_1729)和[GitHub](https://github.com/Arindam200)上與我聯絡。 快樂編碼! ![謝謝 :)](https://cdn.hashnode.com/res/hashnode/image/upload/v1713555130149/625f8664-4caa-4318-bfe7-97bec77085bb.png) --- 原文出處:https://dev.to/arindam_1729/how-to-implement-authorization-in-nodejs-31hk

同步引擎是 Web 應用程式的未來嗎?

請看下面的 GIF — 它顯示了一個即時[Todo-MVC 演示](https://todo-replicache-sveltekit.onrender.com/),跨視窗同步並平滑地進出離線模式。雖然它只是一個簡單的演示應用程式,但它展示了每個 Web 開發人員都應該了解的重要的前沿概念。這是一個[Replicache](https://replicache.dev/)演示應用程式,我將其從 Express 後端和 Web 元件前端移植到 SvelteKit,以了解背後的技術和概念。我想與您分享我的學習成果。原始碼可[在 Github 上](https://github.com/isaacHagoel/todo-replicache-sveltekit)取得。 ![sveltekit-replicache-演示](https://github.com/isaacHagoel/todo-replicache-sveltekit/assets/20507787/11b5ae10-049d-4cc7-82bf-45d8287701f0) 背景和動機 ----- Web 應用程式面臨一些根本性的難題,而大多數 Web 框架似乎都忽略了這些問題。這些問題非常困難,以至於只有很少的應用程式能夠真正很好地解決它們,並且這些應用程式在各自的領域中遙遙領先於其他應用程式。 以下是我在實際開發的商業應用程式中必須處理的一些此類問題: 1. 讓應用程式感覺敏捷,即使它與伺服器通信,即使在緩慢或不穩定的網路上。這不僅適用於初始載入時間,也適用於應用程式載入後的互動。 [SPA](https://developer.mozilla.org/en-US/docs/Glossary/SPA)是解決這個問題的早期嘗試,但最終還不夠。 2. 為使用者產生的內容(例如網站建立、電子商務、線上課程建構器)實施撤銷/重做和版本歷史記錄。 3. 當同一用戶在多個分頁/裝置上同時開啟應用程式時,請讓應用程式正常運作。 4. 處理執行舊版本前端的長期會話,使用者可能不想刷新以避免丟失工作。 5. 使協作功能/多人遊戲功能正確且近乎即時地工作,包括解決衝突。 我在開發完全正常的 Web 應用程式時遇到了這些問題,沒有什麼太瘋狂的,而且我相信大多數 Web 應用程式在獲得吸引力時都會遇到部分或全部問題。 我在開始開發新產品的開發團隊中註意到的一個模式是完全忽略這些問題,即使團隊已經意識到這些問題。推理通常是這樣的:“當我們真正開始遇到這些問題時,我們會處理它。”然後,團隊將繼續選擇一些完善的框架(選擇您最喜歡的),認為這些工具肯定能為可能出現的任何常見問題提供解決方案。幾個月後,當應用程式達到一萬名活躍用戶時,現實就浮出水面:團隊必須引入部分的、不完整的解決方案,這些解決方案會增加複雜性,使系統更加緩慢和錯誤,或者重寫核心部分(之後沒有人立即這樣做)發射)。哎喲。 我感受到了這種痛苦。痛苦是真實的。 輸入“同步引擎”。 同步引擎到底是什麼? ---------- 還記得我說過有些應用程式比其他應用程式更好地解決這些問題嗎?最近著名的例子是[Linear](https://linear.app/isaach)和[Figma](https://www.figma.com/) 。兩者都透過技術優勢擾亂了競爭異常激烈的市場。其他例子有[Super human](https://superhuman.com/)和十年前的[Trello](https://trello.com/) 。當您研究他們所做的事情時,您會發現它們都集中在非常相似的模式上,並且它們都在內部開發了各自的實現。您可以在以下連結中了解他們是如何做到的(強烈推薦): [Figma](https://www.figma.com/blog/how-figmas-multiplayer-technology-works/) 、 [Linear](https://www.youtube.com/live/WxK11RsLqp4?feature=share&t=2175) 、 [Super human](https://blog.superhuman.com/superhuman-is-built-for-speed/) 、 [Trello(系列)](https://www.atlassian.com/engineering/sync-architecture) 。 在系統的核心,始終有一個同步引擎,可作為前端和後端之間的持久緩衝區。從高層次來看,它是這樣運作的: - 客戶端始終讀取和寫入引擎提供的本地儲存。就應用程式程式碼而言,它在記憶體中本地執行。 - 該儲存負責樂觀地更新狀態,將資料本地保存在瀏覽器的儲存中,並與後端來回同步,包括處理潛在的複雜情況和邊緣情況。 - 後端實作引擎的另一半,以允許拉取和推播資料、在資料變更時通知客戶端、將資料保存在資料庫中等。 同步引擎的不同實作會做出不同的權衡,但基本概念始終是相同的。 這不是一個新想法,但... ------------- If you've been following trends in the web-dev world, you'd know that sync engines have been a centrepiece in several of them, namely: [progressive web apps](https://web.dev/articles/what-are-pwas) , [offline-first apps](https://offlinefirst.org/) , and the lately trending term: [local-first軟體](https://www.inkandswitch.com/local-first/).您甚至可能研究過一些提供內建同步引擎的資料庫,例如[PouchDb](https://pouchdb.com/)或具有相同功能的線上服務(例如[Firestore](https://firebase.google.com/docs/firestore) )。我也有,但過去幾年我的整體感覺是,這些都不是切中要害的。漸進式網頁應用程式是關於用戶在主螢幕上「安裝」網站的快捷方式,就好像它們是本機應用程式一樣,儘管不需要安裝可能是網路的「好處」。 「離線優先」聽起來離線模式比線上模式更重要,但對於 99% 的網路應用程式來說,情況並非如此。 「本地優先」無疑是迄今為止最好的名字,但官方的[本地優先宣言](https://www.inkandswitch.com/local-first/)談論了點對點通信和[CRDT](https://en.wikipedia.org/wiki/Conflict-free_replicated_data_type) (一個超級酷的想法,但除了協作文本編輯之外很少用於任何其他用途)。客戶端-伺服器Web 應用程式的世界正在嘗試解決像我上面描述的那樣的實際問題。諷刺的是,許多屬於當前「本地優先」浪潮一部分的工具都採用了這個名稱,但沒有採用所有原則。 最引起我注意和興趣的是「Replicache」。具體來說,我對它很感興趣,因為它不是一個自我複製的資料庫,也不是一個你必須圍繞它來建立整個應用程式的黑盒 SaaS 服務。相反,與我在這個領域遇到的任何現成解決方案相比,它提供了更多的控制、靈活性和關注點分離。 什麼是複製快取? -------- Replicache 是一個函式庫。在前端,它只需要很少的佈線,並且可以有效地充當普通的全局商店(想想 Zustand 或 Svelte 商店)。它有一個狀態區塊(在我們的範例中,每個清單都有自己的儲存)。它可以使用一組稱為“mutators”(認為是reducers)的用戶定義函數進行變異,例如“addItem”、“deleteItem”或任何您想要的東西,並公開一個訂閱函數(我[在這裡](https://doc.replicache.dev/api/classes/Replicache)簡化了完整的API)。 在這個熟悉的介面背後是一個強大且高效能的客戶端同步引擎,它可以處理: 1. 初步將相關資料完整下載到客戶端。 2. 從後端拉動和推送“突變”。突變是一個事件,指定應用哪個突變器以及哪些參數(加上一些元資料)。 ``` - When pushing, these changes are applied optimistically on the client, and rolled back if they fail on the server. Any other pending changes would be applied on top (rebase). ``` ``` - The sync mechanism also includes queuing changes if the connection is lost, retry mechanisms, applying changes in the right order, and de-duping. ``` 3. 將所有內容快取在記憶體中(效能)並將其保存到瀏覽器儲存(特別是 IndexedDB)以進行備份。 4. 由於可以從同一應用程式的所有選項卡存取相同的存儲,因此引擎會處理其中的所有含義,例如當架構發生更改但某些選項卡已刷新而某些選項卡尚未刷新且仍在使用時該怎麼辦舊模式。 5. 使用廣播通道立即保持所有選項卡同步(因為依賴共用儲存不夠快)。 6. 處理瀏覽器決定清除本地儲存的情況。 您可能已經注意到,這裡解決了我在本文頂部列出的大部分問題。基於突變也適合撤銷/重做等功能。 為了讓所有這些都能發揮作用,後端的工作就是實作 Replicache 定義的協定。具體來說: 1. 您需要實作[推送](https://doc.replicache.dev/reference/server-push)和[拉取](https://doc.replicache.dev/reference/server-pull)API。這些端點需要能夠像前端一樣啟動變異器(儘管它們不必執行相同的邏輯)。後端是權威的,衝突解決是由您的 mutator 實作中的程式碼完成的。 2. 您的資料庫需要支援快照隔離並在事務內執行操作。 3. Replicache 用戶端定期輪詢伺服器以檢查更改,但如果您希望用戶端之間接近即時同步,則需要實作「poke」機制,即通知客戶端某些內容已更改並且需要進行更改的方法。拉。這可以透過[伺服器發送的事件](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events)或[websockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket)來完成。這是一個有趣的 API 設計選擇——更改永遠不會推送到客戶端;客戶總是拉他們。我相信這樣做是為了簡單且易於對系統進行推理。有一點可以肯定:他們沒有強制使用Websocket,這是件好事,因為這會使協議與HTTP(伺服器透過正常HTTP 連接發送的事件流)不相容,這將需要額外的基礎設施並帶來額外的集成挑戰。 4. 根據[版本控制策略](https://doc.replicache.dev/strategies/overview),您可能需要實作其他操作(例如,createSpace)。 如果這對您來說並不平凡,那麼您是對的。我認為我還沒有完全理解它如何與資料庫一起操作的所有細節。我需要做一個後續專案,在其中完全重構資料庫結構和/或向範例加入有意義的功能(例如版本歷史記錄),以便更接近完全理解它。問題是,我知道在建立和維護實際生產應用程式時這種控制層級有多麼有價值。在我的書中,花一兩週的時間深入思考和設定應用程式的核心部分,如果它為建立和擴展奠定了堅實的基礎,那麼它就是一筆巨大的投資。 移植一個重要的範例 --------- 學習新事物的最好(也可以說是唯一)方法就是親自動手,親自體驗一些會影響真正應用程式的權衡和影響。當我查看[Replicache 網站上的範例](https://doc.replicache.dev/examples/todo)時,我注意到沒有 Sveltekit 的範例。自從 Svelte 3 發布以來,我一直是 Svelte 的忠實粉絲,但最近才開始使用 Sveltekit。我認為這將是一個透過實踐學習並同時建立有用的參考來實現的絕佳機會。 將現有程式碼庫移植到不同的技術具有教育意義,因為在翻譯程式碼時,您被迫理解並質疑它。在整個過程中,我經歷了多次靈光一現的時刻,因為一些起初看起來很奇怪的事情都發生了。 學習內容 ---- #### 斯維爾特基特 1. Sveltekit[本身並不支援 WebSockets](https://github.com/sveltejs/kit/issues/1491) ,即使它確實支援伺服器發送事件,但它的[方式也很笨拙](https://stackoverflow.com/questions/74879852/how-can-i-implement-server-sent-events-sse-in-sveltekit)。 Express 很好地支援兩者。因此,我使用[svelte-sse](https://github.com/razshare/sveltekit-sse)來處理伺服器發送的事件。我遇到的一個有點煩人的怪癖是,由於 svelte-sse 返回一個 Svelte 商店,而我的應用程式沒有訂閱該商店(應用程式不需要讀取該值,只需觸發如上所述的拉取),整件事情只是被編譯器優化掉了。起初我很困惑為什麼訊息沒有通過。我最終不得不針對這種行為實施解決方法。我不怪圖書館的作者;我只是怪罪圖書館的作者。他們假設一個有意義的值將發送給客戶端,但「poke」的情況並非如此。 2. 與原始 Express 後端相比,SvelteKit 基於檔案系統的路由、載入函數、佈局和其他功能可以實現更好組織的程式碼庫和更少的樣板程式碼。不用說,在前端,Svelte 遠遠領先於 Web 元件,導致前端程式碼庫更小、更易讀,儘管它具有更多功能(原始示例 TodoMVC 缺少諸如“將所有內容標記為完成”等功能) “刪除完成”)。 3. 總的來說,我喜歡 Sveltekit 並計劃在未來繼續使用它。如果您還沒有嘗試過,[官方教學](https://learn.svelte.dev/tutorial/introducing-sveltekit)是一個很棒的介紹。 ### 複製快取 總的來說,Replicache 給我留下了非常深刻的印象,並建議嘗試一下。在基本層面上(這是我目前要做的所有嘗試),它運作良好並兌現了所有承諾。話雖如此,以下是我的一些普遍擔憂(與待辦事項應用程式無關)以及與之相關的想法: - **性能相關:** ``` - **Initial load time** (first time, before any data was ever pulled to the client) might be long when there is a lot of data to download (think tens of MBs). Productivity apps in which the user spends a lot of time after the initial load are less sensitive to this, but it is still something to watch for. Potential mitigation: partial sync (e.g., Linear only sends open issues or ones that were closed over the last week instead of sending all issues). ``` ``` - **Chatty network (?)** - Initially, it seemed to me that there was a lot of chatter going back and forth between the client and the server with all the push, pull, and poke calls flying around. On deeper inspection, I realized my intuition was wrong. There is frequent communication, yes, but since the mutations are very compact and the poke calls are tiny (no payload), it amounts to much less than your normal REST/GraphQL app. Also, a browser full reload (refresh button or opening the page again in a new tab/window after it was closed) loads most of the data from the browser's storage and only needs to pull the diffs from the server, which leads me to the next point. ``` ``` - **Coming back after a long period of time offline**: I haven't tested this one, but it seems like a real concern. What happens if I was working offline for a few days making updates while my team was online and also making changes? When I come back online, I could have a huge amount of diffs to push and pull. Additionally, conflict resolution could become super difficult to get right. This is a problem for every collaborative app that has an offline mode and is not unique to Replicache. The Replicache docs [warn about this situation](https://doc.replicache.dev/concepts/offline) and propose implementing "the concept of history" as a potential mitigation. ``` ``` - What about **bundle size**? Replicache is [34kb gzipped](https://bundlephobia.com/package/[email protected]), and for what you get in return, it's easily worth it. ``` ``` - [This page](https://doc.replicache.dev/concepts/performance) on the Replicache website makes me think that, in the general case, performance should be very good. ``` - **功能相關:** ``` - Unlike native mobile or desktop apps, it is possible for users to **lose the local copy of their work** because the browser's storage doesn't provide the same guarantees as the device's file system. Browsers can just decide to delete all the app's data under certain conditions. If the user has been online and has work that didn't have a chance to get pushed to the server, that work would be lost in such a case. Again, this problem is not unique to Replicache and affects all web apps that support offline mode, and based on what I read, it is unlikely to affect most users. It's just something to keep in mind. ``` ``` - I was surprised to see that the **schema in the backend database** in the Todo example I ported doesn't have the "proper" relational definitions I would expect from a SQL database. There is no "items" table with fields for "id", "text", or "completed". The reason I would want that to exist is the same reason I want a relational database in the first place—to be able to easily slice and dice the data in my system (which I always missed down the line when I didn't have). I don't think it is a major concern since Replicache is supposed to be backend-agnostic as long as the protocol is implemented according to spec. I might try to refactor the database as a follow-up exercise to see what that means in terms of complexity and ergonomics. ``` ``` - I find **version history and undo/redo** super useful and desirable in apps with user-editable content. With regards to undo/redo there is an [official package](https://github.com/rocicorp/undo) but it seems to [lack support for the multiplayer usecase](https://github.com/rocicorp/replicache/issues/1008) (which is where the problems come from). As for version-history, the Replicache documentation mentions "the concept of history" but [suggests talking to them](https://doc.replicache.dev/concepts/offline) if the need arises. That makes me think it might not be straightforward to achieve. Another idea for a follow-up task. ``` ``` - **Collaborative text editing** - the existing conflict resolution approach won't work well for collaborative text editing, which requires [CRDTs](https://en.wikipedia.org/wiki/Conflict-free_replicated_data_type) or [OT](https://en.wikipedia.org/wiki/Operational_transformation). I wonder how easy it would be to integrate Replicache with something like [Yjs](https://yjs.dev/). There is an [official example repo](https://github.com/rocicorp/replicache-yjs), but I haven't looked into it yet. ``` - **縮放相關:** ``` - Since the server is stateful (holds open HTTP connections for server-sent events), I wonder how well it would scale. I've worked on production systems with >100k users that used WebSockets before, so I know it is not that big of a deal, but still something to think about. ``` - **其他:** ``` - - In theory, Replicache can be **added into existing apps** without rewriting the frontend (as long as the app already uses a similar store). The backend might be trickier. If your database doesn't support snapshot isolation, you are out of luck, and even if it does, the existing schema and your existing endpoints might need some serious rework. If you're going to use it, do it from day one (if you can). ``` ``` - Replicache is **not open source** (yet! see the point below) and is [free only as long as you're small or non-commercial](https://replicache.dev/#pricing). Given the amount of work (>2 years) that went into developing it and the quality of engineering on display, it seems fair. With that said, it makes adopting Replicache more of a commitment compared to picking up a free, open library. If you are a tier 2 and up paying customer, you get a [source license](https://doc.replicache.dev/howto/source-access) so that if Replicache shuts down for some reason, your app is safe. Another option is to roll out your own sync engine, like the big boys (Linear, Figma) have done, but getting to the quality and performance that Replicache offers would be anything but easy or quick. ``` ``` - **Crazy plot twist** (last minute edit): As I was about to publish this post I discovered that Replicache is going to be opened sourced in the near future and that its parent company is planning to launch a new sync-engine called "Zero". [Here is the official announcement](https://zerosync.dev/). It reads: "We will be open sourcing [Replicache](https://replicache.dev/) and [Reflect](https://reflect.net/). Once Zero is ready, we will encourage users to move." ``` ``` Ironically, Zero seems to be yet another solution that automagically syncs the backend database with the frontend database, which at least for me personally seems less attractive (because I want separation of concerns and control). With that said, these guys are experts in this domain and I am just a dude on the internet so we'll have to wait and see. In the meanwhile, I plan on playing with Replicache some more. ``` 同步引擎應該用於所有事情嗎? -------------- 不,同步引擎不應該用於所有事情。好訊息是,您可以讓應用程式的某些部分使用它,而其他部分仍然以傳統方式提交表單並等待伺服器的回應。 SvelteKit 和其他全端框架使這種整合變得容易。 使用同步引擎的明顯情況是一個壞主意: 1. 只有當客戶端更改很可能成功(回滾很少)並且客戶端擁有足夠的資訊來預測結果時,樂觀更新才有意義。例如,在線上測驗中,學生的答案必須傳送到伺服器進行評分,樂觀更新(因此同步引擎)是不可行的。這同樣適用於下訂單或交易股票等關鍵操作。一個好的經驗法則是,任何依賴伺服器且無法離線運作的操作都不應該依賴同步引擎。 2. 任何處理無法安裝在使用者電腦上的龐大資料集的應用程式。例如,建立本地優先版本的 Google 或處理千兆位元組資料以產生結果的分析工具是不切實際的。然而,在部分同步就足夠的情況下,同步引擎仍然是有益的。例如,Google地圖可以在客戶端裝置上下載和快取地圖以進行離線操作,而無需始終提供全球每個位置的高解析度地圖。 關於開發人員生產力和 DX 的一句話 ------------------ 我的印像是,擁有同步引擎可以讓 DX(開發人員體驗)變得更好。前端工程師只需與普通商店合作即可訂閱更新,並且 UI 始終保持最新狀態。無需考慮為同步引擎控制的應用程式部分取得任何內容、呼叫 API 或伺服器操作。至於後端,我還不能說太多。看起來它不會比傳統後端難,但我不能肯定。 ### 結束語 令人興奮的是,將網路應用程式的未來想像為全球範圍內的即時多人協作工具,無論網路條件如何,都可以可靠地工作,同時解決這些令人討厭的問題,我以過去的事情開始這篇文章。 我強烈建議網頁開發人員熟悉這些新概念,嘗試它們,甚至做出貢獻。 謝謝閱讀。如果您有任何問題或想法,請發表評論。和平。 。 **聚苯乙烯** 建立 Replicache 公司的創辦人 Aaron Boodman 的[訪談](https://youtu.be/cgTIsTWoNkM?si=Sssrbj09Z936QxEf)非常棒。觀看並稍後感謝我。 --- 原文出處:https://dev.to/isaachagoel/are-sync-engines-the-future-of-web-applications-1bbi

我一直在編寫 TypeScript 但不理解它

我承認,我不太懂 TypeScript ------------------- 有一天,我在一些處理樂觀更新的程式碼中遇到了一個錯誤,所以我向我的同事[Filip](https://tenor.com/en-GB/view/the-office-funny-kevin-malone-phillip-i-hate-phillip-gif-16434707)尋求幫助。 TypeScript 精靈 Filip 提到`satisfies`關鍵字將是我正在尋找的解決方案的一部分。 *`Satisfies` ?那是什麼呀?為什麼我以前從未聽說過它?*我的意思是,我已經使用 TypeScript 一段時間了,所以我很驚訝我自己並不了解它。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v6kny7wtjnc4168yn2o0.png) 不久之後,我偶然發現了 @yacineMTB 的這條推文,他是[X.com](http://X.com) (又名 Twitter)的多產者和工程師: > 就像,為什麼我不能只*執行***打字稿**檔案?如果我需要初始化整個目錄和專案,那麼腳本語言有什麼意義呢? > 我再次發現自己想知道為什麼我還不了解 TypeScript。*為什麼你不能真正執行 TypeScript 檔案?腳本語言和編譯語言有什麼不同?* [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dy01hirmxhlwybk6mx9u.png)](https://opensaas.sh) 我突然意識到,我不太了解我幾乎每天使用的語言的一些基本知識,這些語言是我用來建立諸如[Open SaaS](https://opensaas.sh) (一個免費的開源 SaaS 入門工具)之類的東西的。 所以我決定退一步,對這些主題進行一些調查。在這篇文章中,我將與您分享我學到的一些最重要的事情。 TypeScript 是什麼類型的腳本? -------------------- 您可能已經聽說過 TypeScript 是 JavaScript 的「超集」。這意味著它是 JavaScript 之上的一個附加層,在本例中,它允許您向 JavaScript 加入靜態類型。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5595bx8k88hkih2pthh.png) 這有點像 TypeScript 是 JavaScript 的進階版。或者,換句話說,如果 JavaScript 是 Tesla Model 3 的基礎模型,那麼 TypeScript 就是 Model X Plaid。*嗚嗚嗚。* 但因為它是 JavaScript 的*超集*,所以它實際上並不像 JavaScript 本身那樣運作。例如,JavaScript 是一種腳本語言,這意味著程式碼在執行過程中會被逐行解釋。它被設計成可以在不同作業系統和硬體配置的網路瀏覽器中運作。這與 C 等低階語言不同,後者需要先編譯為特定係統的機器碼才能執行。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iu22drd35u217gatsifn.png) 因此,JavaScript 不必先編譯,而是由 JavaScript 引擎解釋。另一方面,TypeScript 必須先轉換(或「轉編譯」)為 JavaScript,然後才能由瀏覽器中的 JavaScript 引擎(或作為獨立的 NodeJS 應用程式)執行。 所以這個過程看起來有點像這樣: ``` → Write TypeScript Code → “Transcompile” to JavaScript → Interpret JavaScript & Check for Errors → JavaScript Engine Compiles and Executes the Code ``` 很有趣,對吧? 現在我們已經掌握了一些理論知識,接下來讓我們繼續討論一些更實際的東西,例如 TypeScript 的出名之處:它就是*類型!* --- 順便一提… 我們[Wasp](https://wasp-lang.dev/)正在努力建立最好的開源 React/NodeJS 框架,讓您快速行動! 這就是為什麼我們提供了即用型全端應用程式模板,例如帶有 TypeScript 的 ToDo 應用程式。您所要做的就是安裝 Wasp: ``` curl -sSL https://get.wasp-lang.dev/installer.sh | sh ``` 並執行: ``` wasp new -t todo-ts ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jj26gymrxyybut4541lg.png) 您將獲得一個開箱即用的具有 Auth 和端到端 TypeSafety 功能的全端 ToDo 應用程式,以幫助您學習 TypeScript,或者只是開始快速安全地建置一些東西:) --- 玩耍`satisfies` ------------- 還記得我如何向我的同事尋求幫助,他的解決方案涉及`satisfies`關鍵字嗎?好吧,為了更好地理解它,我決定打開一個編輯器並嘗試一些基本範例,這是我發現的最有用的東西。 首先,我們以 person 物件為例,將其輸入為`Record` ,該 Record 可以採用一組`PossibleKeys`和一個`string`或`number`作為值。那想看看這個: ``` type PossibleKeys = "id" | "name" | "email" | "age"; const person: Record<PossibleKeys, string | number> = { } ``` 我們輸入`person`常數的方式稱為型別註解。它直接位於變數名稱之後。 讓我們開始為此`person`物件新增鍵和值: ``` type PossibleKeys = "id" | "name" | "email" | "age"; const person: Record<PossibleKeys, string | number> = { id: 12, name: "Vinny", email: "[email protected]", age: 37, } ``` 看起來很簡單,對吧? 現在,讓我們來看看 TypeScript 如何推斷`person`屬性的類型: ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8bd9m3bfy19qep0mvz98.png) 有趣的。當我們將滑鼠懸停在`email`上時,我們看到 TypeScript 告訴我們電子郵件是`string`或`number`的聯合類型,即使我們肯定只將其定義為`string` 。 如果我們嘗試在這種類型上使用一些`string`方法,這將會產生一些意想不到的後果。讓我們嘗試一下`split`方法,例如: ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6u4nxa0em6mr0qqghuyp.png) 我們收到一個錯誤,表示此方法不適用於`number`類型。哪個是對的。但這很煩人,因為我們知道`email`是一個字串。 讓`satisfies`透過將類型向下移動到常數定義的末尾來解決這個問題: ``` type PossibleKeys = "id" | "name" | "email" | "age"; const person = { id: 12, name: "Vinny", email: "[email protected]", age: 37, } satisfies Record<PossibleKeys, string | number>; ``` 現在,當將滑鼠懸停在`email`屬性上時,我們將看到它被正確推斷為`string` : ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxv578os1altgpkgmojo.png) 好的!現在,我們使用`split`將`email`轉換為字串陣列不會遇到任何問題。 這就是`satisfies`真正的閃光點。它讓我們驗證表達式的類型是否與特定類型匹配,同時為我們推斷最窄的可能類型。 多餘的財產檢查 ------- 但當我玩`satisfies`時,我注意到另一個奇怪的事情是,如果我直接在變數上使用它與在中間變數上使用它,它的行為會有所不同,如下所示: ``` // Directly on object literal const person = { } satisfies PersonType; // Using on intermediate variable const personIntermediate = person satisfies PersonType ``` 具體來說,如果我向`person`物件加入類型中不存在的另一個屬性(例如`isAdmin` ,則直接使用時我們會收到錯誤,但使用中間變數時不會收到錯誤: 1. 直接使用`satisfies` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dzqk2ph21jkcbdu4w6oz.png) 2. 使用`satisfies`和中間變數 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/haipxyc4ihxpmezydgto.png) 您可以看到,在範例 2 中,沒有錯誤且 person “滿足” `PersonType` ,但在範例 1 中卻沒有。 這是為什麼? 嗯,這實際上與 JavaScript 的基本工作原理有關,而與`satisfies`關鍵字關係不大。讓我們來看看。 上面範例中發生的過程就是所謂的「多餘屬性檢查」。 過多的屬性檢查實際上是該規則的例外。 TypeScript 使用所謂的「結構類型系統」。這只是一種奇特的方式來表示**如果一個值具有所有預期的屬性,那麼它將被使用。** 因此,使用上面的`personIntermediate`範例,TypeScript 不會抱怨`person`有一個額外的屬性`isAdmin` ,該屬性在`PersonType`中不存在。它具有所有其他必要的屬性,例如`id` 、 `name` 、 `email`和`age` ,因此 TypeScript 接受這種中間形式。 但是,當我們直接在變數上聲明類型時(如範例 1 中所示),我們會收到 TypeScript 錯誤:「'isAdmin' 在類型 'PersonType' 中不存在」。**這是工作中的多餘屬性檢查**,它可以幫助您避免犯下愚蠢的錯誤。 記住這一點是有好處的,因為這將幫助您避免意外的副作用。 例如,假設我們將 person 類型變更為具有可選的`isAdmin`屬性,如下所示: ``` type PersonType = { id: number, name: string, isAdmin?: boolean, // 👈 Optional } ``` 如果我們不小心用`isadmin`屬性而不是`isAdmin`定義了`person`並且沒有直接聲明類型,會發生什麼情況? 我們不會從 TypeScript 中得到任何錯誤,因為`person`實際上滿足所有必要的類型。 `isAdmin`類型是可選的,它不存在於`person`上,但這並不重要。您已經做了一個簡單的 type-o,現在嘗試存取`isAdmin`屬性,但它不起作用: ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxz8zzlxxog0xkdfpvbn.png) 哎呀!讓我們用類型註釋來修復它,我們立即聲明類型: ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zer5v40ipp47juw2n50f.png) 好的。因為我們在第 58 行使用了直接類型註釋,所以我們獲得了 TypeScript 多餘屬性檢查的好處。 謝謝,打字稿! 🙏 --- 如果您發現此內容有用,並且想要查看更多類似內容,您可以[在 GitHub 上給 Wasp 一顆星,輕鬆幫助我們!](https://www.github.com/wasp-lang/wasp) 。 ![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgbmn45pia04bxt6zf83.gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgbmn45pia04bxt6zf83.gif) {% cta <https://www.github.com/wasp-lang/wasp> %} ⭐️ GitHub 上的 Star Wasp 🙏 {% endcta %} --- 待續… --- 感謝您加入我的旅程的第 1 部分,以便更好地了解我們每天使用的工具。 這將是一個持續進行的系列,我將繼續以更具探索性、更少結構化的方式分享我所學到的東西。我希望您發現其中的某些部分有用或有趣。 讓我知道你接下來想看什麼!你喜歡這種風格嗎?你願意改變一些事情嗎?加入或刪除一些東西?或者你對最近學到的東西有什麼看法或類似的故事嗎? 如果是這樣,請在評論中告訴我們,我們下次見:) --- 原文出處:https://dev.to/wasp/ive-been-writing-typescript-without-understanding-it-5ef4

Node.js 中的高階錯誤處理

錯誤處理是軟體開發的重要方面,可確保應用程式的行為可預測,並在出現問題時提供有意義的回饋。在 Node.js 中,由於其非同步特性,有效的錯誤處理可能特別具有挑戰性。本文深入探討了管理 Node.js 應用程式中的錯誤的先進技術和最佳實踐。 了解錯誤類型 ------ 在深入研究錯誤處理策略之前,了解可能遇到的錯誤類型非常重要: 1. 同步錯誤: 同步程式碼執行期間發生的錯誤可以使用 try-catch 區塊擷取。 2. 非同步錯誤: 錯誤發生在非同步程式碼執行期間,例如回呼、promise 和 async/await 函數。 3. 操作錯誤: 表示程式需要處理的執行時間問題(例如,無法連線到資料庫)的錯誤。 4. 程式設計師錯誤: 程式中的錯誤(例如,型別錯誤、斷言失敗)。通常不應以與操作錯誤相同的方式捕獲和處理這些錯誤。 **同步錯誤處理** ---------- 對於同步程式碼,錯誤處理使用 try-catch 區塊: ``` try { // Synchronous code that might throw an error let result = dafaultFunction(); } catch (error) { console.error('An error occurred:', error.message); // Handle the error appropriately } ``` **非同步錯誤處理** ----------- - *callback* 在基於回調的非同步程式碼中,錯誤通常是回呼函數中的第一個參數: ``` const fs = require('fs'); fs.readFile('/path/to/file', (err, data) => { if (err) { console.error('An error occurred:', err.message); // Handle the error return; } // Process the data }); ``` - *promise* Promise 提供了一種更簡潔的方法來使用 .catch() 處理非同步錯誤: ``` const fs = require('fs').promises; fs.readFile('/path/to/file') .then(data => { // Process the data }) .catch(err => { console.error('An error occurred:', err.message); // Handle the error }); ``` - *async/await* Async/await 語法允許在非同步程式碼中進行更同步的錯誤處理: ``` const fs = require('fs').promises; async function readFile() { try { const data = await fs.readFile('/path/to/file'); // Process the data } catch (err) { console.error('An error occurred:', err.message); // Handle the error } } readFile(); ``` 集中錯誤處理 ------ 對於較大的應用程式,集中錯誤處理可以幫助更有效地管理錯誤。這通常涉及 Express.js 應用程式中的中間件。 - *Express.js 中介軟體* Express.js 提供了一種透過中間件處理錯誤的機制。這個中間件應該是堆疊中的最後一個: ``` const express = require('express'); const app = express(); // Define routes and other middleware app.get('/', (req, res) => { throw new Error('Something went wrong!'); }); // Error-handling middleware app.use((err, req, res, next) => { console.error(err.stack); res.status(500).json({ message: 'Internal Server Error' }); }); app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 先進技術 ---- - *自訂錯誤類別* 建立自訂錯誤類別可以幫助區分不同類型的錯誤並使錯誤處理更加精細: ``` class AppError extends Error { constructor(message, statusCode) { super(message); this.statusCode = statusCode; Error.captureStackTrace(this, this.constructor); } } // Usage try { throw new AppError('Custom error message', 400); } catch (error) { if (error instanceof AppError) { console.error(`AppError: ${error.message} (status: ${error.statusCode})`); } else { console.error('An unexpected error occurred:', error); } } ``` - *錯誤記錄* 實施強大的錯誤日誌記錄以監視和診斷問題。 Winston 或 Bunyan 等工具可以幫助記錄日誌: ``` const winston = require('winston'); const logger = winston.createLogger({ level: 'error', format: winston.format.json(), transports: [ new winston.transports.File({ filename: 'error.log' }) ] }); // Usage try { // Code that might throw an error throw new Error('Something went wrong'); } catch (error) { logger.error(error.message, { stack: error.stack }); } ``` - *全域錯誤處理* 處理未捕獲的異常和未處理的承諾拒絕可確保不會漏掉任何錯誤: ``` process.on('uncaughtException', (error) => { console.error('Uncaught Exception:', error); // Perform cleanup and exit process if necessary }); process.on('unhandledRejection', (reason, promise) => { console.error('Unhandled Rejection at:', promise, 'reason:', reason); // Perform cleanup and exit process if necessary }); ``` 最佳實踐 ---- - 快速失敗:儘早偵測並處理錯誤。 - 正常關閉:確保您的應用程式在發生嚴重錯誤時可以正常關閉。 - 有意義的錯誤訊息:提供清晰且可操作的錯誤訊息。 - 避免靜默故障:始終記錄或處理錯誤以避免靜默故障。 - 測試錯誤場景:編寫測試來覆蓋潛在的錯誤場景並確保錯誤處理按預期工作。 結論 -- 為了有效地處理 Node.js 中的錯誤,您需要結合使用同步和非同步技術、集中管理以及進階策略,例如自訂錯誤類別和強大的日誌記錄。透過結合這些最佳實踐和先進技術,您可以建立強大的 Node.js 應用程式,優雅地處理錯誤並為用戶提供改進的體驗。 --- 原文出處:https://dev.to/amritak27/advanced-error-handling-in-nodejs-1ep8

適用於 React 和 NodeJS 的最佳免費開源 SaaS 模板

展示開放 SaaS 🎉 ----------- 我們非常高興推出[Open SaaS](https://opensaas.sh) ,這是適用於 React、NodeJS 和 Prisma 的完全免費、開源、生產級 SaaS 樣板。 在這裡查看它的實際效果: https://www.youtube.com/watch?v=rfO5SbLfyFE Open SaaS 擁有您最近看到的那些付費 SaaS 入門者的所有功能,除了它完全**免費**且**開源**。 **我們覺得為一些需要自己管理的樣板程式碼支付 300-2,000 美元是瘋狂的**。最重要的是,許多樣板文件嚴重依賴第三方服務。再加上託管和其他費用,您需要花費大量資金才能將您的想法推向世界。 **這就是為什麼透過開放 SaaS,我們有意識地決定盡可能嘗試使用開源和免費服務。**例如,我們在[OpenSaaS.sh](http://OpenSaaS.sh)上託管的演示應用程式及其管理儀表板由 Plausible 分析的自架版本提供支援。希望您的 SaaS 具有相同的功能嗎?那麼,Open SaaS 已為您預先配置好! 此外,Open SaaS 使用的[Wasp 框架](https://wasp.sh)可以為您建立許多功能,例如 Auth 和 Cron 作業,這樣您就不必支付第三方服務費用或完全自己編寫程式碼(我們稍後會更詳細地解釋這一點)。 人們已經在使用開放 SaaS 建置什麼... ---------------------- 自正式發布以來,已有大量人員使用 Open SaaS 建立了令人驚嘆的應用程式並推出了超級創意業務。因此,我們首先要強調其中的一些內容。 以下是我們社區中一些應用程式的精選清單: 1. [Solon](https://trysolon.co) :Instagram/whatsapp 賣家的人工智慧銷售代理,幫助客戶探索產品。 ![梭倫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j32pl4a078c587jffsin.png) 2. [Captn.ai](https://captn.ai) :人工智慧代理團隊協作,自動建立、監控和優化 Google Ads 廣告活動。 ![船長](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yzygxmy4iu1yi9r758nc.png) 3. [Bleepify](https://bleepify.me) :在人工智慧的幫助下,自動配音或立即從影片中刪除某些單字。對於快速使 YouTube 影片符合其行為準則非常有幫助。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eqdqbvjwvfpv2rmmaypn.png) 4. [取得 AI 部落格文章](https://getaiblogarticles.com/):以 Markdown 格式提供的高品質、專注於 SEO 的部落格文章產生器 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qyzpg3gbipgyuy7g6lh.png) 如果上面的這些範例還沒有激發您的建造靈感,請繼續閱讀下面的內容,我們將討論為什麼建立開源 SaaS 模板、我們使用的堆疊以及它的工作原理。 為什麼我們要建造它......然後免費贈送它 ---------------------- 自從我們正式發布以來,反饋非常積極。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/subbtpb2syehdtuuof0r.png) 很多人對它讚不絕口,並且已經用它建置了許多 SaaS 應用程式,但我們也收到了一些問題,例如: - “它會保持免費嗎?” - “您開源這個的動機是什麼?” 所以我們認為我們應該先回答這些問題。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5rac9o1rxgrwfx51mc50.png) 首先,是的,它是 100% 免費和開源的,並將保持這種狀態。 其次,我們相信,開發者、獨立駭客和個人企業家社群的集體知識將比個人或小團體產生更好的樣板。當您從某些開發人員那裡購買SaaS 入門版時,您已經獲得了一個固執己見的堆棧,然後除此之外,您還獲得了按照他們認為最好的方式建置的應用程式- 但這可能並不總是最適合*您。* 第三, [Open SaaS](https://opensaas.sh)是[Wasp](https://wasp.sh)的一個專案,一個超強的開源React + NodeJS + Prisma全端框架。我們 Wasp 團隊相信 Wasp 非常適合快速且有效率地建立 SaaS 應用程式,我們希望這個模板能夠證明這一點。另外,身為開發人員,我們從其他開源專案中學到了很多東西,而 Wasp 本身就是一個開源專案。 基本上,我們熱愛開源理念,並且希望將其發揚光大。 🙏 因此,我們希望能夠為開發者社群提供非常有價值的資產,同時宣傳我們的開源全端框架。我們很高興看到社區為其做出貢獻,以便它不斷發展並成為最好的 SaaS 樣板。 開放 SaaS 是由什麼組成的 --------------- 我們在 Open SaaS 上投入了大量的精力,包括[文件](https://docs.opensaas.sh),以便開發人員可以自信、輕鬆地啟動 SaaS 應用程式。 我們還花了一些時間檢查其他免費的開源 SaaS 啟動器,並希望確保 Open SaaS 具有可立即投入生產的啟動器的所有正確功能,而不顯得臃腫。我們認為我們已經在很大程度上實現了這一點,儘管我們將繼續加入功能並隨著時間的推移進行改進。 目前的主要特點如下: - 🔐 身份驗證(電子郵件驗證、Google、github) - 📩 電子郵件(sendgrid、emailgun、SMTP) - 📈 管理儀表板(合理或谷歌分析) - 🤑 Stripe 付款(只需加入您的訂閱產品 ID) - ⌨️ 端對端類型安全性(無需配置) - 🤖 OpenAI 整合(AI 驅動的範例應用程式) - 📖 Astro 博客 - 🧪 與劇作家進行端到端測試 - 🚀 部署在任何地方 - 📄 完整的文件和社群支持 值得深入了解其中每個功能的細節,所以讓我們開始吧。 ### 授權 [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbistoghxrxft9zxxra1.png)](https://www.producthunt.com/posts/open-saas) 感謝 Wasp,Open SaaS 附帶了許多可能的身份驗證方法: - 使用者名稱和密碼(最簡單/最容易進行開發測試) - 已驗證電子郵件並重設密碼 - Google 和/或 Github 社群登入 這就是 Wasp 真正發揮作用的地方,因為設定全端 Auth 並取得預先配置的 UI 元件所需要做的就是: ``` //main.wasp app SaaSTemplate { auth: { userEntity: User, methods: { usernameAndPassword: {}, google: {}, gitHub: {}, } } } ``` 嚴重地。就是這樣! 只需確保您已設定社交身份驗證並擁有 API 金鑰以及定義的`User`和`ExternalAuth`實體,就可以開始了。不用擔心,這部分內容已在[Open SaaS Docs](https://docs.opensaas.sh)中詳細記錄和解釋。 最重要的是,Open SaaS 預先配置了一些範例,說明如何自訂和建立一些真正強大的身份驗證流程。 ### 管理儀表板和分析 [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4mm6s1c3txxgm49e2k7w.png)](https://www.producthunt.com/posts/open-saas) 透過利用[Wasp 的工作功能](https://wasp-lang.dev/docs/advanced/jobs),Open SaaS 每小時從 Plausible 或 Google 的網站分析(您的選擇!)和 Stripe 的資料 API 中提取資料,並將其保存到我們的資料庫中。然後,該資料將顯示在我們的管理儀表板上(前往[OpenSaaS.sh](https://OpenSaaS.sh)查看其實際情況)。好的部分是,要為您自己的應用程式存取這些資料,您所要做的就是按照我們的指南獲取分析 API 金鑰,插入提供的腳本,然後就可以開始了! 再次強調,Wasp 讓整個過程變得非常簡單。透過已經為您定義的查詢 API 和取得我們需要的資料的功能,Open SaaS 然後在`main.wasp`設定檔中使用 Wasp 作業: ``` job dailyStatsJob { executor: PgBoss, perform: { fn: import { calculateDailyStats } from "@server/workers/calculateDailyStats.js" }, schedule: { cron: "0 * * * *" }, entities: [User, DailyStats, Logs, PageViewSource] } ``` 就是這樣! Wasp 負責為您設定和執行 cron 作業。 ### 條紋支付 [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ugy3mx9xo1d9i9vfysr7.png)](https://www.producthunt.com/posts/open-saas) 如果您是以前從未建立過自己的 SaaS 的開發人員,那麼與 Stripe 這樣的支付處理器整合可能是您將面臨的少數挑戰之一。 當我建立第一個 SaaS [CoverLetterGPT.xyz](https://coverlettergpt.xyz)時,我的情況就是如此。這實際上是我建造它的主要動機之一;了解如何將 Stripe 支付整合到應用程式以及 OpenAI API 中。 儘管 Stripe 因擁有豐富的文件而聞名,但這個過程仍然令人畏懼。你必須: - 建立正確的產品類型 - 設定 webhook 端點 - 告訴 Stripe 將正確的 Webhook 事件傳送給您 - 正確使用事件 - 處理重複付款和失敗付款 - 在上線之前透過 CLI 進行正確測試 這就是為什麼為您設定 Stripe 訂閱付款是一個巨大的勝利。 但比這更重要的是,為您方便地記錄整個過程!這就是為什麼 Open SaaS[在我們的文件中為您提供方便的 Stripe 指南](https://docs.opensaas.sh)🙂 [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uehwot350u3dl02s4w7r.png)](https://www.producthunt.com/posts/open-saas) ### 端對端類型安全 Open SaaS 是使用 Typescript 建置的,因為它是一個全棧應用程式,所以從後端到前端的類型安全可以成為真正的救星。我的意思是,一些[固執己見的堆疊](https://create.t3.gg/)在此基礎上變得非常流行。 幸運的是,Wasp 為您提供開箱即用的端到端類型安全性(無需配置!),因此 Open SaaS 可以輕鬆利用它。 這是一個例子: 1. 讓 Wasp 了解您的伺服器操作: ``` // main.wasp action getResponse { fn: import { getResponse } from "@server/actions.js", entities: [Response] } ``` 2. 輸入並實施您的伺服器操作。 ``` // src/srever/actions.ts type RespArgs = { hours: string; }; const getResponse: GetResponse<RespArgs, string> = async ({ hours }) => { } ``` 3. 導入並在客戶端呼叫。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fah81r1g4bg3vdqapju.png) 客戶端類型將被正確推斷! ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7n04yh6de9slhhnjrgf3.png) ### AI 驅動的範例應用程式(附有 OpenAI API) [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbbc2gkxbxjl3q2y01a3.png)](https://www.producthunt.com/posts/open-saas) 人工智慧正在使新的應用程式創意成為可能,這也是我們看到開發人員對建立 SaaS 應用程式的興趣重新抬頭的部分原因。正如我上面提到的,我建造的第一個 SaaS 應用程式[CoverLetterGPT](https://coverlettergpt.xyz)是「GPT 包裝器」之一,我很自豪地說它帶來了約350 美元MRR(每月經常性收入)的可觀被動收入。 我個人認為,我們在軟體開發方面處於最佳狀態,開發新的、有利可圖的人工智慧應用程式有很大的潛力,尤其是「獨立駭客」和「個人企業家」。 這就是 Open SaaS 推出 AI 調度助手演示應用程式的原因。您輸入任務及其分配的時間,AI Scheduler 會為您的一天建立詳細的計劃。 [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4suf7g9jm5w93ri3bqx.png)](https://www.producthunt.com/posts/open-saas) 在幕後,這是使用 OpenAI 的 API 為每個任務分配優先級,並將它們分解為詳細的子任務,包括喝咖啡休息時間!它還利用 OpenAI 的函數呼叫功能以使用者定義的 JSON 物件回傳回應,以便客戶端每次都能正確使用它。此外,我們計劃在未來加入開源法學碩士,敬請期待! 示範版 AI Scheduler 可協助開發人員學習如何有效使用 OpenAI API,並激發一些 SaaS 應用程式創意! ### 隨處部署。容易地。 許多流行的 SaaS 新創公司都使用依賴託管的框架,這意味著您只能依賴一個提供者進行部署。雖然這些都是簡單的選擇,但它可能並不總是最適合您的應用程式。 Wasp 為您提供了部署全端應用程式的無限可能性: - 使用`wasp deploy`一鍵部署到[Fly.io](http://Fly.io) - 使用`wasp build`並部署 Dockerfiles 和客戶端,無論您喜歡什麼! `wasp deploy`的優點在於它會自動產生和部署您的資料庫、伺服器和用戶端,並為您設定環境變數。 Open SaaS 還內建了環境變數和常數驗證器,以確保您已正確設定部署所需的所有內容,以及文件中的部署指南 [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fihbij250xtbdtjbjoks.png)](https://www.producthunt.com/posts/open-saas) 最後,您擁有自己的程式碼,並且可以自由地將其部署到任何地方,而無需受供應商鎖定。 幫助我們,幫助你 -------- 想支持我們的免費開源計畫嗎?然後[在 GitHub 上為我們加註星標以向](https://github.com/wasp-lang/open-saas/)我們表示支持🙏 ![https://media1.giphy.com/media/ZfK4cXKJTTay1Ava29/giphy.gif?cid=7941fdc6pmqo30ll0e4rzdiisbtagx97sx5t0znx4lk0auju&ep=v1_gifs_searchx97sx5t0znx4lk0auju&ep=v1_gifs_search}&ridgi.](https://media1.giphy.com/media/ZfK4cXKJTTay1Ava29/giphy.gif?cid=7941fdc6pmqo30ll0e4rzdiisbtagx97sx5t0znx4lk0auju&ep=v1_gifs_search&rid=giphy.gif&ct=g) <https://www.github.com/wasp-lang/wasp> ⭐️ 給 Open SaaS 一顆星 🙏 現在就開始建立您的 SaaS! --------------- 我們希望 Open SaaS 能夠讓更多的開發人員能夠發布他們的想法和副專案。我們也希望從開發人員那裡獲得一些回饋和意見,以便我們能夠使其成為最好的 SaaS 樣板啟動器。 因此,如果您有任何意見或發現任何錯誤,請[在此處提交問題](https://github.com/wasp-lang/open-saas/issues)。 如果您發現 Open SaaS 和/或 Wasp 很有用,最簡單的支援方法就是給我們一顆星: - 為[Open SaaS 儲存庫](https://github.com/wasp-lang/open-saas)加註星標 - 給[黃蜂倉庫](https://github.com/wasp-lang/wasp)加註星標 --- 原文出處:https://dev.to/wasp/the-best-free-open-source-saas-template-for-react-nodejs-263

Node.js 最佳實務:開發人員指南

Nodejs 是一個用於建立快速且可擴展的 Web 應用程式的強大工具。然而,為了充分利用 Nodejs,遵循最佳實踐非常重要。在這篇文章中,我們將探討 Nodejs 開發的一些關鍵最佳實務。 1. 建構你的專案 --------- 結構良好的專案易於維護和擴展。這是一個您可以遵循的簡單結構: ``` my-node-app/ │ ├── src/ │ ├── controllers/ │ ├── models/ │ ├── routes/ │ └── services/ │ ├── tests/ │ ├── .env ├── .gitignore ├── package.json └── README.md ``` 解釋: - `src/`包含您的主要應用程式程式碼。 - `controllers/`處理您的應用程式的邏輯。 - `models/`定義您的資料結構。 - `routes/`管理 API 的不同端點。 - `services/`包含業務邏輯。 - `tests/`包含所有測試檔案。 - `.env`儲存您的環境變數 - `.gitignore`指定 GIT 中要忽略的檔案。 - `.package.json`追蹤依賴項和腳本。 - `README.md`描述了您的專案。 2.使用環境變數 -------- 環境變數有助於將配置設定保留在程式碼之外。這使您的應用程式更安全且更易於管理。 例子: 建立一個`.env`檔: ``` DB_HOST=localhost DB_USER=root DB_PASS=password ``` 使用`dotenv`包在程式碼中載入這些變數: ``` require('dotenv').config(); const dbHost = process.env.DB_HOST; const dbUser = process.env.DB_USER; const dbPass = process.env.DB_PASS; console.log(`Connecting to database at ${dbHost} with user ${dbUser}`); ``` 3.正確處理錯誤 -------- 正確處理錯誤可確保您的應用程式不會意外崩潰。 ``` app.get('/user/:id', async (req, res, next) => { try { const user = await getUserById(req.params.id); if (!user) { return res.status(404).send('User not found'); } res.send(user); } catch (error) { next(error); } }); app.use((err, req, res, next) => { console.error(err.stack); res.status(500).send('Something went wrong!'); }); ``` 4. 使用非同步程式碼 ----------- Nodejs 本質上是異步的。使用`async`和`await`更乾淨地處理非同步程式碼。 例子: ``` async function fetchData() { try { const response = await fetch('https://api.example.com/data'); const data = await response.json(); console.log(data); } catch (error) { console.error('Error fetching data:', error); } } fetchData(); ``` 5. 保持依賴關係更新 ----------- 定期更新您的依賴項,以確保您擁有最新的功能和安全性修復。 使用`npm outdated`檢查是否有過時的軟體包。 ``` npm outdated ``` 更新套件: ``` npm update ``` 6. 編寫測試 ------- 測試您的程式碼有助於及早發現錯誤並確保您的應用程式正常執行 正如預期的那樣。 例子: **第 1 步:安裝`Jest`** ``` npm install --save-dev jest ``` **第 2 步:編寫測試** 建立測試文件,例如, `tests/example.test.js` 。這是一個幫助您入門的簡單範例。 ``` const sum = (a, b) => a + b; test('adds 1 + 2 to equal 3', () => { expect(sum(1, 2)).toBe(3); }); ``` 7. 使用 Linter ------------ Linters 可協助您編寫乾淨且一致的程式碼。 ESLint 是一個受歡迎的選擇。 例子: 安裝 ESLint: ``` npm install eslint --save-dev ``` 初始化 ESLint: ``` npx eslint --init ``` 將 lint 腳本加入`package.json` : ``` "scripts": { "lint": "eslint ." } ``` 執行短絨檢查: ``` npm run lint ``` 結論 -- 遵循這些最佳實踐將幫助您編寫更好、更易於維護的 Nodejs 應用程式。請記住建立您的專案、使用環境變數、正確處理錯誤、編寫非同步程式碼、保持依賴項更新、編寫測試並使用 linter。透過這樣做,您將建立健壯且高效的 Nodejs 應用程式,並且更易於管理和維護。 快樂編碼! --- 原文出處:https://dev.to/mehedihasan2810/nodejs-best-practices-a-guide-for-developers-4d65

為什麼 Theo 是錯的 & 我們會得到一個 JavaScript 版的 Laravel

JavaScript 對全端框架的需求 ------------------- 「*為什麼我們沒有適用於 JavaScript 的 Laravel?」。*這是[西奧在他最近的影片中提出的](https://www.youtube.com/watch?v=yaodD79Q4iE)問題。 如果您不熟悉[Laravel](https://laravel.com/)和[Ruby-on-Rails](https://rubyonrails.org/)等工具,它們是固執己見的全端框架(適用於 PHP 和 Ruby),具有許多遵循既定約定的內建功能,以便開發人員可以編寫更少的樣板檔案和更多的業務邏輯,同時將行業最佳實踐融入他們的應用程式中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dndfaz2hjet9nisbiimc.png) 他回答這個問題時認為 JavaScript*不需要*這樣的框架,因為最好選擇你想要的工具並自己建立你需要的解決方案。 這聽起來很棒——如果你是一位經驗豐富的開發者,這也恰好是一個很好的靈活性——但我覺得他並沒有很好地支持這一說法,**我來這裡是為了告訴你我認為他錯在哪裡**。 在我看來,更好的問題是為什麼我們*還*沒有適用於 JavaScript 的 Laravel?答案是我們仍在努力。 在他對 JavaScript 世界中可以與 Laravel 或 Rails 相媲美的全端框架的總結中,他沒有考慮到一些重要的點: 1. **人們真的想要一個 Laravel/Rails for JavaScript** 。如果他們不這樣做,就不會進行如此多的嘗試來建立一個,他也不會製作一個影片,其唯一目的是回應“*為什麼 JAVASCRIPT 沒有自己的 Laravel!?* 」 2. **他沒有考慮 JS 生態系中底層工具的時機和成熟度**。也許並不是說 Laravel for JavaScript*不需要*存在,只是由於生態系統本身存在一些重大差異,例如它們的歷史有多長以及創新主要發生在哪裡,所以它還不存在。 3. **他也沒有詢問這些類型的解決方案適合誰**。當然,並非所有開發人員都有相同的目標,因此有些人可能會選擇可組合方法,而有些人則喜歡使用框架。 那麼讓我們看看我們是如何走到今天這一步的,以及我們如何能夠將像 Laravel 或 Rails 這樣的全端框架引入 JavaScript 世界。 完成任務 ---- 在他的影片中,Theo 提出了這樣一個觀點:「*現在 React 世界裡有一句俗話,那就是『如果你不使用框架,那麼你就在建立一個框架』」。*批評,Theo 認為大多數JavaScript 開發人員都沒有抓到重點,建立自己的「自己的框架」實際上是一種優勢。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5ft5f1j2zemurcvvzzk.png) 他認為 JavaScript 生態系統的模組化特性是一個巨大的優勢,但這聽起來對普通開發人員來說承受著很大的壓力,需要做出不必要的判斷呼叫並管理大量樣板程式碼。 當然,您的團隊需要創新並滿足特殊用例的需求。這些是優先考慮模組化的。他們盡可能調整、改進和榨取開發人員體驗 (DX) 和性能,以正確完成他們獨特的工作。 但另一方面,也有許多團隊的主要目標是在他們正在建立的產品方面創造價值和創新,而不是他們用來建立產品的工具。這些開發人員會青睞一個允許他們只專注於業務邏輯的框架。這為他們提供了一種穩定的方式來建立具有最佳實踐的東西,以便他們可以輕鬆地從一個專案推進到另一個專案。在這個陣營中,還有精幹、刻薄的獨立駭客,他們正在尋找框架,以便他們能夠快速行動並將想法推向市場! ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21tanpp8rmrboal0jl57.png) 這有點像Mac和Linux之間的差別。 Mac 的統一堆疊開箱即用,這意味著許多專業人士因其生產力而喜歡它,而如果您尋求靈活性並有時間和知識來根據自己的需求進行調整,那麼 Linux 是很棒的選擇。兩者都是有效的解決方案,可以共存以滿足不同的需求。 這種對生產力的關注使得 Rails 在當時如此強大,也是 Laravel 目前如此受歡迎的框架的原因。建立這樣一個 JavaScript 框架的多次嘗試足以證明,有很大一部分 JavaScript 開發人員也想要這樣的解決方案。 但也許這樣一個框架還不存在的原因與開發人員是否想要一個框架無關,而是為了使這樣一個框架組合在一起所需的重要因素直到現在才協調一致。為了使這樣的框架廣泛採用,它首先需要足夠穩定的底層技術來建造。之後,它需要時間和許多迭代周期才能達到成熟度,以便開發人員可以放心採用它。 這些因素在 JavaScript 世界中是否一致,為我們提供了 PHP 和 Ruby 已經擁有的框架類型?也許還沒有,但他們似乎正在慢慢走在一起。 比較生態系統 ------ Theo 的要點之一是JavaScript 作為一種語言能夠實現一定程度的模組化和可組合性,而Ruby 和PHP 等語言則無法做到這一點,這就是為什麼Ruby 和PHP 生態系統可以得到全端框架的良好服務,但JavaScript*不需要因為*你可以自己創作東西。 雖然 JavaScript 是一種特殊的語言,它支援函數式和命令式範式以及動態特性,但它也有很多缺陷(儘管它最近已經有了很大的改進),所以你通常不會聽到它在就像西奧在這裡所做的那樣。事實上,您可能更有可能聽到 Ruby 及其作為模組化和靈活語言特性的讚揚。 因此,如果 JavaScript 作為一種語言的一些獨特屬性使它成為 Web 開發之王,那麼它又是什麼呢? ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r051nlojgrvt9crc03jd.png) 嗯,答案非常簡單: **JavaScript 是瀏覽器的語言**。 *早在*大多數 Web 開發都發生在伺服器端的時候,PHP、Java、Ruby 和其他語言佔據了主導地位。在這個時代,開發人員只會用 JavaScript 寫一小部分功能,因為大部分的工作都是在伺服器端處理。 但隨著Web 開發的發展,我們開始建立更豐富的應用程式,具有更動態、響應更快和即時的功能,許多程式碼從伺服器轉移到客戶端上的JavaScript,因為它(基本上)是唯一可以實現的語言。因此,您不再主要使用 PHP 或 Ruby 進行開發,並在其中撒上一點 JavaScript,而是將應用程式劃分為客戶端上的大量 JavaScript,以及伺服器上的 Ruby 或 PHP。 隨著 NodeJS 的到來以及在伺服器上編寫 JavaScript 的能力,JavaScript 的最後一個權力舉措隨之而來,這鞏固了它作為 Web 開發語言之王的地位。如今,開發人員可以(而且確實)用 JavaScript 編寫整個應用程式。這意味著您需要更少地了解一種語言,同時您也可以在前端和後端之間共用程式碼。這為前端和後端之間更好的整合開闢了一條途徑,它已經像滾雪球一樣進入了我們今天所知的生態系統。 因此,與其說 JavaScript 作為語言的獨特屬性使其成為 Web 開發的主導生態系統,不如說是其作為唯一可用於編寫客戶端程式碼的語言的獨特壟斷地位,而且它還可以用於伺服器 -邊。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulc5eo5qu3a0nuv6bnv5.png) 正如 Theo 所說,「在 JavaScript 生態系統中*,我們有無數的人正在製定出色的解決方案*」。這是正確的。正是那些在該領域工作的無數開發人員為 JavaScript 建立了靈活性和模組化解決方案,而不是程式語言的固有品質。 由於 JavaScript 生態系統仍然是最熱門的生態系統,因此它擁有最多的開發人員,同時每天不斷吸引新的開發人員。這意味著我們擁有一個龐大、多元化的社區,主要做兩件事: 1. 創新 2. 大樓 創新者(和影響者)往往聲音最大,因此輿論很大程度上偏向他們。但也有很多建築或「正常」使用正在發生!只是創新者往往代表建設者說話。 那麼,鑑於 JavaScript 生態系統中正在發生的一切,嘗試為 JavaScript 開發人員建立一個持久的框架是否毫無意義,正如 Theo 所建議的那樣,或者無論創新者如何聲稱,我們是否都在實現這一目標? 顯示您正在使用的內容 ---------- Theo 也提到了目前一些 JavaScript 框架的名字,這些框架要么未能成功,要么在成為全面的全端解決方案時「*似乎無法做到正確*」。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/susa9icldz2hzysqo1qm.png) 他的觀點確實有道理。到目前為止,像[Blitz](https://blitzjs.com/) 、 [Redwood](https://redwoodjs.com/) 、 [Adonis](https://adonisjs.com/)或[T3](https://create.t3.gg/)這樣的解決方案還沒有能夠像 Rails 或 Laravel 一樣在其生態系統中普及。 **但這些事情需要時間。** 看看上面的圖表。 Laravel 和 Rails 已經存在了 13-15 年!相較之下,使用的 JavaScript 框架才剛起步,其中一些框架(例如[Wasp](https://wasp-lang.dev)和[Redwood](https://redwoodjs.com/) )正處於與 Laravel 和 Rails 最初幾年類似的開發階段。 正如您所看到的,好的解決方案需要時間才能成熟。即使其中一些框架開始停滯其最初的巨大增長,也證明對這些工具的需求確實存在! 困擾這些工具的主要問題是 Javascript 作為一個生態系統正在快速發展,因此對於像這樣的解決方案要長期生存,它不僅需要足夠固執己見,而且還需要足夠模組化以跟上生態系統的變化。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/biqe18hoeb6d06ughjhh.png) 阻止框架達到這種狀態的一個因素是與錯誤的技術連結得太緊密。這是 BlitzJS 的 NextJS、Redwood 的 GraphQL 和 MeteorJS 的 Blaze。另一個因素是框架*不夠大*,因為在JavaScript 生態系統中,這似乎是一項過於艱鉅的任務,在這個生態系統中,事情發展得很快,每個人都“害怕固執己見”,因為他們可能會受到現場最響亮聲音的批評。 換句話說,避免自行發展壯大並*真正*實現全端的框架(如 Ruby-on-Rails 和 Laravel)就錯過了解決持續困擾 JavaScript 開發人員的最常見痛點的機會。 但是,JavaScript 生態系統正在成熟和穩定,我們正在從以前的嘗試中學習,並且*將會*出現一個足夠大膽的全端框架,可以一路走下去,做足夠多的事情,並堅持足夠長的時間以確保其地位。 向黃蜂打個招呼 ------- Theo 在比較當今市場上的 JavaScript 框架時,也沒有提到我們目前正在開發的 React 和 NodeJS 全端框架[Wasp](https://wasp-lang.dev) 。 我們一直在努力讓[Wasp](https://wasp-lang.dev)成為*真正的*全端框架,滿足 Web 開發人員的需求,並填補 JavaScript 生態系統的空白,成為他們喜歡使用的框架。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z7j67hychqw770nrau3f.png) **對於 Wasp,我們決定做大、有主見、真正的全端**。換句話說,我們將*全力支持*這個框架。 這意味著從首要原則出發思考並設計一種只有Wasp 使用的新穎方法,例如為我們的配置語言建置我們自己的編譯器,並真正實現全棧,同時保持其足夠的模組化,以便隨著生態系統的發展與生態系統一起發展。 這意味著我們在一開始就花了更多的時間嘗試不同的方法並建立基礎,最終從 2023 年底開始使我們的使用量大幅躍升。 今天看到 Wasp 被用來發布大量新應用程式和業務,甚至被一些大公司和組織內部使用(更多資訊很快就會正式發布),這對我們來說真的很酷! ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1eo9feum42heb2qcua9o.png) Wasp 與 JavaScript 世界中其他全端框架的不同之處在於,它將主要抽象層分離到自己的設定檔`main.wasp`中。這個設定檔為Wasp 提供了處理大量樣板檔案、以基礎設施為中心的程式碼所需的知識,並允許它擁有這個獨特的初始編譯時步驟,在該步驟中,它能夠在生成Web 應用程式之前推理出您的Web 應用程式在後台為其編寫程式碼(在生成它時使用該知識)。 實際上,這意味著您所要做的就是在 Wasp 的設定檔中高層描述您的 Wasp 應用程式,然後使用您熟悉的技術(例如 React、NodeJS 和 Prisma)實現其他所有內容。這也意味著 Wasp 具有很高的模組化潛力,這意味著我們正在建立它來支援未來的其他前端框架,如 Vue、Solid 或 Svelte,甚至支援其他後端語言,如 Python、Go 或 Rust。 如果您是那種希望存在 Rails 或 Laravel for JavaScript 的開發人員,那麼您應該[嘗試 Wasp](https://wasp-lang.dev/) (然後[進入我們的 Discord](https://discord.gg/rzdnErX) ,讓我們知道您的想法)! 我們要去哪裡? ------- 我們堅信 JavaScript 將會有一個全端框架,就像 PHP 的 Laravel 和 Ruby 的 Ruby-on-Rails 一樣。 目前看來,我們仍在努力實現這一目標。鑑於當前元框架和堆疊(例如 NextJS 和 T3)的流行,我們似乎很快就會實現這一目標。 但這些東西需要時間和耐心。 另外,你必須有足夠的勇氣去嘗試新的東西,因為你知道你的工作會受到生態系統中一些最響亮的聲音的批評。 這就是我們所準備的,也是我們*全力*支持黃蜂的原因。 到時候那裡見! ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nig9t4pr85jqtz536frn.png) --- 原文出處:https://dev.to/wasp/why-we-dont-have-a-laravel-for-javascript-yet-45bi

如何在AWS部署自己的網站

完全控制您的網站,並遵循我們的操作指南。 從頭開始建立和部署網站的好處: - 擁有程式碼並以您認為合適的方式控制它 - 了解 AWS 以及如何將網站部署到 AWS S3 - 了解 DNS 和 Route53 - 如何使用DevOps解決自動化問題 請繼續閱讀以開始使用。 > [在 Twitter 上關注我](https://x.com/rolfstreefkerk),隨時了解有關 AWS 等的最新文章。 您將需要以下內容才能開始 ------------ 1. **靜態站點**,我推薦以下框架之一(我已經使用過): ``` - [Hugo](https://gohugo.io/) ``` ``` - existing [themes](https://themes.gohugo.io/) will get you a website quick, such that you only have to modify color schemes and layouts. ``` ``` - or [Astro](https://astro.build/); if you’d like to integrate React, VueJS etc. code as well. ``` ``` - use their themes page [here](https://astro.build/themes/) to get a starting point. ``` 2. **一個[AWS 帳戶](https://aws.amazon.com/)**,需要信用卡才能設定。 3. **一個域名**,無論您在哪裡註冊。 ``` - In this how-to I use [Porkbun](porkbun.com) as my favorite registrar. ``` 4. **一台電腦**; ``` - [Terraform](https://www.terraform.io/)/[OpenTofu](https://opentofu.org/) installed. We use Terraform in this article. ``` ``` - [AWS CLI](https://aws.amazon.com/cli/) installed with profile configured you want to use for your website deployment. ``` ``` - [Git](https://git-scm.com/downloads) command line tooling. ``` ``` - your code editor of choice, I use [VSCode](https://code.visualstudio.com/). ``` 5. **一個[GitHub](https://github.com/)帳戶**,以便您可以建立我的範例儲存庫。 6. *(可選)電子郵件收件匣供應商*,我使用[Migadu](migadu.com) 。 今天我們在創造什麼? ---------- 我們正在建立以下服務和配置: -------------- - 用於將網站來源檔案傳送到的 AWS S3 儲存桶; - AWS CloudFront 發行版將在全球範圍內快取、優化向您的受眾交付的網站。 - AWS Route53 適合您; ``` - Email service records with DNSSec configuration, ``` ``` - You can then hookup a newsletter service like `ConvertKit.com` ``` ``` - Name Server Configuration for your domain; `yourwebsite.com` ``` ``` - and the CloudFront distribution to optimize your website hosting. ``` - 適用於 CI/CD 管道的 GitHub Actions,可在一分鐘內根據命令部署您的網站。 ![將您的網站部署到 AWS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40hkfi68ukl8m6vw3y02.png) 在 AWS 上設定您的網域 ------------- 登入您的 AWS 控制台。 1. 登入後,前往 Route53,然後導覽至`Hosted zones` 。 2. 建立您的託管區域並輸入您的網站網域; `yourwebsite.com` 3. 記下`Hosted zone ID` ,我們將在下一步中使用 Terraform 將所有 Route53 記錄自動化到正確的網域。 ![Terraform 託管區域 ID](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ydaop4rxoper3xj7xt1.png) 如果您選擇使用 Terraform 實現自動化; - 從您的網域註冊商(Porkbun 等)匯出名稱伺服器。 - 將託管區域資源配置新增至[我的範例 Terraform 模組](https://github.com/rpstreef/terraform-static-site)中,並將其連接到需要託管區域 ID 的所有相關資源。 ### (可選)電子郵件託管 如果您想設定電子郵件託管解決方案,我使用 migadu.com,保持 Route53 網站開啟。 我們將向 Route53 匯入其他設定文字區塊,以使您的網域與收件匣服務搭配使用。 - 在郵件收件匣服務中,有一個`DNS Configuration`面板。 - 取得`BIND`記錄輸出,複製/貼上所有 DNS 記錄的文字。 > 如果您需要自動發現您的電子郵件的郵件伺服器; > 在提供的 DNS 記錄中檢查這些字串; `_autodiscover`或`autoconfig` ![取得BIND記錄](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1mfczsfjwddthnluqs9d.png) - 然後在 AWS Route53 中,針對您的託管區域; `Import zone file` ,然後複製貼上該對話方塊中的文字行。 ![Route53 託管區域文件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dj7gfedvyf4egixw2s2c.png) - 現在您可以在郵件應用程式中新增新的電子郵件收件匣。 如果您有`_autodiscover`和/或`autoconfig` DNS 記錄,您可以; - 轉到您的電子郵件應用程式, - 使用新增收件匣;電子郵件和密碼。 - 完成,收件匣已新增,無需進一步配置。 否則,請記下您的郵件收件匣服務 SMTP 和 IMAP 伺服器設定。 使用 Terraform 自動設定您的 AWS 帳戶 -------------------------- 現在我們已經有了網域和郵件收件匣(可選),我們可以設定實際的網站部署。 透過 Forking 建立一個新專案:https://github.com/rpstreef/terraform-yourwebsite.com 這是一個將使用另一個 Git 儲存庫中的 Terraform 模組的範本; https://github.com/rpstreef/terraform-static-site ### 這個模板建立了什麼? 此範本將建立以下資源集; - Terraform 狀態的 S3 儲存桶 - `yourwebsite.com`的 S3 儲存桶 ``` - S3 CORS configuration for ConvertKit.com , this will allow CORS between ConvertKit JavaScript and your domain without warnings. ``` - SSL 的 ACM 憑證、 `*.yourwebsite.com`以及用於自動續訂 SSL 的 Route53 的 ACM 驗證記錄。 - Route53 A 和 AAAA 記錄 (IPv6) - Route53 DNSSec, ``` - only the first step! The second step must be done manually with your Domain Registrar. ``` - 用於重定向到索引的 Lambda 函數可確保您擁有良好的 URL。 ``` - E.g. https://yourwebsite.com/contact instead of https://yourwebsite.com/contact/index.html ``` - CloudFront 用於快取、網頁速度優化以及 SSL 保護。 ### 如何調整模板? 使模板適合您的網站。 請執行下列操作 - 更改`terraform.tfvars`檔案中的這些行: ``` - where you read `yourdomain.com`, ``` ``` - and your `hosted_zone_id` for `yourdomain.com`. ``` ``` - check 404 response at the bottom of the file to see if that matches up with your website structure. Additionally HTTP response codes can be added as blocks; `{}`. ``` 如果您需要額外的 CORS 設置,請按照與`f.convertkit.com`相同的方式加入額外規則。 ``` # General environment = "prod" region = "us-east-1" project = "yourdomain.com" # use tags to track your spend on AWS, seperate by 'product' for instance. tags = { environment = "production" terraform = true product = "yourdomain.com" } # Which config line used in .aws/config aws_profile = "yourdomain-profile" # Route53 hosted_zone_id = "Z000000000" # www.yourdomain.com product_name = "yourdomain" # avoid to use `.`, this cause an error. bucket_name = "yourdomain.com" # your site is deployed here. # S3 bucket CORS settings: bucket_cors = { rule1 = { allowed_headers = ["*"] allowed_methods = ["GET", "PUT", "POST"] allowed_origins = ["https://f.convertkit.com"] expose_headers = ["ETag"] max_age_seconds = 3000 } } domain_names = ["yourdomain.com", "www.yourdomain.com"] custom_error_responses = [{ error_code = 404 error_caching_min_ttl = 10 response_code = 200 response_page_path = "/404.html" }] ``` - 確保`project-state.tf`檔案中的配置正確; ``` - check the bucket name, ``` ``` - and the AWS `profile` name used, e.g. `yourwebsite-profile`. ``` ``` locals { projects_state_bucket_name = "tfstate-yourwebsite.com" } provider "aws" { region = "us-east-1" profile = "yourwebsite-profile" } terraform { # First we need a local state backend "local" { } # After terraform apply, switch to remote S3 terraform state /*backend "s3" { bucket = "tfstate-yourwebsite" key = "terraform.tfstate" region = "us-east-1" profile = "yourwebsite-profile" encrypt = true acl = "private" }*/ } ``` - 如果所有配置都檢查通過; ``` - run `terraform init`, this will download the dependent modules. ``` ``` - then; `terraform apply` > `yes` ``` - 完成部署後,記下輸出中的變數。我們稍後會需要它們。若要稍後檢索這些,請鍵入; `./environments/production`目錄中的`terraform output` 。 > 哪一個先出現?雞還是雞蛋? - 完成後,我們需要調整`project-state.tf`檔案: ``` - Place the `backend "local"` block in comments. ``` ``` - Remove the comments from the `backend "s3"` block. ``` ``` - Migrate the state from `local` to `S3`: ``` ``` - `terraform init -migrate-state` ``` ``` - type: `yes` to copy state from local to s3. ``` 現在它已完全部署,我們已將 Terraform 狀態儲存到 AWS S3,它不再位於您的磁碟上。如果您願意,可以刪除這些`tfstate`檔案。 ### 建立 DNSSec“信任鏈” DNSSec 的好處是建立了「信任鏈」。 這意味著,已驗證; - 您擁有該域名, - 當您導航到該網域時,資訊來自您的伺服器而不是來自其他人的伺服器(例如駭客等) > 如果您想了解有關 DNSSec 的更多訊息, [本文](https://www.csoonline.com/article/569685/dnssec-explained-why-you-might-want-to-implement-it-on-your-domain.html)是一本很好的入門讀物 現在要完成 DNSSec 配置,您必須手動修改網域註冊商資訊。 - 首先,取得DNSSec所需的`DS`記錄; `View information to create DS record` ![路由 53:DNSSec](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zrbuax3y4n65hjr0pm5v.png) - 然後,在下一個畫面中點擊; `Establish a Chain of Trust` 。 您將看到一個概述配置專案的表格。 如果您沒有在 Route53 上註冊網域,請按一下`Another Domain registrar` 在我的網域註冊商 Porkbun 上,畫面如下所示: ![Porkbun.com DNSSec](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yavg03ukeye7ienuuswp.png) - 在`dsData`區塊中輸入以下內容;左邊是 Porkbun 輸入欄位名稱,右邊是值,我將放置在`Route53`中使用的名稱: ``` - Key Tag: `Key tag` ``` ``` - DS Data Algorithm: `Signing algorithm type` ``` ``` - Digest Type: `Digest algorithm type` ``` ``` - Digest: `Digest` ``` > 如果您有不同的註冊商,您需要查看他們的文件,可能會略有不同。 #### 如何檢查您的配置是否有效? - 最後,使用這個線上工具;如果您獲得所有綠色複選標記,請使用 https://dnssec-debugger.verisignlabs.com/ 檢查您的網域。 如果都是綠色的,那就表示你的信任鏈已經成功建立了! 現在我們有了一個 DNSSec 安全性網域配置,其中包含一個透過 CloudFront 使用 SSL 的 S3 靜態託管網站。 - 高效率的 - 便宜的 - 和安全。 上傳您的網站 ------ 我們可以透過 AWS CLI 或 GitHub Actions 使用本地部署設定。 ### 使用腳本進行本地部署 根據您的系統(Linux、Windows、Mac),您可能需要變更此腳本。 在 Linux 上,我們可以使用以下 bash 腳本自動化您的網站部署,如下所示: ``` #! /bin/bash npm run build aws s3 sync dist s3://yourwebsite.com --profile yourwebsite-profile aws cloudfront create-invalidation --distribution-id <CloudFront Distr. Id> --paths "/*" --profile yourwebsite-profile ``` 確保; - 將`npm run build`替換為產生靜態網站建置的腳本。 - 如果您的網站建置位於另一個資料夾中,請取代`aws s3 sync dist`中的`dist` 。 - 替換`<CloudFront Distr. Id>`與您的 CloudFront 指派 ID。 ``` - you can find it in the outputs after `terraform apply` has finished; `cloudfront_distribution_id` ``` ### GitHub 操作 如果您喜歡使用自動化,那麼設定起來非常簡單且便宜。 #### 無論如何,這要花多少錢? |計劃|儲存|分鐘(每月)| | ----------- | -------- | ------------------- | | GitHub 免費 | 500 MB | 2,000 | | GitHub 專業版 | 1 GB | 3,000 | 在達到`Pro` `Minutes per month`上限之前,您可以部署多次: `storage`大小取決於您的儲存庫大小,對於大多數人來說,這將很難達到。 |作業系統 |分鐘乘數 | | ---------------- | ----------------- | | Linux | 1 | |窗戶| 2 | 我們選擇`Linux`建置環境,特別是`ubuntu-latest` ,以充分利用我們的空閒時間。 [在此處](https://docs.github.com/en/billing/managing-billing-for-github-actions/about-billing-for-github-actions)查看有關 GitHub Action 定價的更多資訊。 #### 它是如何運作的? 若要使用 GitHub Actions 進行部署,請執行下列操作: - 首先,在網站的 GitHub 儲存庫中建立一個新檔案(位於`.github/workflows/deploy-on-comment.yml` 。 - 將以下程式碼新增至文件: > **筆記**;我假設您的網站是基於 Node (v20) 的。在需要的地方進行調整! ``` name: Deploy on Comment on: issue_comment: types: [created, edited] push: branches: - main jobs: deploy: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v3 - name: Set up Node.js uses: actions/setup-node@v3 with: node-version: '20' - name: Install dependencies run: npm install - name: Build website run: npm run build - name: Configure AWS Credentials uses: aws-actions/configure-aws-credentials@v1 with: aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} aws-region: us-east-1 - name: Sync build output with S3 bucket run: aws s3 sync ./dist s3://your-s3-bucket-name - name: Invalidate CloudFront cache run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} --paths "/*" ``` 需要在 GitHub 上建立幾個秘密變數,這些變數來自我們之前收到的 Terraform 輸出: - `AWS_ACCESS_KEY_ID` : - `AWS_SECRET_ACCESS_KEY` : - `CLOUDFRONT_DISTRIBUTION_ID` - 如果您需要再次尋找這些內容,請導覽至您的`terraform-yourwebsite.com` git 儲存庫,然後; ``` - `cd ./environments/production` ``` ``` - `terraform output` ``` - 在 GitHub 中的以下位置輸入它們: ![GitHub 秘密配置](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uddfhnlxicco614wxx72.png) - 例如,您現在可以`create an issue` ,詳細說明您網站上的更新。 ``` For each comment that is added, the deployment will start. ``` - 您可以按照`Actions`標籤中所採取的部署步驟和日誌進行操作。 ![GitHub問題,評論部署](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g4srw32r69d97j7za1dj.png) - (可選)如果您想要變更 GitHub 操作以使用`Pull request` ,您可以在部署腳本中進行修改。 ``` > For more alternative triggers, check out the [GitHub Actions documentation](https://docs.github.com/en/actions/using-workflows/triggering-a-workflow). ``` 您的網站上線了! -------- 現在,當您造訪您的網址時; `yourwebsite.com` ,一切都應該啟動並執行。 我們已經建造了什麼; - (可選)使用 Migadu 託管電子郵件(或選擇您擁有的任何託管服務);例如`[email protected]` ``` - You can connect this to your ConvertKit.com mailing list for example. ``` - 您自己的受 DNSSec 保護的個人網域。 ``` - You’ll be certain no hackers can hi-jack your domain. ``` - 您在 \[\[AWS\]\] 上使用 AWS S3 的靜態網站。 ``` - Free web-hosting! ``` - CloudFront 內容傳遞網路 (CDN),支援: ``` - SSL protected website. Form submits are all encrypted by default. ``` ``` - Increased performance in load speeds, latency across the globe. ``` ``` - URL rewrites for static websites. No `index.html` will be displayed when navigating. ``` ``` - and redirects for 404 not found pages. Your visitors will see the `404.html` page instead of an error text message. ``` 問題?來! ----- 您在 AWS 上遇到什麼困難? 您在 AWS 上部署時遇到問題嗎? 你會怎麼做? 請在評論或[Twitter](https://x.com/rolfstreefkerk)上告訴我 感謝您的寶貴時間,直到下次! --- 原文出處:https://dev.to/rolfstreefkerk/how-to-deploy-your-own-website-on-aws-1l05

如何在 2024 年找到一份 Web 開發人員工作(不死不休)🧑‍💻💀

嘿,我是文斯... ========= ![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/az8xf61b2qxx1msfo4t5.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/az8xf61b2qxx1msfo4t5.png) 我是一名自學成才的開發人員,在新冠疫情期間改變了職業生涯。透過在空閒時間學習和建構、參加黑客馬拉松以及為開發人員建立教育內容,我能夠從教育轉向 Web 開發。 當我找到第一份開發工作時,儘管我決心成為高級工程師,但我還是從一個薪水非常低的「實習生」職位開始。雖然這並不理想,但它讓我在工作中學習並踏入了大門。 一年後,經過一番努力,我得到了一個更好的職位,薪水是以前的三倍! 🤯 ![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sf1fhsgwuurkre9a7drq.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sf1fhsgwuurkre9a7drq.png) 如今,我目前擔任[Wasp](https://wasp-lang.dev)的創始開發人員關係工程師,負責建置[OpenSaaS.sh](http://opensaas.sh/)等內容,這是一個適用於 React 和 NodeJS 的免費開源 SaaS 入門模板,以及 Stripe、OpenAI 和 AWS S3 整合。它基於我從建立第一個盈利的 SaaS 應用程式[CoverLetterGPT.xyz](http://coverlettergpt.xyz/)中學到的知識,該應用程式目前擁有 100 多個客戶,每月收入約 500 美元!沒什麼瘋狂的,但我仍然感到自豪。 現在,我目前擔任開發人員的角色,社群中的人們經常向我詢問有關找到技術工作的建議。考慮到這一點,並結合我過去的經驗,我想我應該寫一篇綜合文章,分享我所學到的和認為最有效的方法。 享受! 2024 年開發人員目前就業市場 ================ 首先,讓我們快速了解一下目前軟體開發人員的就業市場。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7lmohbs24ds94kwxo9dt.png) 如果您花時間在 Reddit 或[X.com](http://X.com) (又名 Twitter)上,那麼您可能會看到人們抱怨當前的開發人員就業市場有多糟糕。 為了嘗試找到一些實際的統計資料來支持這些說法,我使用[Perplexity.ai](http://Perplexity.ai)來幫助我找到一些有關軟體開發人員當前需求的訊息,我對結果感到驚訝。 顯然,對軟體開發人員的需求仍然很高,事實上**,平均需求高於其他工作,並且[預計在未來幾年將增長更多](https://icts.io/2024/02/01/5-predictions-on-software-development-jobs-in-2024)**! 那麼,為什麼現在有些開發商感覺比平常更難找到工作呢? 嗯,那是因為它實際上*更難*,但前提是您是經驗不足的開發人員。 另一方面,如果您是一位經驗豐富的開發人員,擁有豐富的工作經驗,那麼還有更多的空缺職位可供您選擇。但如果您是剛起步的初級開發人員,競爭將比以往更加激烈。 原因如下: 1. **所需技能的複雜性**:軟體開發越來越複雜,需要廣泛的技能,這使得[許多候選人很難滿足工作要求](https://nxtide.com/the-global-shortage-of-software-developers-and-its-serious-implication-in-the-comming-years/)。 2. **遠距工作趨勢**:向遠距工作的轉變擾亂了入門級開發人員管道,[使公司更難找到和培訓新人才。](https://www.revelo.com/blog/software-developer-shortage-us) 3. **經濟因素**:疫情和隨後的經濟變化導致[招聘模式波動,在某些時期出現大量裁員,隨後需求激增](https://icts.io/2024/02/01/5-predictions-on-software-development-jobs-in-2024)。 基本上,儘管對經驗豐富的開發人員的需求很高,但對經驗不足的開發人員的需求相對較低。 因此,由於初級和中級工程師的供應相對較多,都在競爭相同的工作,您如何才能獲得經驗豐富的開發人員的技能並讓自己脫穎而出? 成為問題解決者,而不僅僅是編碼員 ================ 軟體開發職業意味著變化是永恆的。你必須隨時準備好學習新事物並走出你的舒適區,因為, 1. 工作需要它,並且 2. 該行業以極快的速度發展 在這樣的環境中,憑證、課程和學位(在某種程度上)就不那麼重要了,因為它們不能證明你具備適應和解決出現的新問題所需的技能。當然,它們證明您擁有一定數量的基礎知識,但這只是工作所需技能的一小部分。 您希望能夠透過以下方式證明您可以應對以前從未遇到過的挑戰: - 快速了解這個新主題, - 找到合適的方法來解決它,並且 - 快速執行該方法以實現您的目標 [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lbjy6ikx8iy9lb3ngx5.png)](https://www.tiktok.com/@techfren/video/7361777687158983943) 但不要只是從我這裡奪走它。 AJ,又名[TikTok 上的 Techfren](https://www.tiktok.com/@techfren/video/7361777687158983943) ,談論如何在後人工智慧世界中駕馭當前的工作環境。他在這裡提出了一些與本文相關的好觀點。例如: 1. 一般的編碼知識甚至不太相關,因為人工智慧擁有非常廣泛的編碼知識。作為一名工程師,你不再有價值,因為你知道如何編碼——人工智慧現在知道如何很好地編碼(並使用比你更多的程式語言)。**你的價值在於批判性思考、解決問題以及為這些問題建立解決方案。** 2. 企業將開始更多地尋找這些通才問題解決者來建立內部應用程式(即內部工具)作為付費服務的替代品,以節省資金並滿足其特定的業務需求,因為人工智慧使開發人員能夠提高工作效率。 因此,很明顯,解決問題的技能需求量很大,並且在未來將繼續變得更加重要。我們可以假設更有經驗、更受歡迎的開發人員擁有這些技能,那麼我們該如何自己建立它們呢? 解決自己的問題 ======= 好的。因此,您認為自己是一位充滿好奇心的開發人員,能夠快速適應和學習新事物,並即時解決問題。 但你要如何向未來的雇主證明這一點呢? 簡單的。只解決自己的問題!在實踐中 - 在 Web 開發領域 - 這意味著「處於舒適區的邊緣」並建立適合您和您的興趣的獨特 Web 應用程式。 [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n06z1ktgs70g5c7cv2r7.png)](https://tiktok.com/@cameronblackwoodcode/video/7364455582981524768) 自學成才的工程師和內容創作者卡梅倫·布萊克伍德 (Cameron Blackwood) 在他的[TikTok 影片中完美地描述了這一點,為新開發人員提供如何提高技能的建議](https://tiktok.com/@cameronblackwoodcode/video/7364455582981524768)。他也擁有獨特的視角,因為他之前擔任過技術招募人員,他說: - 建立一個網頁應用程式來解決您日常生活中遇到的問題 - 嘗試與您目前在日常工作中學習/做的事情不同的事情。 - 在空閒時間繼續建構和嘗試新事物。 當然,您製作的這些應用程式不一定是完美的,但它們越獨特,就越能展示出對問題的創造性和良好實現的解決方案,就越好。 如果您在思考要建立的東西時遇到困難,有時只需嘗試新工具即可激發新想法。但無論你決定如何處理它,都取決於你自己,重要的是開始,所以開始吧! --- 順便說一句, [Wasp](https://wasp-lang.dev)是輕鬆建立解決您獨特問題的新應用程式的好方法。這也是在 React 和 NodeJS 中建立客製化全端應用程式的最快方法之一,而無需為身份驗證、路由、端到端類型安全性、部署等編寫一堆樣板程式碼。 作為示例,請觀看此影片,該影片向您展示了在整個應用程式中實施全端身份驗證是多麼容易。 https://www.youtube.com/watch?v=Qiro77q-ulI 做繁重的工作 ====== ![好的](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExa2s1d3J6dmQ2ZHc3b2RsYXQxdnFhOWR5Z3licmhjajdxZ2N3anBsOCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/AYECTMLNS4o67dCoeY/giphy.gif) 當我寫這篇文章時,我很幸運地看到了[Jonathan Stern 的這條推文](https://x.com/jonathanrstern/status/1792220536837230723),他在推文中談到了他在開始第一份開發工作時發現非常有價值的建議。 在那份工作之前,Jonathan 給 Replit 的執行長[Amjad Masad](https://x.com/amasad)寫了一封電子郵件,並在開始他作為軟體開發人員的第一份工作時尋求建議。 阿姆賈德是這麼說的: > 證明自己並讓自己變得不可或缺的兩種方法: > > 1. 具有令人難以置信的生產力和創造力——這在剛開始時很難做到 > > 2. 做無人願意做的無聊工作 > > 2 適合每個人,它只需要努力和紀律,但沒有人做到,所以我建議這樣做。順便說一句,2 通常可以以有趣的方式導致 1。 現在,儘管這是針對已經有工作的開發人員的建議,但我認為這是許多正在尋找工作的經驗不足的開發人員應該聽到的建議。 從更廣泛的意義上來說,阿姆賈德的建議是先降低你的期望並努力工作。做沒有人願意做的無聊工作也可能意味著做你不熱衷的工作,但從長遠來看,這對你有利。 這也可能意味著接受一些不完全是你之前想要的工作,並做繁重的工作,以便成為任何雇主都希望在其團隊中擁有的「不可或缺」的開發人員。 做個好人 ==== 這個建議非常籠統,幾乎適用於任何工作(或任何事物),但成為一個好的共事者可能比大多數求職者想像的更有價值和被忽視。 一旦您滿足了工作要求,您對未來雇主的吸引力很大程度上取決於他們是否可以想像與您在團隊中工作。雖然從表面上看這似乎簡單明了,但實際上實施起來要困難得多。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3s990jfmwryfx8gk9xw5.gif) 想一想。 您將在一個具有許多不同個性的團隊中工作。任務可能會變得複雜,截止日期可能會很緊迫,而且工作可能會變得混亂。肯定會犯錯。 *你是那種在壓力下會失去幽默感的人嗎?* *當有人因為你不直接負責的錯誤而責備你時,你會如何反應?* *您是否與您的團隊進行公開且有效的溝通?* *努力工作一年卻沒有加薪,你還會保持謙虛和認真嗎?經過一年的努力工作、大量的讚揚和豐厚的加薪(這可能更難),你還會保持謙虛和認真嗎?* 誠實、開放、真誠是難以獲得的寶貴特質,人們往往可以立即看出你是否是這種人。正是這些類型的人,在與同樣滿足工作要求的其他候選人競爭時,最終獲得了工作機會。 投入更少的精力,送出更少的應徵信 =============== 我和許多其他雇主抱怨的一件事是,求職者在申請中幾乎沒有任何努力。最嚴重的冒犯是應徵信內容明顯是複製貼上的。 ![打字](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExNW0wMm03N3IwaTdlcWdtcHd4MXpsZWV5ZDVkMXBzOGQ5ZWVlNG9vaCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/13GIgrGdslD9oQ/giphy.webp) 雇主討厭這一點,因為這是你將如何工作的明顯跡象。如果你的工作申請是懶惰地完成的,那麼你的工作很可能會表現得類似(或更糟!)。 這就是為什麼我認為最好將更多的精力投入到更少的工作申請中。 沒有神奇的數字,但每當我申請工作時,總會有 2 或 3 個讓我感到*非常*興奮。所以這些是我唯一申請的,我在這些申請中投入了很多思考和努力。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kvjr8y8gcc4switxoga.png) 除了[為我的專案製作包含描述和學習目標的自己的作品集](https://vincanger.github.io/)之外,我還會建立某種形式的與工作申請相關的額外內容。在某些情況下,這是一個簡單的範例應用程式,或者在其他情況下是解釋影片或文章。 重要的是,這些額外的內容是嘗試解決工作描述中提出的問題或任務,以表明我可以做好這類工作,並且我渴望並願意*做繁重的工作。* 我的假設是,大多數其他申請者在申請時不會花這麼大的力氣,因此我的申請會從人群中脫穎而出,而且效果很好,因為即使我之前沒有很多經驗,我也被要求面試其中的許多職位! --- 順便一提… 我們在[Wasp](https://wasp-lang.dev/)正在努力建立這樣的內容,更不用說建立一個現代的開源 React/NodeJS 框架,讓您能夠快速行動! 如果您想看到更多這樣的內容,您可以[在 GitHub 上給我們一個星星,非常輕鬆地幫助我們!](https://www.github.com/wasp-lang/wasp) 。 ![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgbmn45pia04bxt6zf83.gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgbmn45pia04bxt6zf83.gif) <https://www.github.com/wasp-lang/wasp> ⭐️ GitHub 上的 Star Wasp 🙏 現在得到那份工作...... ============== 軟體開發人員的就業市場正在改變。這是有道理的,因為軟體開發人員的角色也在不斷發展,而現在我們正在進入人工智慧時代,這些角色的發展速度更快。 這意味著,隨著雇主的適應,他們可能會繼續尋找能夠證明他們能夠跟上所有這些發展的開發人員,並利用手邊的工具來解決我們周圍世界面臨的問題。 因此,如果你能夠證明這一點,同時成為一個認真而謙虛的工人,那麼你可能不會很難找到你一直想要的那份甜蜜的技術工作。現在只需將注意力和精力放在正確的事情上,這有時可能很困難,這將使以後找工作的過程變得容易得多。 當然,這些建議是基於我的經驗和主觀觀點,所以如果您有不同意見,請在評論中告訴我們。或者你有自己的秘訣來幫助你找到工作嗎?如果是這樣,我們想聽聽看! 感謝您的閱讀,祝您求職愉快。 --- 原文出處:https://dev.to/wasp/how-to-get-a-web-developer-job-in-2024-without-dying-inside-eo8

📕 新創企業 vs 大公司:您需要知道的最佳要點 📊

我仍然記得我第一天與數百名其他員工一起參加公司會議。經過幾個月成功的自由工作後,我終於能夠加入一家大公司,焦慮和興奮的混合是真實的。現在的挑戰不同了,風險更高了,環境也勢不可擋。 但這並不是唯一讓我感到壓力的情況。我還清楚記得有一天,在一家小型新創公司工作時,我向整個公司展示了我們將要使用的新前端架構的一部分。我們規模很小,會議上的每個人都在專心聽我說的話。 從在新創公司中發揮重要作用,到成為公司中更大群體中的一小部分,每一次經驗都有自己的一套學習經驗。 當然,情況並非總是如此。我們都知道存在沒有做好準備的公司,這就是建立本文的原因。在這裡,我們將探討**我在新創公司和大公司工作時獲得的一些**關鍵經驗和收穫,這樣你就可以從你目前工作的公司中學習到這些知識,甚至可以自己決定你下一步的職業步驟,看看哪一個更適合您。 流程和文化 ----- ![流程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0exqcm882w9gvs11u3go.png) 讓我們從流程開始,因為它們是第一個非常明顯的差異。在新創公司工作時,大多數流程仍在實施中,您工作的很大一部分實際上可能涉及**嘗試和試驗**這些任務的不同流程。 文化也可能處於創造階段,因此,定義公司及其員工的共同價值觀,或「在這裡做事的方式」。可以改變很多而且很快! 當然,這使得體驗方式更加混亂,但也更加靈活。兼顧多重角色和責任並不罕見,這可能是在不同方面學習和成長的絕佳機會,例如創造新的良好文化模式。 另一方面,在更企業化的環境中,流程更加結構化和明確,這可以提供穩定性和明確的期望,但也會帶來官僚主義的缺點,需要很長時間才能真正通過多個管道和渠道。 這裡的關鍵要點是**平衡**。流程的稀缺會讓整個生態系統變得混亂,這讓人不舒服,但流程太多,你就什麼都做不了。平衡缺勤和超額的權重將為每個人創造一個更好的環境。 敏捷性和適應性 ------- ![敏捷](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yasslnhkhhhx9oycybps.png) 在新創公司工作通常需要身兼數職,並隨時適應變化。在快節奏的新創環境中,敏捷性和適應性是關鍵。你必須準備好轉變,這可以讓你成長很多,不要太執著於自己的想法。您還必須準備好調整您的策略並接受新技術和方法(如果它們看起來合適)。 這可能是一次令人興奮的經歷,可以促進創造力和創新,但從長遠來看,也可能導致分散且充滿壓力的環境(公司的各個方面都採用不同的技術,讓所有混亂的工作變得**困難**)。 相較之下,大公司擁有豐富的時間和資源,可以進行更徹底的規劃和執行。此外,大公司傾向於依賴他們已經信任的東西,並且通常不太願意接受新事物。 雖然這不如動態的創業環境那麼令人興奮,但它提供了不同類型的學習體驗。在這裡,您可以加深對策略規劃、專案管理和業務營運其他方面的理解。 這裡的關鍵要點是學會**在需要時**變得敏捷、多才多藝和適應能力強。如果您不想相信我的話,我建議您閱讀[這篇關於無聊技術的文章](https://mcfunley.com/choose-boring-technology)。這是令人驚訝的洞察力和偉大的閱讀! --- 哦!在我忘記之前,這篇文章之所以成為可能,是因為[Wasp](https://wasp-lang.dev/) ,他們正在建立一個非常酷的全端 React + NodeJS 框架,如果您能透過[在 GitHub 上為我們的儲存庫加註星標](https://www.github.com/wasp-lang/wasp)來幫助我們,那將意義重大。 透過這樣做,您將幫助我們繼續使網頁開發更快、更輕鬆,並每週為您帶來這樣的內容! 🚀 ![](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExbWFnZzJ5dGV2cXduOGluaTgyaTdvbnJ4c3ZvZGxuY3V3czQxZmZzNSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/ZfK4cXKJTTay1Ava29/giphy.gif) https://www.github.com/wasp-lang/wasp ⭐️ 在 GitHub 上給我們一個 star 🙏 --- 社交機會 ---- ![聯網](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/flkmybnqw8ocfj0jd1bn.png) 新創公司和大公司之間的另一個主要區別是它們提供的網路機會。大公司通常擁有廣泛的員工、客戶、供應商和合作夥伴網路。在這樣的環境中工作可以提供大量建立人際網絡和建立有價值的專業關係的機會。這些聯繫對於您的職業發展非常有益。 另一方面,新創公司由於規模較小,提供了更親密的社交機會。您可能會與團隊的每個成員密切合作,讓您有機會建立更牢固的關係並直接向同事和上級學習。 這裡的關鍵要點是擁抱每一個聯繫,並**嘗試在任何地方創造一個良好的工作環境**。這將使您更輕鬆地度過困難時期,並且您一定會在一生中結交一些友誼😃 影響 -- ![影響](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1hn0o5x8olm7sw7i21c.png) 現在,我們來談談影響。在較大的公司中,您的程式碼庫可能會被數千(更可能是數百萬人)人存取。這意味著做一個小的改變可以改變很多人對應用程式的看法,並且看到你的工作被這麼多人使用是非常令人滿意的。不幸的是,第一次必須為數百萬用戶存取的程式碼庫部署一個小的程式碼變更絕對是令人傷腦筋的——儘管這對於增加您的經驗和彈性是必要的。 在新創公司中,您可能會看到有數百人(相信有數千人)造訪的程式碼庫。這意味著,你的工作將被更少的人看到,但是,由於你可以創造更多,你可能會創造出更多的東西,而不僅僅是一個小小的改變。頁面、使用者旅程和所有內容都可以在您的範圍內單獨或與您的團隊一起進行。但它並非沒有缺點。由於流程更加稀缺,因此回滾和恢復變更有時可能是一個困難的過程(甚至更糟的是,沒有記錄)。 這裡的關鍵要點是了解您的角色以及您在不同環境中帶來的價值的重要性。無論您是在一家新創公司,您的工作直接推動公司的成功,還是在一家大公司,您的行為有助於更廣泛的目標,**您的工作都很重要,您應該為此感到自豪。** 舉個例子,我為在一個巨大的電子商務網站上製作一個簡單的產品過濾器(他們一直使用到今天)感到非常自豪,並且我也為積極實施/參與至少 2 個專案的實施感到自豪/3是我曾經合作過的新創公司的設計師所提出的新設計系統的每個元件的/3。**好的工作不會讓別人貶低。** 結論 -- ![所有的主題都變成了插圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ev801q6beoct1a0ijfa.png) 如果這段穿越新創公司和企業領域的旅程為您帶來了啟發,為什麼不支持[Wasp](https://wasp-lang.dev/)呢?我們正在精心打造工具和內容,為像您這樣的開發人員提供協助,無論您是獨自編碼還是克服企業挑戰。 如果您想看到更多這樣的內容,您可以[在 GitHub 上給我們一個星星,非常輕鬆地幫助我們!](https://www.github.com/wasp-lang/wasp) ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgbmn45pia04bxt6zf83.gif) https://www.github.com/wasp-lang/wasp ⭐️ GitHub 上的 Star Wasp 🙏 新創企業和大公司都提供寶貴的經驗。在新創公司,你可以做不同的任務,嘗試新事物,並直接影響公司的未來。這是一種親身實踐的學習經驗。 在大公司中,您可以存取許多資源和結構化環境。您可以與多元化專家團隊合作,這有助於您學習和成長。既定的流程、穩定性和可預測性可以幫助提高您的技能並塑造您的職業生涯。 但是,這並不是要選擇其中之一。這是關於學習在兩種環境中都表現出色。汲取兩者中最好的部分,並隨時隨地使用它們。保持敏捷、適應力強、樂於接受新體驗。這兩種經歷對你的職業生涯都很重要。 總之,每種環境都有其獨特的挑戰與機會。擁抱差異,從經驗中學習,並利用它們為你帶來優勢。畢竟,正是這些多樣化的經驗可以幫助您實現個人和職業成長。因此,無論您是在新創公司還是大公司,請始終記住 - 您的工作很重要,並有助於實現更大的目標。 您對新創公司和大公司之間的比較有何看法?我們很想聽聽您的經驗和收穫。請在下面的評論中分享您的想法! --- 原文出處:https://dev.to/wasp/start-ups-vs-big-companies-the-best-takeaways-for-you-to-know-28n5

使用 Typescript 和 Jest 進行單元測試

--- 標題:使用 Typescript 和 Jest 進行單元測試 發表:真實 描述: 標籤: typescript、javascript、玩笑、單元測試 --- ![vscode-is](https://thepracticaldev.s3.amazonaws.com/i/gd97g4kdyk1bpdeyfqst.png) *原文發佈於<https://muhajirframe.com/writing/unit-test-typescript-jest/>* 在本文中,我們將嘗試介紹 Typescript + jest 中的簡單單元測試。 我們將建立一個簡單的實用程式來檢測 url 是內部連結還是外部連結。 例如`https://www.google.com`是外部連結,而`/page1`是內部連結。我們將專案命名為`is-internal-link` ,但您可以將其命名為任何名稱。 先決條件 ---- - NodeJS - VSCode + Jest 外掛程式(可選) 建立新目錄 ``` mkdir is-internal-link ``` 初始化 npm ``` npm init ``` 安裝依賴項 ``` npm install --save-dev @types/jest @types/node jest ts-jest typescript ``` 建立`jest.config.js` ``` module.exports = { roots: ['<rootDir>/src'], transform: { '^.+\\.tsx?$': 'ts-jest', }, testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], } ``` 建立`tsconfig.json` ``` { "compilerOptions": { "target": "es5", "module": "commonjs", "lib": ["es2015"], "strict": true, "declaration": true, "outDir": "dist", "sourceMap": true }, "include": ["src/**/*"], "exclude": ["node_modules", "**/*.spec.ts"] } ``` 好了,我們準備好要寫程式碼了。建立檔案`src/main.ts`和`src/main.spec.ts` 您的文件樹現在應該如下所示 ``` . ├── node_modules ├── package-lock.json ├── package.json ├── src │ ├── main.spec.ts │ └── main.ts └── tsconfig.json ``` 在您最喜歡的編輯器中打開它。 (VSCode / Atom / Sublime / 等)。 我個人使用VSCode ``` import { isInternalLink } from './main' test('should return false given external link', () => { expect(isInternalLink('https://google.com')).toBe(false) }) test('should return true given internal link', () => { expect(isInternalLink('/some-page')).toBe(true) }) ``` 現在有辦法測試這一點。 ### 方式一 打開你的`package.json` 。並將其替換為您的`scripts` ``` "scripts": { "test": "jest" }, ``` 執行`npm run test` 。 現在您應該看到錯誤,因為我們還沒有實作程式碼,對嗎? ### 方式2 使用您的編輯器外掛程式。我比較喜歡這種方式。我只會在 VSCode 上展示它。您最喜歡的編輯器可能也有它。 安裝[vscode - 是](https://github.com/jest-community/vscode-jest) ![vscode-is](https://github.com/jest-community/vscode-jest/raw/master/images/vscode-jest.gif) 這個 GIF 應該是一個很好的解釋 vscode-jest 是如何運作的 我們繼續吧。 ![vscode-is](https://thepracticaldev.s3.amazonaws.com/i/38h9s3601vnvzl75wouf.png) 您的 VSCode 現在可能如下所示。 ### 實施程式碼 讓我們實作我們的`main.ts` ``` export const isInternalLink = (link: string) => /^\/(?!\/)/.test(link) ``` 切換回`main.spec.ts` 。現在您應該看到錯誤消失了,並且它變成了綠色。 專業提示:使用[VSCode 分割編輯器](https://code.visualstudio.com/docs/getstarted/userinterface#_side-by-side-editing)同時檢視程式碼 ( `main.ts` ) 和規格 ( `main.spec.ts` )。 長話短說 在第一面開啟`main.ts` `cmd+1` `cmd+p` `main.ts` 打開第二面的`main.spec.ts` `cmd+2` `cmd+p1` `main.spec.ts` *附註:我是 VSCode 和 Vim 的忠實粉絲,我有很多關於如何使用 VSCode 提高工作效率的技巧。如果你們有興趣的話請在評論中告訴我,我可以在這裡寫下來* 恭喜! 您剛剛使用 Typescript 和 Jest 進行了單元測試 --- 原文出處:https://dev.to/muhajirdev/unit-testing-with-typescript-and-jest-2gln

🌝 適合您下一個專案的 15 個 JavaScript 框架 ⚔

開發者生態系統已經發展了很多,並且有許多開發者不知道的框架。 我們「作為開發人員」有很多關於如何建立我們的應用程式的框架選項。這些選擇非常重要。 讓我們介紹 15 個框架,供您製作下一個專案。我將提供詳細的資源,以便您可以學習其中的每一個。 相信我!這份清單就是您所需要的。 讓我們開始吧。 ![下一級](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ychbi440selxu1ftf5n8.gif) --- ### 庫與框架 在開始之前,讓我們先來了解一下框架與函式庫有何不同。開發人員可以互換使用它! 函式庫和框架都是由其他人編寫的可重複使用程式碼。 > 簡單來說: 將圖書館想像成IKEA之旅。您家裡有自己的空間,但您需要一些家具幫助。您不想從頭開始,所以您可以前往宜家,在那裡您可以挑選您需要的東西。你是做出決定的人。 現在,框架更像是建造一個樣品房。您已經有了一套計劃以及一些佈局和設計的選擇。但最終,藍圖和建造者處於控制之中。他們會讓你知道在哪裡可以加入你的意見,但他們正在掌控一切。 > 從技術角度來說。 透過庫,您可以指導應用程式的流程。您決定何時何地使用庫的功能。但有了框架,框架就控制了流程。它為您提供了一些插入程式碼的位置,但它是程式碼執行時發號施令的地方。 我使用了 Freecodecamp 的這篇文章“ [框架和庫之間的區別](https://www.freecodecamp.org/news/the-difference-between-a-framework-and-a-library-bd133054023f/)”,特別是因為它的解釋很簡單。完整閱讀一下! --- 1. [Wing](https://git.new/winlang-repo) - 一種雲端程式語言。 --------------------------------------------------- ![翅膀](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n97bowkrexjk46n94bcc.png) Wing是一個旨在開發雲端應用程式的框架。 它允許您在雲端中建立應用程式,並且具有相當簡單的語法。 核心概念是您可以直接在應用程式中指定資源。 您可以執行本機模擬並使用 Winglang 控制台視覺化每個步驟中發生的情況。 ![機翼基礎設施](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eun3zd1gkp870rj57eeu.png) 你**程式碼**。**本地測試**。**編譯**。**部署到雲端提供者**。 Wing 需要 Node `v20 or higher` 。 建立一個父目錄(我們使用的是`shared-counter` )並使用 Vite 使用新的 React 應用程式設定前端。您可以使用這個 npm 指令。 ``` npm create -y vite frontend --template react-ts // once installed, you can check if it's running properly. cd frontend npm install npm run dev ``` 您可以使用此 npm 命令安裝 Wing。 ``` npm install -g winglang ``` 您可以使用`wing -V`驗證安裝。 Wing 還提供官方[VSCode 擴充功能](https://marketplace.visualstudio.com/items?itemName=Monada.vscode-wing)和[IntelliJ](https://plugins.jetbrains.com/plugin/22353-wing) ,後者提供語法突出顯示、補全、轉到定義和嵌入式 Wing 控制台支援。您可以在建立應用程式之前安裝它! 您可以使用 Wing 作為雲端後端來建立任何全端應用程式。 建立後端目錄。 ``` mkdir ~/shared-counter/backend cd ~/shared-counter/backend ``` 建立一個新的空 Wing 專案。 ``` wing new empty // This will generate three files: package.json, package-lock.json and main.w file with a simple "hello world" program wing it // to run it in the Wing simulator // The Wing Simulator will be opened in your browser and will show a map of your app with a single function. //You can invoke the function from the interaction panel and check out the result. ``` 使用指令`wing new empty`後的結構如下。 ``` bring cloud; // define a queue, a bucket, and a counter let bucket = new cloud.Bucket(); let counter = new cloud.Counter(initial: 1); let queue = new cloud.Queue(); // When a message is received in the queue -> it should be consumed // by the following closure queue.setConsumer(inflight (message: str) => { // Increment the distributed counter, the index variable will // store the value before the increment let index = counter.inc(); // Once two messages are pushed to the queue, e.g. "Wing" and "Queue". // Two files will be created: // - wing-1.txt with "Hello Wing" // - wing-2.txt with "Hello Queue" bucket.put("wing-{index}.txt", "Hello, {message}"); log("file wing-{index}.txt created"); }); ``` 您可以安裝`@winglibs/vite`來啟動開發伺服器,而不是使用`npm run dev`來啟動本機 Web 伺服器。 ``` // in the backend directory npm i @winglibs/vite ``` 您可以使用`backend/main.w`中提供的 publicEnv 將資料傳送到前端。 讓我們來看一個小例子。 ``` // backend/main.w bring vite; new vite.Vite( root: "../frontend", publicEnv: { TITLE: "Wing + Vite + React" } ); // import it in frontend // frontend/src/App.tsx import "../.winglibs/wing-env.d.ts" //You can access that value like this. <h1>{window.wing.env.TITLE}</h1> ``` 你還可以做更多: - 讀取/更新 API 路線並使用 Wing Simulator 檢查它。 - 使用後端獲取值。 - 使用`@winglibs/websockets`來同步瀏覽器,在後端部署一個 WebSocket 伺服器,你可以連接這個 WebSocket 來接收即時通知。 可以節省大量時間的一些功能包括熱重載,以獲得即時回饋並順利產生必要的安全策略。 無需學習每個雲端提供者的語法。 您的程式碼可以編譯到 AWS、GCP、Azure 或任何自訂平台。太棒了:D 您可以閱讀完整的逐步指南,以了解[如何使用 React 作為前端和 Wing 作為後端建立簡單的 Web 應用程式](https://www.winglang.io/docs/guides/react-vite-websockets)。測試是使用 Wing Simulator 完成的,並使用 Terraform 部署到 AWS。 部署後的AWS架構是這樣的。 ![建築學](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/27awil840ktgh3jvklij.png) 為了提供開發者選擇和更好的體驗,Wing 推出了對[TypeScript (Wing)](https://www.winglang.io/docs/typescript/)等其他語言的全面支援。唯一強制的事情是您必須安裝 Wing SDK。 這也將使控制台完全可用於本地偵錯和測試,而無需學習 Wing 語言。 該翼目前支援以下輸出: - AWS CDK 平台 - Terraform/AWS 平台 - Terraform/GCP 平台 - Terraform/Azure 平台 - 模擬器平台 - 客製化平台 Wing 甚至還有其他[指南](https://www.winglang.io/docs/category/guides),因此更容易遵循。 ![指南](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/31czxehkg10ezmlpf7ac.png) 您可以閱讀[文件](https://www.winglang.io/docs)並查看[範例](https://www.winglang.io/docs/category/examples)。 您也可以在[Playground](https://www.winglang.io/play/)中使用 Wing 查看結構和範例。 如果你比較像輔導員。看這個! {% 嵌入 https://www.youtube.com/watch?v=wzqCXrsKWbo %} ![機翼工作流程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8zqja0w9kyoibrskjmp.gif) Wing 在 GitHub 上有 4500+ 顆星,1600+ 個版本,但仍未進入 v1 版本,這意味著意義重大。 {% cta https://git.new/winlang-repo %} 星翼 ⭐️ {% endcta %} --- 2. [Nest](https://github.com/nestjs/nest) - 高效且可擴展的伺服器端應用程式。 ------------------------------------------------------------ ![巢](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/inlcpt901r5kiwm4eeor.png) 一個先進的 Node.js 框架,用於使用 TypeScript/JavaScript 建立高效且可擴展的伺服器端應用程式。 它使用現代 JavaScript,使用 TypeScript 建構(保留與純 JavaScript 的兼容性),並結合了 OOP(物件導向程式設計)、FP(函數式程式設計)和 FRP(函數式反應式程式設計)的元素。 在底層,Nest 使用 Express,但也提供與 Fastify 等各種其他庫的兼容性,從而可以輕鬆使用無數可用的第三方外掛程式。 Nest 提供了高於這些常見 Node.js 框架(Express/Fastify)的抽象級別,但也直接向開發人員公開其 API。這為開發人員提供了一定程度的自由。 在我們了解更多之前,請觀看 100 秒內的 Nestjs! {% 嵌入 https://www.youtube.com/watch?v=0M8AYU\_hPas&amp;pp=ygUXZW1iZXIganMgaW4gMTAwIHNlY29uZHM%3D %} 考慮到它們提供的靈活性,您當然不必重新發明輪子。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6h6yjfmq1h5qn5765by0.png) 這是使用 Nest CLI 設定新專案的方法。 ``` npm i -g @nestjs/cli nest new project-name ``` 這將引導該應用程式。 ``` import { NestFactory } from '@nestjs/core'; import { AppModule } from './app.module'; async function bootstrap() { const app = await NestFactory.create(AppModule); await app.listen(3000); } bootstrap(); ``` 您可以閱讀[文件](docs.nestjs.com)。 他們還提供一套付費課程(我想知道為什麼)。如果您需要完整的路線圖並想成為 Nest 的使用專家,請隨時查看它們。 但我建議使用 Freecodecamp 提供的這些免費教學來學習。 - [NestJs 初學者課程 - 建立 REST API](https://www.youtube.com/watch?v=GHTA143_b-s) - 大約 3.42 小時,涵蓋許多[主題](https://www.freecodecamp.org/news/learn-nestjs-by-building-a-crud-api/)。 - [綜合 NestJS 課程](https://www.youtube.com/watch?v=sFnAHC9lLaw&t=1s)- 涵蓋 20 個模組,時長 14 小時。 {% 嵌入 https://www.youtube.com/watch?v=sFnAHC9lLaw&amp;t=1s %} 如果您正在尋找入門專案,請學習[如何在 NestJS 中使用 Nodemailer 發送電子郵件](https://www.freecodecamp.org/news/how-to-use-nodemailer-in-nestjs/)。您可以使用它來獲得紮實的基礎知識。 Nest.js 擁有龐大的開發人員社區,並被許多公司使用。尋找已使用 Nest[的專案和公司的完整清單](https://docs.nestjs.com/discover/companies)。 ![公司](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ic0z3dts7bmw5s3e5gmf.png) 順便說一句,作為初學者,我最常擔心的是相似的名稱:Nextjs、Nuxtjs 和 Nestjs。我涵蓋了所有內容,這樣您就不必感到困惑。哈哈! Nest 在 GitHub 上擁有超過 64k 個 star,提交次數超過 15k,並且已發布`v10`版本。 {% cta https://github.com/nestjs/nest %} 星巢 ⭐️ {% endcta %} --- 3. [Gatsby](https://github.com/gatsbyjs/gatsby) - 最好的基於 React 的框架,具有內建的效能、可擴展性和安全性。 ----------------------------------------------------------------------------------- ![蓋茲比](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0drinpwldeyfxd82lgf.png) Gatsby 是一個基於 React 的免費開源框架,可協助開發人員建立速度極快的網站和應用程式。 它將動態呈現網站的控制和可擴展性與靜態網站生成的速度結合起來,創造了一個全新的可能性網絡。 Gatsby 從任何資料來源提取資料,無論是 Markdown 檔案、Contentful 或 WordPress 等無頭 CMS,還是 REST 或 GraphQL API。使用來源插件載入資料,然後使用 Gatsby 的統一 GraphQL 介面進行開發。 與 Next.js 不同,Gatsby 不執行伺服器端渲染。相反,它會在建置期間在客戶端產生 HTML 內容。 我見過一些使用 Gatsby 建立的優秀作品集。 開始使用以下 npm 指令。 ``` npm init gatsby ``` 它會要求提供網站標題和專案目錄的名稱。繼續按照提示選擇您的首選語言(JavaScript 或 TypeScript)、CMS、樣式工具和其他功能。 您可以這樣使用它。 ``` cd my-gatsby-site // to start the local dev server npm run develop ``` 您可以閱讀[文件](https://www.gatsbyjs.com/docs)。我個人很喜歡文件的流程。 您也可以按照[教學](https://www.gatsbyjs.com/docs/tutorial/getting-started/)開始,[操作指南](https://www.gatsbyjs.com/docs/how-to/)和[概念指南](https://www.gatsbyjs.com/docs/conceptual/)深入了解 Gatsby 概念以及網站架構。 Gatsby 提供了開箱即用的 PWA 和大量主題。使用 Gatsby 主題,您的所有預設配置(共享功能、資料來源、設計)都會從您的網站中抽象化出來,並放入可安裝的套件中。您可以閱讀有關[主題的](https://www.gatsbyjs.com/docs/themes/)更多資訊。 例如, `gatsby-theme-blog`是用於建立部落格的官方 Gatsby 主題。可能有可以透過`gatsby-config.js`配置的主題選項。 ``` npm install gatsby-theme-blog ``` 對於電子商務商店或廣泛的媒體網站等內容密集的企業級網站來說,Gatsby 並不是理想的解決方案。隨著內容大小的增加,建置時間將急劇增加。 尋找使用 Gatsby 建立的[606 個網站](https://www.gatsbyjs.com/showcase/)的清單。其中,53 個網站是開源的,因此這可以提供靈感,也是一個起點。 ![展示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/439taxdhursvmjwhcxgc.png) 他們還提供了[大量按類別劃分的插件](https://www.gatsbyjs.com/plugins)以及每個插件中清晰的文件。其中一個範例是將 Google Analytics 新增至您的應用程式的插件。 ``` npm install gatsby-plugin-google-analytics ``` ![外掛](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rwq1dsyfdqdkmfetebj9.png) 您也可以使用 Gatsby 的[Starter 庫](https://www.gatsbyjs.com/starters/)。使用 Gatsby 建立下一個應用程式還需要什麼? ![入門庫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u831zo26ttg6tvzu6shq.png) 使用這些[參考指南](https://www.gatsbyjs.com/docs/reference/)來獲取有關 Gatsby API 的詳細資訊。 如果您喜歡完整的課程,我建議您觀看[Gatsby 靜態網站產生器教學](https://www.youtube.com/watch?v=RaTpreA0v7Q)- Freecodecamp 提供的 9 小時教學。 Gatsby 在 GitHub 上有 55,000 顆星,目前處於 v5 版本,並有超過 245,000 名開發人員使用。 {% cta https://github.com/gatsbyjs/gatsby %} 明星蓋茲比 ⭐️ {% endcta %} --- 4. [Nextjs](https://github.com/vercel/next.js) - Web 的 React 框架。 ---------------------------------------------------------------- ![下一個js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/da26rscfzozpe307xz2g.png) 由於它提供的優化級別,它是我最喜歡的框架之一。 Next.js 使您能夠透過擴展最新的 React 功能並整合強大的基於 Rust 的 JavaScript 工具來建立全端 Web 應用程式,以實現最快的建置。 Next.js 由荷蘭公司 Vercel(以前稱為 ZEIT)於 2017 年建立。 Next.js 也像 Gatsby 一樣提供靜態產生器。 Next.js 的建置遵循`Build once, runs everywhere`的原則,因此您可以使用 Next.js 製作 Web 應用程式、行動應用程式、桌面應用程式和漸進式 Web 應用程式。 ![下一個js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4j16td403jbbyyk7xz2v.png) Nextjs 提供了許多功能,例如檔案路由、渲染技術(例如 ISR)以及深層的圖像和字體最佳化。你可以檢查任何 nextjs 網站的 SEO 統計資料,在大多數情況下它都是一流的。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zr9yx5n6gy2q764gak8x.png) ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5mf9r3zohetcsyatp90z.png) 開始使用以下 npm 指令。 ``` npx create-next-app@latest ``` 您可以閱讀[文件](https://nextjs.org/docs)並按照[本指南](https://nextjs.org/docs/getting-started/installation)開始使用。 其中涉及很多概念,閱讀完整的文件需要幾個月的時間。我前段時間寫過一篇文章,你可以看看。它並沒有出名,但它是我憑藉多年的 Nextjs 經驗編寫的最好的文章之一。我還提到了 Nextjs 團隊提供的[官方課程](https://nextjs.org/learn/dashboard-app/getting-started)。 {% 嵌入 https://dev.to/anmolbaranwal/12-things-you-didnt-know-you-could-do-with-nextjs-386b %} 如果您想透過 YouTube 教學進行學習,我建議您觀看這些最近的教程,因為文件更新得非常頻繁,因此最好觀看最近的內容,而不是幾年前的內容。 - \[帶有 TypeScript 的 Nextjs 13(應用程式路由器)\](https://www.youtube.com/watch?v=ZVnjOPwW4ZA&amp;pp=ygUTbmV4dGpzIGNyYXNoIGNvdXJzZQ%3D%3D ) - 1 小時教程。 - [Next.js 14 完整課程 2024](https://www.youtube.com/watch?v=wm5gMKuwSYk) - 3 小時教學。 您也可以觀看 Nextjs 100 秒。他們加入了一個基本教程,使其長達 11 分鐘。 {% 嵌入 https://www.youtube.com/watch?v=Sklc\_fQBmcs&amp;t=4s&amp;pp=ygUObmV4dGpzIGluIDEwMHM%3D %} 我自己使用文件學習了它,並使用它建置了超過 6 個專案,甚至是一個超過 20k 程式碼庫的 SAAS 應用程式。這就是為什麼我說,它是您可以選擇的最佳框架之一。 使用 Next.js 建立的一些熱門網站包括 Auth0、Coinbase、Docker、GitHub、Hulu、Netflix、Sesame、Starbucks、Trulia、Twitch 和 Uber。你可以看到所有使用Nextjs的[網站](https://nextjs.org/showcase)。 ![下一個js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iafbez4aptnb7f0iqtgz.png) 他們還提供了各種可以直接使用的[入門模板](https://vercel.com/templates/next.js)。 ![入門模板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1egye2mtz7f3ehzsm9ja.png) ![電子商務](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4ge39gpt0xo3rtvn1i5.png) Next 在 GitHub 上有 12 萬顆星,發布`v14.2`版本,在 NPM 上每週下載量超過 600 萬次。如其儲存庫所示,有 260 萬開發人員使用。 {% cta https://github.com/vercel/next.js %} 明星 Nextjs ⭐️ {% endcta %} --- 5. [Preact](https://github.com/preactjs/preact) - 具有相同現代 API 的快速 3kB React 替代品。 ------------------------------------------------------------------------------- ![預反應](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/npzj10prb5i8noahsops.png) Preact 是一個輕量級、快速、高效能的函式庫,是 React 的替代品。 Preact 的大小僅為 3kb(經過壓縮和壓縮),但卻為您提供了 React 所需的所有功能,使其成為最好的 JavaScript 框架之一。 Preact 的建立者 Jason Miller 是 Google 的高級開發者計畫工程師。 Preact 基本上具有 Virtual DOM 元件的所有功能,而沒有諸如以下的開銷: - 熟悉 React API 和 ES6 類別、鉤子和功能元件模式。 - 透過簡單的 preact/compat 別名實現廣泛的 React 相容性。 - 您需要的一切,例如 JSX、VDOM、DevTools、HMR、SSR。 在生產過程中,您可以輕鬆地從現有專案中的 React 切換到 Preact,因為它們支援相同的 API。 程式碼範例結構如下所示。您也可以查看此範例[程式碼筆](https://codepen.io/developit/pen/LpNOdm),您可以查看它以了解 Preact 中程式碼庫的結構。 ![程式碼結構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3mwphw4vjfm1a3cquyv.png) 開始使用以下 npm 指令。 ``` npm init preact ``` 這是執行開發伺服器的方式。 ``` # Go into the generated project folder cd my-preact-app # Start a development server npm run dev ``` 您將必須配置一些東西,尤其是別名。請遵循[本指南](https://preactjs.com/guide/v10/getting-started)。 您可以閱讀[文件](https://preactjs.com/guide/v10/getting-started/)並查看詳細的[演示和範例](https://preactjs.com/about/demos-examples)清單。 他們還提供了基於 Web 的[教程](https://preactjs.com/tutorial/),您可以按照該教程來學習 Preact。 如果您需要範例應用程式、樣板檔案、元件、工具包等,請使用[Awesome Preact](https://github.com/preactjs/awesome-preact) 。 Preact 在 GitHub 上有 36,000 顆星,目前已發布`v10`版本。 {% cta https://github.com/preactjs/preact %} Star Preact ⭐️ {% endcta %} --- 6. [tRPC](https://github.com/trpc/trpc) - 端到端類型安全性 API 變得簡單。 ------------------------------------------------------------ ![特爾普克](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ck7ve1epya6ofshzmc2c.png) tRPC 可讓您輕鬆建立和使用完全類型安全的 API,而無需模式或程式碼產生。 ![gif 動態圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2bssocrvw9pt0y1lnunk.gif) 上面的客戶端沒有從伺服器導入任何程式碼,僅導入其類型聲明 如果我們要深入了解,那麼您絕對應該閱讀一些歷史。 {% 嵌入 https://dev.to/zenstack/a-brief-history-of-api-rpc-rest-graphql-trpc-fme %} 目前,GraphQL 是在 TypeScript 中實作型別安全 API 的主要方式(這太棒了!)。由於 GraphQL 被設計為用於實現 API 的與語言無關的規範,因此它沒有充分利用 TypeScript 這樣的語言的強大功能。 如果您的專案是使用全端 TypeScript 建置的,您可以直接在客戶端和伺服器之間共用類型,而無需依賴程式碼生成。 tRPC 適用於全端 TypeScript 開發人員。它使您可以輕鬆編寫可以在應用程式的前端和後端安全使用的端點。 API 合約的類型錯誤將在建置時被捕獲,從而減少應用程式在執行時出現錯誤的可能性。 這是為 Mono 儲存庫設計的,因為您需要從伺服器匯出/匯入類型定義。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6v56rl2jkgfat6xsf909.png) 開始使用以下 npm 指令。 ``` npm install @trpc/server@next @trpc/client@next ``` 您必須使用實例定義後端路由器。閱讀[快速入門指南](https://trpc.io/docs/quickstart)以了解更多詳細資訊。 了解[trpc 中涉及的概念](https://trpc.io/docs/concepts)(例如 rpc 和使用的術語)非常重要。 您可以閱讀[文件](https://trpc.io/docs)。 如果您已經在一個混合語言的團隊中工作,或者擁有您無法控制的第三方消費者,那麼您應該建立一個與語言無關的 GraphQL-API。 如果您想測試一下,我建議使用此[模板](https://github.com/new?template_name=examples-minimal&template_owner=trpc),其中包含一個最小的範例。 您還可以觀看這個[45 分鐘的 YouTube 教學](https://www.youtube.com/watch?v=UfUbBWIFdJs&pp=ygUMd2hhdCBpcyB0cnBj)來了解有關 trpc 的更多資訊。 {% 嵌入 https://www.youtube.com/watch?v=UfUbBWIFdJs&amp;pp=ygUMd2hhdCBpcyB0cnBj %} 它們在 GitHub 上擁有超過 32,000 顆星,目前處於`v11` beta 版本,並被 51,000 名開發人員使用。 {% cta https://github.com/trpc/trpc %} 啟動 tRPC ⭐️ {% endcta %} --- [7.Nuxtjs](https://github.com/nuxt/nuxt) - 直覺的 Vue 框架。 ------------------------------------------------------ ![努克斯特](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ct9usemwuhvtrjcx0na8.png) Nuxt 是一個基於 Vue.js 生態系統的漸進式開源框架,用於建立高效能 Web 應用程式,尤其是伺服器端渲染應用程式。 但請記住,Nuxt 並不是 Vue.js 的替代品,因為它無法單獨運作。而且它也不能被視為像 Express 這樣成熟的後端框架。 100 秒觀看 Nuxtjs,掌握整體概念。 {% 嵌入 https://www.youtube.com/watch?v=dCxSsr5xuL8 %} Nuxt 是建立這三種 Web 應用程式的最佳 JavaScript 框架之一 - 預先渲染靜態頁面、單頁 Web 應用程式 (SPA)、伺服器端渲染 Web 應用程式 (SSR) 甚至通用應用程式。 開發人員特別喜歡 Nuxt,因為它有豐富的函式庫和模組。 ![組合特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kknguo9v9dnqu2npfp68.png) 開始使用以下 npm 指令。 ``` npx nuxi@latest init <my-project> ``` 您可以閱讀[文件](https://nuxt.com/docs/getting-started/introduction)並檢查[codesandbox範例](https://codesandbox.io/s/github/nuxt/starter/tree/v3/)。 您可以按照本[指南](https://nuxt.com/docs/guide/concepts/auto-imports)了解更多關鍵概念。 有許多整合選項,因此您可以更輕鬆地繼續使用您喜歡的工具和服務。 ![整合選項](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irikkgro0cp4l8svioi9.png) 您可以查看[免費課程清單](https://nuxt.com/video-courses)來了解 Nuxt 生態系統。 如果您想要推薦的課程,請學習[Nuxt 3 — 初學者課程](https://www.youtube.com/watch?v=fTPCKnZZ2dk)— Freecodecamp 提供的 3 小時教學。 使用 Nuxt 建立的一些流行網站包括 Aircall、Amplitude、Backmarket、Bitpay、Bootstrap Vue、Fox News、Gitlab、Icons8、Instrument、MyScript、Nespresso、Note.com、Ozon.ru、Roland Garros、System76、Todoist、加油,Wappalyzer 。尋找不同類別下[展示網站的完整清單](https://nuxt.com/showcase)。 如果您想快速測試和建置,那麼我建議您查看[入門模板](https://nuxt.com/templates)。 ![範本](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bn61xrcx9ym3a40kewwf.png) Nuxt 在 GitHub 上擁有超過 51,000 顆星,並被超過 318,000 名開發者使用。 {% cta https://github.com/nuxt/nuxt %} Star Nuxt ⭐️ {% endcta %} --- 8. [Ember.js](https://github.com/emberjs/ember.js) - 用於建立雄心勃勃的 Web 應用程式的 JavaScript 框架。 --------------------------------------------------------------------------------------- ![man.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z8ygtjex9ve6e2gbsfh0.png) Ember.js 是一個 JavaScript 框架,用於為企業建立可擴展的單頁 Web 應用程式。與其他框架不同,模型-視圖-視圖模型 (MVVW) 架構是 Ember 的基礎。 Ember.js 最初是一個 SproutCore 2.0 框架,由其建立者 Yehuda Katz 更名為 Ember.js,Yehuda Katz 是一位出色的開發人員,被譽為 jQuery 的主要建立者之一。 他們還提供命令列介面工具。 Ember CLI 是建立、建置、測試和提供構成 Ember 應用程式或外掛程式的檔案的官方方式。 ``` npm install -g ember-cli ``` 儘管與 React、Vue 和 Svelte 相比,Ember.js 是一個較舊的前端 JavaScript 框架,但它仍然具有強大的功能,並且在 Microsoft、LinkedIn、Netflix 和 Twitch 等大公司中擁有龐大的用戶群。查看[完整清單](https://emberjs.com/ember-users/)。 ![使用 ember.js 的公司](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0w87sxixh8js9luyv7jc.png) 借助強大的預設設置,您可能永遠不需要在應用程式中配置任何內容,但如果您需要的話,選項就在那裡! 這意味著 Ember.js 遵循「CoC – 約定優於配置」方法,這可確保在大多數情況下不需要任何配置,以便您可以直接跳到編碼和建立 Web 應用程式。 它們還支援類似於 AngularJS 的 2 路資料綁定。 當我們深入研究時,了解 ember.js 是如何誕生的、其建立背後的先驅者以及製作開源軟體時做出的改變生活的決定非常重要。看這個! {% 嵌入 https://www.youtube.com/watch?v=Cvz-9ccflKQ %} 安裝 Ember CLI 後。 ``` npm install -g ember-cli ``` 您可以建立一個新應用程式,如圖所示。 ``` ember new ember-quickstart --lang en cd ember-quickstart npm start ``` 您可以閱讀[詳細的快速入門文件](https://guides.emberjs.com/release/getting-started/quick-start/)和[官方指南](https://guides.emberjs.com/release/)。 要學習 ember.js,您可以按照他們的官方團隊建立的[逐步教程](https://guides.emberjs.com/release/tutorial/part-1/)進行操作。您可以在[Ember API 文件](https://api.emberjs.com/ember/release)上閱讀有關 API 的更多資訊。 有數以千計的 JavaScript 庫可以在 Ember 中很好地工作。當 npm 套件提供一些 Ember 特定的功能時,他們稱之為`addon` 。外掛程式提供了一種編寫可重複使用程式碼、共用元件和樣式、擴充建置工具等的方法,所有這些都只需最少的配置。尋找[插件的完整清單](https://emberobserver.com/)。 ![外掛](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wlrw4m6u46fijp7kt7ky.png) 如果您正在尋找更多文章來學習 Ember.js,我推薦這些: - [Ember JS Essentials:Startech 提供的安裝及其功能的初學者指南](https://www.startechup.com/blog/ember-js/)。 - Toptal [建立您的第一個 Ember.js 應用程式的指南](https://www.toptal.com/javascript/a-step-by-step-guide-to-building-your-first-ember-js-app)。 這足以理解結構並決定 Ember 何時適合您的專案。 他們在 GitHub 上有 22k+ 顆星,而`v5.8`版本有 500 多個版本。 {% cta https://github.com/emberjs/ember.js %} 明星 Ember.js ⭐️ {% endcta %} --- 9. [Backbone.js](https://github.com/jashkenas/backbone) - 為您的 JS 應用程式提供一些帶有模型、視圖、集合和事件的 Backbone。 ------------------------------------------------------------------------------------------------- ![骨幹](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qysm5n76o7wdf1u48bii.png) Backbone.js 是一個基於 JavaScript 的框架,透過 RESTful JSON 介面連接到 API。 Jeremy Ashkenas 因建立一些最好的 JavaScript 框架(例如 CoffeeScript 和 Underscore.js)而聞名,他於 2010 年 10 月推出了 Backbone.js。 它旨在建立單頁 Web 應用程式並維護不同 Web 應用程式元件(例如眾多客戶端和伺服器)之間的同步。 Backbone.js 以小而輕而聞名,因為它只需要 jQuery 和一個 JavaScript 函式庫 Underscore.js 即可使用整個函式庫。 Backbone.js 透過提供具有鍵值綁定和自訂事件的模型、具有豐富的可枚舉函數API 的集合、具有聲明性事件處理的視圖,為JavaScript 密集型應用程式提供結構,並透過RESTful JSON 接口將其全部連接到您現有的應用程式。 這是一個簡單的主幹視圖。 ``` var AppView = Backbone.View.extend({ // el - stands for element. Every view has an element associated with HTML // content will be rendered. el: '#container', // It's the first function called when this view is instantiated. initialize: function(){ this.render(); }, // $el - it's a cached jQuery object (el), in which you can use jQuery functions // to push content. Like the Hello World in this case. render: function(){ this.$el.html("Hello World"); } }); ``` 您可以閱讀[文件](https://backbonejs.org/)。 Backbone.js 被許多值得信賴的公司使用,例如 Walmart、Pinterest、SoundCloud 等。 您可以參考他們的[wiki](https://github.com/jashkenas/backbone/wiki/Tutorials%2C-blog-posts-and-example-sites) ,其中記錄了教程、部落格文章和範例網站。 您可以參考幾篇很棒的文章來了解更多: - [BackboneJS:入門](https://auth0.com/blog/backbonejs-getting-started/)- 推薦。 - [適合絕對初學者的 Backbone.js](https://adrianmejia.com/backbone-dot-js-for-absolute-beginners-getting-started/) - [BackboneJS 教學](https://www.tutorialspoint.com/backbonejs/index.htm)- 教學點。 根據儲存庫統計,它們在 GitHub 上擁有超過 28,000 顆星,並被超過 66,000 名開發人員使用。 {% cta https://github.com/jashkenas/backbone %} 明星 Backbone.js ⭐️ {% endcta %} --- 10. [Svelte](https://github.com/sveltejs/svelte) - 控制論增強的網路應用程式。 ---------------------------------------------------------------- ![苗條的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8xe2ni4di3g5qr03woh.png) Svelte 是一種建立 Web 應用程式的新方法。 它是由 Rich Harris(著名前端開發人員)建立的。 Svelte 於 2016 年首次推出,人氣暴漲。 許多開發人員認為 Svelte 是一個真正改變遊戲規則的革命性想法,它從根本上改變了我們編碼 Web 應用程式的方式。 與 React 或 Vue.js 等其他 JavaScript 框架不同,Svelte 沒有虛擬 DOM。相反,您可以使用簡單的 HTML、CSS 和 JavaScript 程式碼來建立無樣板的元件。 然後,Svelte Compiler 在建置期間將此程式碼編譯成小型的無框架的普通 JavaScript 模組,並在狀態變更時精確地更新 DOM。 因此,與 React 或 Vue.js 等其他傳統框架不同,Svelte 不需要很高的瀏覽器處理能力。 Svelte 依靠反應式程式來徹底更新 DOM。因此,與幾乎任何其他框架相比,它可以實現最快的渲染,並且在大多數效能基準測試中名列前茅。 開始使用以下 npm 指令。 ``` npm create svelte@latest my-app ``` 您可以這樣使用它。 ``` cd my-app npm install npm run dev -- --open ``` 您可以閱讀[文件](https://svelte.dev/docs/introduction)。該團隊還提供了[官方的 VSCode 擴展](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode),它也可以與各種其他編輯器和工具整合。 ![苗條的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/322jqc224gf3efcifmjs.png) 他們還提供了[詳細的基於網路的教程](https://svelte.dev/tutorial/basics)來學習 Svelte。 您可以查看所有[範例](https://svelte.dev/examples/nested-components)來了解關鍵概念和結構,包括 DOM 事件、生命週期、運動、過渡和處理 SVG。 ![例子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vfwmw0q3p68byme0b4c.png) 您可以觀看這些教學來了解有關 Svelte 的所有知識。 - [Learn Svelte – 初學者完整課程](https://www.youtube.com/watch?v=UGBJHYpHPvA)– Freecodecamp 的 23 小時教學。 - [Sveltekit &amp; Tailwind](https://www.youtube.com/watch?v=vb7CgDcA_6U&t=2s) - Freecodecamp 的 2 小時教學。 非常感謝老師們免費提供如此詳細的教學! Svelte 在 GitHub 上擁有超過 76k 顆星,目前處於`v4.2`版本,有 282k 開發人員使用。 {% cta https://github.com/sveltejs/svelte %} Star Svelte ⭐️ {% endcta %} --- 11. [Remix](https://github.com/remix-run/remix) - 建立更好的網站。 ---------------------------------------------------------- ![混音](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/en7mvytauu0b7pkm04df.png) Remix 是一個全端Web 框架,可讓您專注於使用者介面並透過Web 基礎知識進行工作,以提供快速、流暢且有彈性的使用者體驗,可部署到任何Node.js 伺服器,甚至非Node. js 環境像 Cloudflare Workers 這樣的邊緣。 Remix 建構在 React Router 之上,有四個特點: - 一個編譯器 - 伺服器端 HTTP 處理程序 - 一個伺服器框架 - 一個瀏覽器框架 您可以觀看此內容以了解有關 Remix by Fireship 的更多資訊。 {% 嵌入 https://www.youtube.com/watch?v=r4B69HAOXnA&amp;pp=ygUUcmVtaXggaW4gMTAwIHNlY29uZHM%3D %} 透過嵌套路由,Remix 可以消除幾乎所有載入狀態,如圖所示。 ![混音](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyr8c9opmrn4chvr88jz.png) 開始使用以下 npm 指令。 ``` npx create-remix@latest ``` 您可以這樣使用它。 ``` mkdir my-remix-app cd my-remix-app npm init -y # install runtime dependencies npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react react-dom # install dev dependencies npm i -D @remix-run/dev vite ``` 如果您想包含您的伺服器,請閱讀此[快速入門指南](https://remix.run/docs/en/main/start/quickstart),並了解更多有關如何透過 Remix Vite 插件提供 Vite 配置的訊息,因為 Remix 使用 Vite。 您可以閱讀[文件](https://remix.run/docs/en/main)。他們根據你想做的事情來分發它,順便說一句,我很喜歡。 ![文件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ljjae4pcyukr1j4nnweo.png) 尋找使用 Remix 建立的[網站的完整清單](https://remix.run/showcase)。 ![混音](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qjzhuy4njph0gckemdq5.png) 您還應該查看社區製作的[Remix 資源](https://remix.run/resources?category=all)。其中一些是有幫助的,可以改善整個生態系統。 ![生態系統](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9q5hdc59czs31nkbyhqq.png) 如果您是第一次接觸 Remix,我建議您閱讀官方團隊建立的[Remix 教學 -30min](https://remix.run/docs/en/main/start/tutorial) 。 他們在 GitHub 上擁有超過 27k 個 star,並且發布了`v2.8`版本。 {% cta https://github.com/remix-run/remix %} 明星混音 ⭐️ {% endcta %} --- 12. [AdonisJS](https://github.com/adonisjs/core) - TypeScript 優先的 Web 框架,用於建立 Web 應用程式和 API 伺服器。 ------------------------------------------------------------------------------------------------ ![阿多尼斯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8ishs5q78nu1yc3qrl4.png) AdonisJS 是一個功能齊全的 Node.js 後端框架。該框架是從頭開始建立的,非常重視開發人員的人體工學和易用性。 AdonisJS 專注於後端,讓您選擇您選擇的前端堆疊,這意味著前端不可知。 它是 Node.js 社群中最稀有的框架之一,附帶一套第一方包,可幫助您建立和發布產品,而無需浪費數百小時組裝不同的 npm 包。 在基礎層面上,AdonisJS 為您的應用程式提供架構,配置無縫的 TypeScript 開發環境,為您的後端程式碼配置 HMR,並提供大量維護良好且記錄廣泛的軟體包。 他們強調了一點測試,這是非常好的。 ![測試](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g623aysi86rucg45yvru.png) 開始使用以下 npm 指令。 ``` npm init adonisjs@latest hello-world ``` AdonisJS 採用經典的 MVC 設計模式。首先,使用函數式 JavaScript API 定義路由,將控制器綁定到它們,並編寫邏輯來處理控制器內的 HTTP 請求。 ``` import router from '@adonisjs/core/services/router' import PostsController from '#controllers/posts_controller' router.get('posts', [PostsController, 'index']) ``` 控制器可以使用模型從資料庫中獲取資料並呈現視圖(也稱為模板)作為回應。 ``` import { HttpContext } from '@adonisjs/core/http' import Post from '#models/post' export default class PostsController { async index({ view }: HttpContext) { const posts = await Post.all() return view.render('pages/posts/list', { posts }) } } ``` 如果您正在建立 API 伺服器,則可以用 JSON 回應取代視圖層。但是,處理和回應 HTTP 請求的流程保持不變。 您可以閱讀[文件](https://docs.adonisjs.com/guides/introduction)。 您也可以參考[入門套件](https://docs.adonisjs.com/guides/installation#starter-kits)。 他們還提供了[VSCode 擴展,](https://marketplace.visualstudio.com/items?itemName=jripouteau.adonis-vscode-extension)如果您開始使用 Adonisjs,則應該使用該擴展。 您必須查看[Awesome Adonisjs](https://github.com/adonisjs-community/awesome-adonisjs) ,它提供了一系列很棒的書籤、軟體包、教程、影片、課程、擁有使用此內容的網站的公司以及來自 AdonisJS 生態系統的其他很酷的資源。 大多數時候,開始接觸一些非常新的東西是很困難的,因此團隊提供了[10 多個課程](https://adonismastery.com/)來了解 Adonisjs 生態系統。 ![培訓班](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nkhw95z0kxkg4wcopzxb.png) ![培訓班](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqisrlqefivdt8ozfwzv.png) 他們在 GitHub 上擁有超過 15k 個 star,並且發布了`v6.8`版本。 {% cta https://github.com/adonisjs/core %} 明星 AdonisJS ⭐️ {% endcta %} --- 13. [Astro](https://github.com/withastro/astro) - 內容驅動網站的網頁框架。 -------------------------------------------------------------- ![阿斯特羅](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7o0f21nevycm4kaqgytq.png) Astro 是一個開源、伺服器優先的 Web 框架,它結合了靜態網站產生 (SSG) 和伺服器端渲染 (SSR) 的優點,可建立快速、SEO 友善的網站。 Astro 專門為部落格和電子商務等內容豐富的網站提供支持,並擁有良好的開發生態系統。 開始使用以下 npm 指令。 ``` npm create astro@latest ``` 您可以閱讀使用 Astro 建立的[文件](https://docs.astro.build/en/getting-started/)和[展示的網站](https://astro.build/showcase/)。其中一些真的很棒並且視覺上令人驚嘆! Astro 支援 React、Preact、Svelte、Vue、Solid、Lit、HTMX、Web 元件等。閱讀所有[記錄的功能](https://docs.astro.build/en/concepts/why-astro/#features)。 您可以按照本教學[使用 Astro 建立您的第一個部落格](https://docs.astro.build/en/tutorial/0-introduction/)。或使用主題來快速啟動您的下一個專案。其中一些是免費的,而另一些則是付費的! ![主題](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06r4rgm0e87djv8otb3o.png) 您可以看到如圖所示的加載性能,甚至我對此感到驚訝。 ![天文表演](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nctfb8xzgz6dbg1wwg99.png) 性能至關重要,尤其是在您從事商業活動時,因為高效的演算法將節省更多資金並減少麻煩。 ![表現](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7db56tvaxi40youys75.png) 無論是在可存取性、圖標還是使用不同的庫方面,[整合選項](https://astro.build/integrations/)都是巨大的。 ![整合選項](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qezjrdyaq1pvwvq4kanm.png) 您可以觀看 Freecodecamp 提供的一小時[Astro Web 框架速成課程](https://www.youtube.com/watch?v=e-hTm5VmofI)。 {% 嵌入 https://www.youtube.com/watch?v=e-hTm5VmofI %} Astro 在 GitHub 上擁有超過 42k 顆星,處於`v4.6` (1800 多個版本),並由超過 112k 開發人員使用。 {% cta https://github.com/withastro/astro %} Star Astro ⭐️ {% endcta %} --- 14. [Fresh](https://github.com/denoland/fresh) - 下一代網路框架。 --------------------------------------------------------- ![新鮮的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3978f35p4m3xg9vf9rsg.png) Fresh 是下一代 Web 框架,專為速度、可靠性和簡單性而建置。 一些突出的特點: - 島上的客戶水合作用可達到最大程度的互動。 - 零執行時開銷意味著預設不會將 JS 傳送到客戶端。 - 無需配置。 - 開箱即用的 TypeScript 支援。 該框架使用 Preact 和 JSX 進行渲染和模板化,處理伺服器和客戶端上的任務。 此外,Fresh 消除了建造步驟的需要。您編寫的程式碼直接在伺服器端和客戶端執行。 TypeScript 或 JSX 到純 JavaScript 的轉換是在需要時動態發生的。這有助於實現極其快速的迭代周期和快速部署。 從這個開始吧。 ``` deno run -A -r https://fresh.deno.dev ``` Fresh 採用的最重要的架構決策是其對[島嶼架構模式](https://www.patterns.dev/vanilla/islands-architecture)的使用。 這意味著 Fresh 應用程式預設將純 HTML 發送到客戶端。然後,伺服器渲染頁面的某些部分可以透過互動式小工具(島嶼)獨立重新水化。 客戶端只負責渲染頁面中互動性足以保證額外工作的部分。任何純靜態內容都沒有相關的客戶端 JavaScript,因此非常輕量級。 您可以閱讀[文件](https://fresh.deno.dev/docs/introduction)。 您可以找到所有使用此建立的[網站](https://fresh.deno.dev/showcase),例如[Max Schmidt](https://mooxl.dev/)的投資組合網站。 ![使用新鮮製作的投資組合網站](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5j9xwjw86by873vjkvk0.png) 他們在 GitHub 上擁有超過 11k 個 star,並且發布了`v1.6`版本。 {% cta https://github.com/denoland/fresh %} 明星新鮮 ⭐️ {% endcta %} --- 15. [Vue.js](https://github.com/vuejs/core) - 用於在網路上建立 UI 的漸進式 JavaScript 框架。 ----------------------------------------------------------------------------- ![看法](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2a8rdd0xohokbf0mx35q.png) Vue.js 是一個漸進式框架,因為它能夠透過雙整合模式促進高階單頁 Web 應用程式的設計。閱讀[使用 Vue 的所有方法](https://vuejs.org/guide/extras/ways-of-using-vue.html),包括從嵌入 Web 元件到獨立腳本,甚至使用伺服器端渲染或靜態網站生成來建立複雜的應用程式。 ![vue 用例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxetclturvms3ve712u9.png) 使用 MVVM(模型-視圖-視圖模型)架構,Vue.js 讓事情變得簡單、靈活且適合初學者。 Vue.js 於 2014 年由 Google 的開發人員 Evan You 首次推出,他從 AngularJS 中汲取靈感,提供了一種簡單、輕量級且高效的替代方案。 Vue.js 借用了 ReactJS 和 AngularJS 的一些功能,並對其進行了增強,以提供更流暢、更用戶友好的體驗。例如,Vue.js 將 AngularJS 的 2 路資料綁定與 React 的高效虛擬 DOM 結合。 與 React 不同,Vue 有一個內建的 MVC,可以快速輕鬆地進行設定。此外,Vue.js 的壓縮版本只有 18-20 kb,比其臃腫笨重的競爭對手(如 React 或 AngularJS)輕得多。 Vue.js 還包含一個方便的內建 CSS 過渡和動畫元件。 100 秒觀看 Vue.js 了解更多! {% 嵌入 https://www.youtube.com/watch?v=nhBVL41-\_Cw&amp;pp=ygUXZW1iZXIganMgaW4gMTAwIHNlY29uZHM%3D %} 開始使用以下 npm 指令。 ``` npm create vue@latest ``` 該命令將安裝並執行 create-vue,官方的 Vue 專案腳手架工具。您將收到有關多個可選功能的提示,例如 TypeScript 和測試支援。 這是啟動開發伺服器的方法。 ``` cd <your-project-name> npm install npm run dev ``` 一個簡單的應用程式。 ``` import { createApp } from 'vue' createApp({ data() { return { count: 0 } } }).mount('#app') <div id="app"> <button @click="count++"> Count is: {{ count }} </button> </div> ``` 上面的例子展示了Vue的兩個核心特性: 1. **聲明式渲染**:Vue 使用模板語法擴充了標準 HTML,該模板語法基於 JavaScript 狀態以聲明方式描述 HTML 輸出。 2. **反應性**:Vue 會自動追蹤 JavaScript 狀態變化,並在變化發生時有效地更新 DOM。 您也可以使用 CDN 來使用它,CDN 將使用全域建置。閱讀[快速入門指南](https://vuejs.org/guide/quick-start)以了解更多資訊。 您可以閱讀[文件](https://vuejs.org/guide/introduction)並查看不同主題的[程式碼編輯器範例](https://vuejs.org/examples/#hello-world),甚至可以了解如何建立 Markdown 編輯器。 要體驗 Vue.js,您也可以直接在他們的[現場 Playground](https://play.vuejs.org/#eNp9kVFLwzAQx7/KeS9TmBuiT6MOVAbqg4oKvuSltLeuM01CcpmF0u/utaXVhzEISe7/vyS/yzV459ziEAlXmITMl47XylDtrGfIaZtGzdAoA5CnnJ5fDHsATxy9GSOAKhQrmD2S1ha+rNf52Wyw2m6RSUaynB6QgKlyOmWSCCDZXa2bprsF2jZZStSrpXGR4XBZ2Zz0rULxFYqVLKfTOEcOmTXbsljsgzVSRw+lMLOVKzX5V8elNUHhasRVmArnz3OvsY80H/VsR9n3EX0f6k5T+OYpkD+Qwsnj1BfEg735eKFa9pMp5FFL9gnznYLVsWMc0u6jyQX7X15P+1R1PSlN8Rk2NZMJY1EdaP/Jfb5CaebDidL/cK8XN2NzsP0F+HSp8w==)中嘗試。 我非常喜歡的一篇關於 Vue 的文章是 Michael 在 DEV 上發表的。必讀! {% 嵌入 https://dev.to/michaelthiessen/25-vue-tips-you-need-to-know-2h70 %} 如果您剛開始,您可以按照他們的團隊建立的[官方教程](https://vuejs.org/tutorial/#step-1)進行操作。 ![教學](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sf7dhgd0843jkpru9y27.png) 與 Astro 類似,他們也有[課程部分](https://www.vuemastery.com/courses/)和[Vue School](https://vueschool.io/) ,您可以在其中找到各種主題。 ![賽車視圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4gixw8cd2ltkippi68h.png) Vue.js 為許多知名網站提供支持,包括 Font Awesome、Upwork 和 Namecheap 等。 Freecodecamp 有一個[針對初學者的 3 小時 Vue](https://www.youtube.com/watch?v=4deVCNJq3qc)教程,但我不推薦它,因為它是 2019 年的,而且我們知道這些框架中的概念變化有多快。 他們在 GitHub 上擁有超過 44k 個 star,並且發布了`v3.4`版本。它是有史以來最受開發人員喜愛的框架之一。 {% cta https://github.com/vuejs/core %} Star Vuejs ⭐️ {% endcta %} --- 還有很多其他框架,您可以查看其中一些: [Aurelia.js](https://github.com/aurelia/framework) 、 [Mithril.js](https://github.com/MithrilJS/mithril.js) 、 [Stimulus.js](https://github.com/hotwired/stimulus) 、 [Meteor.js](https://github.com/meteor/meteor) 、 [Angular.js](https://github.com/angular/angular) 、 [React.js](https://github.com/facebook/react) 、 [Knockout.js](https://github.com/knockout/knockout)和[Alpine.js](https://github.com/alpinejs/alpine) 。 是的,我知道,我同時感到 😵 和興奮。哈哈! 我有一些影片推薦,可以讓本文更加深入。 {% 嵌入 https://www.youtube.com/watch?v=cuHDQhDhvPE&amp;pp=ygUXZW1iZXIganMgaW4gMTAwIHNlY29uZHM%3D %} {% 嵌入 https://www.youtube.com/watch?v=WJRf7dh5Zws&amp;pp=ygURZW1iZXIganMgdHV0b3JpYWw%3D %} --- 我特意製作了這一系列教程,以幫助您在一個地方找到所有內容。我希望你喜歡這個! 雖然我是 Next.js 的忠實粉絲,但探索 Wing 等其他出色的框架可能非常適合您的下一個專案。 讓我們知道您計劃使用哪些框架,或者您認為其他人是否應該了解其他內容。 祝你有美好的一天!直到下一次。 我建立技術內容是為了幫助其他人每天成長 1%,這樣您就可以在 Twitter 和 LinkedIn 上關注我以獲得每日見解。 |如果你喜歡這類東西, 請關注我以了解更多:) | [![用戶名 Anmol_Codes 的 Twitter 個人資料](https://img.shields.io/badge/Twitter-d5d5d5?style=for-the-badge&logo=x&logoColor=0A0209)](https://twitter.com/Anmol_Codes) [![用戶名 Anmol-Baranwal 的 GitHub 個人資料](https://img.shields.io/badge/github-181717?style=for-the-badge&logo=github&logoColor=white)](https://github.com/Anmol-Baranwal) [![用戶名 Anmol-Baranwal 的 LinkedIn 個人資料](https://img.shields.io/badge/LinkedIn-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/Anmol-Baranwal/) | |------------|----------| 關注Winglang以獲取更多此類內容。 {% 嵌入 https://dev.to/winglang %} --- 原文出處:https://dev.to/winglang/15-javascript-frameworks-for-your-next-project-1o7n

🕸️ 2024 年我們將看到的 Web 開發趨勢 👀

隨著我們已經步入新的一年,現在是了解 2024 年 Web 開發趨勢開始受到關注的最佳時機。 回顧 2023 年以來的旋風式更新,以下是一些熱門話題的概述即將到來的一年。 ![戲法](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8d7a35t3wvyu1ppj6xc.png) 返回自架 ---- ![噗](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3zlko5f6tojse2ypqq2w.jpg) 多年來,自架是網頁開發人員和公司託管其應用程式的最初和預設方式。開發人員必須更深入地了解 IIS、Nginx 或類似工具的內部工作原理才能託管其 Web 應用程式。隨後出現了雲端服務,與「自己動手做」的方法相比,雲端服務的出現使部署變得輕而易舉。不再有伺服器維護的惡夢,對吧? 與「標準」自託管解決方案相比,更便宜、更方便的雲端部署意味著在其他地方更容易學習和維護部署。畢竟,你必須擁有一台伺服器,維護它、更新它、解決錯誤等。在生產環境中執行」開始出現就像過去的事情一樣。 但是,這還不足以取代僅將應用程式傳送到某些外部提供者的便利性。不必被迫學習太多有關網路、管理和虛擬機器處理的便利性仍然不存在。更便宜的家庭伺服器的興起,使用網路附加儲存(NAS)及其廣泛的選項,使得處理輕量級使用的自託管需求變得更加容易。我們現在擁有 Proxmox 和 Portainer 等工具,它們使自架您自己的 Docker 容器變得輕而易舉。我們甚至看到 DHH(他是 Ruby on Rails 等產品的建立者)公司[完全轉向](https://world.hey.com/dhh/why-we-re-leaving-the-cloud-654b47e0)自託管模式,這引發了一場大爭論。 重回自有伺服器 ----- ![伺服器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjxxcr4n3kjlhh72ikvn.png) 在 React 的世界中,有一種強烈的推動力將伺服器作為渲染應用程式的方式。 [React Server Components](https://nextjs.org/docs/app/building-your-application/rendering/server-components)主要透過 Next.js 帶頭,儘管是一項非常新技術,但在公眾討論中獲得了很大的空間。這些工具正在攪局——一些開發人員認為它們具有開創性,而另一些開發人員則認為它們只是重新發明輪子。無論如何,承諾是更快的頁面加載、更少的客戶端程式碼和更流暢的開發體驗。 React 元件可以在伺服器上專門執行和渲染 React 程式碼,這應該會帶來一些好處,例如更快的頁面載入、更少的發送到客戶端的程式碼以及更好的開發人員體驗。 DX 的一大優點是直接從元件本身安全地存取資料庫層,而不需要 API。 [HTMX](https://htmx.org/)是另一個因其伺服器優先的資料渲染方法而受到歡迎的程式庫,儘管它正在尋求一種更簡單的方法來吸引開發人員。 重回 SPA ------ ![水療圖表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uugl165hh4465tekfn6g.png) 等等,這不是有點矛盾嗎?雖然伺服器端渲染正在蓬勃發展,但也有一個堅實的陣營正在完善優秀的單頁應用程式 (SPA) 方法。主要原因是我們在嘗試伺服器優先方法方面走得太遠,以至於我們忘記了並非所有應用程式都應該駐留在伺服器上。有些可能是高度動態的,帶有大量複雜的用戶端驗證,或者您只是想將舊的 Create-React-App 架構遷移到 Vite。 順便說一句,如果您想知道 SPA 到底是什麼以及我什麼時候應該使用它而不是 React 伺服器元件,請讓我快速解釋一下。單頁應用程式 (SPA) 是一種 Web 應用程式,它最初僅加載單個 Web 文件,然後動態更新同一頁面上的內容,而無需重新加載整個頁面。 SPA 透過重寫現有網頁而不是從伺服器載入全新頁面來與使用者互動。 Remix SPA 模式是較新的 SPA 方法的範例之一。它使用 Vite 建立基本上是 React Router 和 Vite 的設置,並具有附加的 Remix 特定功能,例如基於文件的路由等。 利用 Vite 為使用者提供 SPA 體驗的 React 框架的另一個例子是[Wasp——一個針對 React 和 Node.js 的全端框架,大大減少了樣板檔案](https://github.com/wasp-lang/wasp)。儘管它是一個全端框架,但它專注於使用 Node.js 伺服器部署客戶端 React 應用程式的標準化方法,以盡可能實現可移植。透過這種方法,您幾乎可以在任何地方部署您的應用程式,也可以自行託管它,這也是我們之前在本文中提到的一件事。 ![OpenSaaS 橫幅](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pzwgvd7wm3i04gia4zrk.png) 為了更快啟動,它還具有[Open SaaS - 一個適用於 React 和 Node.js 的 100% 免費開源樣板啟動器](https://github.com/wasp-lang/open-saas)。只需克隆它,即可獲得具有身份驗證、計費、開放 AI API、用戶儀表板等功能的工作應用程式! ### 覺得這篇文章有用嗎? 我們在[Wasp](https://wasp.sh/)正在努力建立這樣的內容,更不用說建立一個現代的開源 React/NodeJS 框架了。 表達您支援的最簡單方法就是為 Wasp 儲存庫加註星標! 🐝 但如果您可以查看[儲存庫](https://github.com/wasp-lang/wasp)(用於貢獻,或只是測試產品),我們將不勝感激。點擊下面的按鈕給黃蜂星一顆星並表示您的支持! ![wasp_arnie_handshake](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axqiv01tl1pha9ougp21.gif) https://github.com/wasp-lang/wasp ⭐️ 感謝您的支持 💪 低級語言的興起 ------- ![銹病](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/61wil1pr8jfv72p17hec.png) 暫時離開 JavaScript 的世界,我們發現許多低階語言進入主流的例子,尤其是在 JavaScript 工具方面。這一趨勢在過去幾年中已經開始,並且應該會持續到 2024 年及以後。當 JavaScript 生態系統開始蓬勃發展時,出現了許多使用 JavaScript 建立的出色工具,這使得開發人員可以更輕鬆地為它們做出貢獻,並允許他們建立自己的插件並根據自己的喜好進行自訂。 我們應該對此感到興奮的一個重要原因是,與基於 JS 的工具相比,這些工具為開發人員帶來的效能。 SWC(Speedy Web Compiler)和 Turbopack(Vercel 自稱為 Webpack 的繼承者)等工具都是用 Rust 建構的。另一方面,Bun,它是一個帶有 Zig 的一體化 JavaScript 工具包。它不僅使用戶能夠將其用作預設的 JavaScript 執行時,還可以用作捆綁器、測試執行器和與 Node.js 相容的套件管理器。很棒的是,許多新工具不會消除與預先存在的概念的兼容性,這使得轉換相對容易。 結論 -- 與所有事情一樣,我們應該對所有預測和潛在趨勢持保留態度。人們很容易被當今不斷出現的新技術和工具的炒作沖昏頭。如果你仔細閱讀這篇文章,你可能會想「好吧,人工智慧在哪裡?」。我故意不包含任何基於人工智慧的預測,以提高人們對行業中被忽視的其他酷發展和趨勢的認識。 您如何看待這些趨勢?你也注意到他們了嗎?或者更好,自己做一些這樣的事情?請在下面的評論部分告訴我們並分享您的意見! --- 原文出處:https://dev.to/wasp/web-development-trends-we-will-see-in-2024-55pi

如何在 NodeJS 中建立任務計劃程序

--- 標題:如何在 NodeJS 中建立任務排程程序 發表:真實 描述:在這篇文章中,我將描述如何設定任務以按特定計劃執行節點程式碼。 標籤: Node.js、JavaScript、ES6 封面圖片:https://thepracticaldev.s3.amazonaws.com/i/mnq83r0xggrefc94s16t.png --- ### Wes Bos 發布了一個非常有用的[影片](https://www.youtube.com/watch?v=rWc0xqroY4U),解釋瞭如何使用 NodeJS 從網路上抓取資料。在他的第二個[影片](https://www.youtube.com/watch?v=9dIHjegGeKo)中,他解釋瞭如何為這項特定任務設定時間表。這是我以前從未在 Node 中做過的事情,所以我認為這在將來可能會有用,因此我應該寫一篇關於它的快速部落格文章。 在 Wes 的影片中,他從自己的社交媒體頁面獲取資料,而我將建立一個小應用程式,該應用程式按計劃執行並每天下午 6 點下載隨機圖像。我知道,誰不想每天在他或她的磁碟上彈出一張隨機圖像? 我們首先需要安裝一些東西: ``` // create dir, go into it and install packages mkdir image-downloader && cd image-downloader && npm i node-cron node-fetch esm ``` 快速分解您剛安裝的內容: 1. **node-cron** :這是任務排程器的套件。它允許您設定自動執行某些操作(通常執行某個功能)的計劃。 2. **node-fetch** :使用 fetch api 的方法。這是一個原生的瀏覽器API——但是當我們使用node時我們沒有瀏覽器。您也可以在此處使用另一個套件。 Axios 是非常受歡迎的一款。它只允許您下載網址後面的內容。通常,您會使用它來連接 API 或抓取網路。 3. **esm** :我以前沒用過這個,但它非常有用。它允許您像在客戶端 JavaScript(例如 Vue 或 React)中一樣編寫程式碼。這意味著您可以存取匯入/匯出等內容。要啟用此 esm,您必須安裝它,然後將其新增至執行腳本。在我的 package.json 檔案中,我新增了這一行作為「開始」腳本: ``` "scripts": { "start": "node -r esm index.js" }, ``` 然後,您可以透過執行`npm run start`來執行此腳本。 建立下載器 ----- 現在我們已經安裝了必要的套件,是時候建立第一個檔案了,我們將在其中獲取一個映像:fetch.js ``` // fetch.js import fetch from "node-fetch"; import fs from "fs"; // create a function that grabs a random image const fetchingData = async () => { const res = await fetch("https://picsum.photos/200?random"); const date = Date.now(); const dest = fs.createWriteStream(`./image-${date}.png`); res.body.pipe(dest); }; // export the function so it can be used in the index.js file export default fetchingData; ``` 為了在每次執行此腳本時獲得隨機圖片,我使用[Picsum](https://picsum.photos/) 。網站可讓您產生具有固定寬度和高度的隨機圖像。您可以將這些尺寸附加到 url 中。我還建立了一個包含當前日期的變數。然後,該日期將附加到檔案名稱中,並防止檔案被覆蓋。因為我們在這裡使用 Promise,所以我使用 async/await。 如果你想測試這個文件,你可以使用`node -r esm fetch.js`執行它 設定時間表 ----- 接下來您要建立一個index.js 檔案。這將是主入口文件,其中包含 node-cron 函數: ``` import cron from "node-cron"; cron.schedule("* * * * *", () => { console.log(`this message logs every minute`); }); ``` 這是一個非常小的應用程式,如果您執行它,它將向控制台記錄一條訊息。此訊息將每分鐘重複一次。很酷,但不是很有用。讓我們透過導入來新增圖像獲取器。 index.js 檔案將如下所示: ``` import cron from "node-cron"; import fetchingData from "./fetch"; cron.schedule("* * * * *", () => { console.log(`one minute passed, image downloaded`); fetchingData(); }); ``` 但是,這將每分鐘執行一次圖像下載程式。我們可以透過更改新增到計劃函數中的第一個參數來更改 cron 作業。您看到的五顆星意味著函數將每分鐘執行一次。您可以按照以下方式修改它(取自[此處](https://github.com/node-cron/node-cron)): ``` # ┌────────────── second (optional) ``` ``` # │ ┌──────────── minute ``` ``` # │ │ ┌────────── hour ``` ``` # │ │ │ ┌──────── day of month ``` ``` # │ │ │ │ ┌────── month ``` ``` # │ │ │ │ │ ┌──── day of week ``` ``` # │ │ │ │ │ │ ``` ``` # │ │ │ │ │ │ ``` ``` # * * * * * * ``` 起初,我不太明白這代表什麼。經過一番谷歌搜尋後,我發現以下網站作為備忘單非常有用; [crontabguru](https://crontab.guru/) 這意味著您幾乎可以隨時設定時間表。也許一年一次?或一月和七月的每週二上午 8 點。確實沒有任何限制。我繼續設定一個時間表,使其在每天下午 6 點下載: `0 18 * * *` 完整且最終的`index.js`檔案如下: ``` import cron from "node-cron"; import fetchingData from "./fetch"; cron.schedule("0 18 * * *", () => { console.log(`one minute passed, image downloaded`); fetchingData(); }); ``` 想要查看完整的應用程式或克隆它嗎?[前往](https://github.com/andre347/nodejs-task-scheduling)我的 Github! 在 Dev. 上的第一篇文章所以要溫柔。最初發佈於[andredevries.dev](https://andredevries.dev/posts/node-task-scheduler/) --- 原文出處:https://dev.to/andre347/how-to-create-a-task-scheduler-in-nodejs-4lo2

🚀 21 個將你的開發技能帶上月球的工具 🌝

我見過數百種人工智慧工具,其中許多正在改變世界。 作為開發人員,總是有很多事情需要學習,因此專注於節省時間來處理重要的事情非常重要。 我將介紹 21 個供開發人員使用的工具,它們可以讓您的生活更輕鬆,特別是在開發人員體驗方面。 相信我,這份清單會讓你大吃一驚! 我們開始做吧。 --- 1. [Taipy](https://github.com/Avaiga/taipy) - 將資料和人工智慧演算法整合到生產就緒的 Web 應用程式中。 ---------------------------------------------------------------------------- ![打字](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wd10iiofzmt4or4db6ej.png) Taipy 是一個開源 Python 庫,可用於輕鬆的端到端應用程式開發,具有假設分析、智慧管道執行、內建調度和部署工具。 我相信你們大多數人都不明白 Taipy 用於為基於 Python 的應用程式建立 GUI 介面並改進資料流管理。 關鍵是性能,而 Taipy 是最佳選擇。 雖然 Streamlit 是一種流行的工具,但在處理大型資料集時,其效能可能會顯著下降,這使得它在生產級使用上不切實際。 另一方面,Taipy 在不犧牲性能的情況下提供了簡單性和易用性。透過嘗試 Taipy,您將親身體驗其用戶友好的介面和高效的資料處理。 ![大資料支持](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xnvk0tozn0lgj083rzcb.gif) Taipy 有許多整合選項,可以輕鬆地與領先的資料平台連接。 ![整合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7yv31uir3erina587zp8.png) 開始使用以下命令。 ``` pip install taipy ``` 我們來談談最新的[Taipy v3.1 版本](https://docs.taipy.io/en/latest/relnotes/)。 最新版本使得在 Taipy 的多功能零件物件中可視化任何 HTML 或 Python 物件成為可能。 這意味著[Folium](https://python-visualization.github.io/folium/latest/) 、 [Bokeh](https://bokeh.org/) 、 [Vega-Altair](https://altair-viz.github.io/)和[Matplotlib](https://matplotlib.org/)等程式庫現在可用於視覺化。 這也帶來了對[Plotly python](https://plotly.com/python/)的原生支持,使繪製圖表變得更加容易。 他們還使用分散式運算提高了效能,但最好的部分是 Taipy,它的所有依賴項現在都與 Python 3.12 完全相容,因此您可以在使用 Taipy 進行專案的同時使用最新的工具和程式庫。 您可以閱讀[文件](https://docs.taipy.io/en/latest/)。 ![用例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xdvnbejf9aivxmqsd3hx.png) 另一個有用的事情是,Taipy 團隊提供了一個名為[Taipy Studio](https://docs.taipy.io/en/latest/manuals/studio/)的 VSCode 擴充功能來加速 Taipy 應用程式的建置。 ![太皮工作室](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc1umm5hcxes0ydbuspb.png) 您也可以使用 Taipy 雲端部署應用程式。 如果您想閱讀部落格來了解程式碼庫結構,您可以閱讀 HuggingFace[的使用 Taipy 在 Python 中為您的 LLM 建立 Web 介面](https://huggingface.co/blog/Alex1337/create-a-web-interface-for-your-llm-in-python)。 嘗試新技術通常很困難,但 Taipy 提供了[10 多個演示教程,](https://docs.taipy.io/en/release-3.1/gallery/)其中包含程式碼和適當的文件供您遵循。 ![示範](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wigid2aokt6spkkoivr.png) 例如,一些演示範例和專案想法: - [即時污染儀表板](https://docs.taipy.io/en/release-3.0/knowledge_base/demos/pollution_sensors/) 使用工廠周圍的感測器測量空氣品質的用例,展示 Taipy 儀表板流資料的能力。檢查[GitHub 儲存庫](https://github.com/Avaiga/demo-realtime-pollution)。 - [詐欺辨識](https://docs.taipy.io/en/release-3.0/knowledge_base/demos/fraud_detection/) Taipy 應用程式可分析信用卡交易以偵測詐欺行為。檢查[GitHub 儲存庫](https://github.com/Avaiga/demo-fraud-detection)。 - [新冠儀表板](https://docs.taipy.io/en/release-3.0/knowledge_base/demos/covid_dashboard/) 這使用 2020 年的 Covid 資料集。還有一個預測頁面來預測傷亡人數。檢查[GitHub 儲存庫](https://github.com/Avaiga/demo-covid-dashboard)。 - [建立 LLM 聊天機器人](https://docs.taipy.io/en/release-3.0/knowledge_base/demos/chatbot/) 該演示展示了 Taipy 使最終用戶能夠使用 LLM 執行推理的能力。在這裡,我們使用 GPT-3 建立一個聊天機器人,並將對話顯示在互動式聊天介面中。您可以輕鬆更改程式碼以使用任何其他 API 或模型。檢查[GitHub 儲存庫](https://github.com/Avaiga/demo-chatbot)。 - [即時人臉辨識](https://docs.taipy.io/en/release-3.0/knowledge_base/demos/face_recognition/) 該演示將人臉辨識無縫整合到我們的平台中,使用網路攝影機提供使用者友好的即時人臉偵測體驗。檢查[GitHub 儲存庫](https://github.com/Avaiga/demo-face-recognition)。 這些用例非常驚人,所以一定要檢查一下。 Taipy 在 GitHub 上有 8.2k+ Stars,並且處於`v3.1`版本,因此它們正在不斷改進。 {% cta https://github.com/Avaiga/taipy %} Star Taipy ⭐️ {% endcta %} --- 2. [DevToys](https://github.com/DevToys-app/DevToys) - 開發者的瑞士軍刀。 ---------------------------------------------------------------- ![開發玩具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7zfl1wjr01fdvca6wxbi.png) DevToys 協助完成日常開發任務,例如格式化 JSON、比較文字和測試 RegExp。 這樣,就無需使用不可信的網站來處理您的資料執行簡單的任務。透過智慧型偵測,DevToys 可以偵測用於複製到 Windows 剪貼簿的資料的最佳工具。 緊湊的覆蓋範圍讓您可以保持應用程式較小並位於其他視窗之上。最好的部分是可以同時使用應用程式的多個實例。 我可以肯定地說,開發人員甚至不知道這個很棒的專案。 最後是一款專為 Windows 生態系統設計的軟體。哈哈! ![工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7wd60jsgdb5tx2t2adi.png) 他們提供的一些工具是: > 轉換器 - JSON &lt;&gt; YAML - 時間戳 - 數基數 - 規劃任務解析器 ![轉換器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8x784fx53x6ia02zal0.png) > 編碼器/解碼器 - 超文本標記語言 - 網址 - Base64 文字與圖片 - 壓縮包 - 智威湯遜解碼器 ![編碼器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73ts4x1vtcy4yswsmytw.png) > 格式化程式 - JSON - SQL - XML ![XML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e5dc8ko2baywta82ymq5.png) > 發電機 - 哈希(MD5、SHA1、SHA256、SHA512) - UUID 1 和 4 - 洛雷姆·伊普蘇姆 - 校驗和 ![發電機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwsq8xig6jf69wr99iuv.png) > 文字 - 逃脫/逃脫 - 檢驗員和箱子轉換器 - 正規表示式測試器 - 文字比較 - XML驗證器 - 降價預覽 ![MD預覽](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vcbkse1i5324qg3xu1yd.png) ![文字差異](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hlqqib4fcjimc03pdrwr.png) > 形象的 - 色盲模擬器 - 顏色選擇器和對比度 - PNG / JPEG 壓縮器 - 影像轉換器 ![圖形工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/631upekcqzh62xyrdjwt.png) 我不了解你,但我不會錯過這個! 您可以閱讀[如何執行 DevToys](https://github.com/DevToys-app/DevToys?tab=readme-ov-file#how-to-run-devtoys) 。 關於許可證的註解。 DevToys 使用的授權允許將應用程式作為試用軟體或共享軟體重新分發而無需進行任何更改。然而,作者 Etienne BAUDOUX 和 BenjaminT 不希望你這樣做。如果您認為自己有充分的理由這樣做,請先與我們聯絡討論。 他們在 GitHub 上有 23k Stars,並且使用 C#。 {% cta https://github.com/DevToys-app/DevToys %} 明星 DevToys ⭐️ {% endcta %} --- 3. [Pieces](https://github.com/pieces-app) - 您的工作流程副駕駛。 ------------------------------------------------------- ![件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qf2qgqtpv78fxw5guqm5.png) Pieces 是一款支援人工智慧的生產力工具,旨在透過智慧程式碼片段管理、情境化副駕駛互動和主動呈現有用材料來幫助開發人員管理混亂的工作流程。 它最大限度地減少了上下文切換、簡化了工作流程並提升了整體開發體驗,同時透過完全離線的 AI 方法維護了工作的隱私和安全性。太棒了:D ![整合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f2ro3rcwnqp4qrmv5e8s.png) 它與您最喜歡的工具無縫集成,以簡化、理解和提升您的編碼流程。 它具有比表面上看到的更令人興奮的功能。 - 它可以透過閃電般快速的搜尋體驗找到您需要的材料,讓您根據您的喜好透過自然語言、程式碼、標籤和其他語義進行查詢。可以放心地說“您的個人離線谷歌”。 - Pieces 使用 OCR 和 Edge-ML 升級螢幕截圖,以提取程式碼並修復無效字元。因此,您可以獲得極其準確的程式碼提取和深度元資料豐富。 您可以查看 Pieces 可用[功能的完整清單](https://pieces.app/features)。 您可以閱讀[文件](https://docs.pieces.app/)並存取[網站](https://pieces.app/)。 他們為 Pieces OS 用戶端提供了一系列 SDK 選項,包括[TypeScript](https://github.com/pieces-app/pieces-os-client-sdk-for-typescript) 、 [Kotlin](https://github.com/pieces-app/pieces-os-client-sdk-for-kotlin) 、 [Python](https://github.com/pieces-app/pieces-os-client-sdk-for-python)和[Dart](https://github.com/pieces-app/pieces-os-client-sdk-for-dart) 。 就開源流行度而言,他們仍然是新的,但他們的社群是迄今為止我見過的最好的社群之一。加入他們,成為 Pieces 的一部分! {% cta https://github.com/pieces-app/ %} 星星碎片 ⭐️ {% endcta %} --- 4. [Infisical-](https://github.com/Infisical/infisical)秘密管理平台。 -------------------------------------------------------------- ![內部的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jrolzjdnkky1r694h9av.png) Infisical 是一個開源秘密管理平台,團隊可以用它來集中 API 金鑰、資料庫憑證和設定等秘密。 他們讓每個人(而不僅僅是安全團隊)都可以更輕鬆地進行秘密管理,這意味著從頭開始重新設計整個開發人員體驗。 就我個人而言,我不介意使用 .env 文件,因為我並不特別謹慎。不過,您可以閱讀[立即停止使用 .env 檔案!](https://dev.to/gregorygaines/stop-using-env-files-now-kp0)由格雷戈里來理解。 他們提供了四種 SDK,分別用於<a href="">Node.js</a> 、 <a href="">Python</a> 、 <a href="">Java</a>和<a href="">.Net</a> 。您可以自行託管或使用他們的雲端。 開始使用以下 npm 指令。 ``` npm install @infisical/sdk ``` 這是使用入門 (Node.js SDK) 的方法。 ``` import { InfisicalClient, LogLevel } from "@infisical/sdk"; const client = new InfisicalClient({ clientId: "YOUR_CLIENT_ID", clientSecret: "YOUR_CLIENT_SECRET", logLevel: LogLevel.Error }); const secrets = await client.listSecrets({ environment: "dev", projectId: "PROJECT_ID", path: "/foo/bar/", includeImports: false }); ``` ![內部](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3eu288l470du91b66pd.png) Infisical 還提供了一組工具來自動防止 git 歷史記錄的秘密洩露。可以使用預提交掛鉤或透過與 GitHub 等平台直接整合在 Infisical CLI 層級上設定此功能。 您可以閱讀[文件](https://infisical.com/docs/documentation/getting-started/introduction)並檢查如何[安裝 CLI](https://infisical.com/docs/cli/overview) ,這是使用它的最佳方式。 Infisical 還可用於將機密注入 Kubernetes 叢集和自動部署,以便應用程式使用最新的機密。有很多整合選項可用。 ![內部](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5x0tvt5ycaiqhggv6wml.png) 在使用整個原始程式碼之前一定要檢查他們的[許可證](https://github.com/Infisical/infisical/blob/main/LICENSE),因為他們有一些受 MIT Expat 保護的企業級程式碼,但不用擔心,大部分程式碼都是免費使用的。 他們在 GitHub 上擁有超過 11k 顆星星,並且發布了超過 125 個版本,因此他們正在不斷發展。另外,Infiscial CLI 的安裝次數超過 540 萬次,因此非常值得信賴。 {% cta https://github.com/Infisical/infisical %} 明星 Infisical ⭐️ {% endcta %} --- 5. [Mintlify](https://github.com/mintlify/writer) - 在建置時出現的文件。 -------------------------------------------------------------- ![精簡](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvk07kmn8p48cpssogov.png) Mintlify 是一款由人工智慧驅動的文件編寫器,您只需 1 秒鐘即可編寫程式碼文件 :D 幾個月前我發現了 Mintlify,從那時起我就一直是它的粉絲。我見過很多公司使用它,甚至我使用我的商務電子郵件產生了完整的文件,結果證明這是非常簡單和體面的。如果您需要詳細的文件,Mintlify 就是解決方案。 主要用例是根據我們將在此處討論的程式碼產生文件。當您編寫程式碼時,它會自動記錄程式碼,以便其他人更容易跟上。 您可以安裝[VSCode 擴充功能](https://marketplace.visualstudio.com/items?itemName=mintlify.document)或將其安裝在[IntelliJ](https://plugins.jetbrains.com/plugin/18606-mintlify-doc-writer)上。 您只需突出顯示程式碼或將遊標放在要記錄的行上。然後點選「編寫文件」按鈕(或按 ⌘ + 。) 您可以閱讀[文件](https://github.com/mintlify/writer?tab=readme-ov-file#%EF%B8%8F-mintlify-writer)和[安全指南](https://writer.mintlify.com/security)。 如果您更喜歡教程,那麼您可以觀看[Mintlify 的工作原理](https://www.loom.com/embed/3dbfcd7e0e1b47519d957746e05bf0f4)。它支援 10 多種程式語言,並支援許多文件字串格式,例如 JSDoc、reST、NumPy 等。 順便說一句,他們的網站連結是[writer.mintlify.com](https://writer.mintlify.com/) ;回購協議中目前的似乎是錯誤的。 Mintlify 是一個方便的工具,用於記錄程式碼,這是每個開發人員都應該做的事情。它使其他人更容易有效地理解您的程式碼。 它在 GitHub 上有大約 2.5k 顆星,基於 TypeScript 建置,受到許多開發人員的喜愛。 {% cta https://github.com/mintlify/writer %} Star Mintlify ⭐️ {% endcta %} --- 6. [Replexica](https://github.com/replexica/replexica) - 用於 React 的 AI 支援的 i18n 工具包。 ------------------------------------------------------------------------------------ ![反射](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htgshukxy927iy37ui33.png) 在地化方面的困難是真實存在的,因此人工智慧的幫助絕對是一個很酷的概念。 Replexica 是 React 的 i18n 工具包,可快速發布多語言應用程式。它不需要將文字提取到 JSON 檔案中,並使用 AI 支援的 API 進行內容處理。 它有以下兩個部分: 1. Replexica Compiler - React 的開源編譯器插件。 2. Replexica API - 雲端中的 i18n API,使用 LLM 執行翻譯。 (基於使用情況,它有免費套餐) 支援的一些 i18n 格式包括: 1. 無 JSON 的 Replexica 編譯器格式。 2. Markdown 內容的 .md 檔案。 3. 基於舊版 JSON 和 YAML 的格式。 當他們達到 500 星時,他們也在 DEV 上發布了官方公告。我是第一批讀者之一(少於 3 個反應)。 它們涵蓋了很多內容,因此您應該閱讀 Max 的[《We Got 500 Stars What Next》](https://dev.to/maxprilutskiy/we-got-500-github-stars-whats-next-2njc) 。 為了給出 Replexica 背後的總體思路,這是基本 Next.js 應用程式所需的唯一更改,以使其支援多語言。 開始使用以下 npm 指令。 ``` // install pnpm add replexica @replexica/react @replexica/compiler // login to Replexica API. pnpm replexica auth --login ``` 您可以這樣使用它。 ``` // next.config.mjs // Import Replexica Compiler import replexica from '@replexica/compiler'; /** @type {import('next').NextConfig} */ const nextConfig = {}; // Define Replexica configuration /** @type {import('@replexica/compiler').ReplexicaConfig} */ const replexicaConfig = { locale: { source: 'en', targets: ['es'], }, }; // Wrap Next.js config with Replexica Compiler export default replexica.next( replexicaConfig, nextConfig, ); ``` 您可以閱讀如何[開始使用](https://github.com/replexica/replexica/blob/main/getting-started.md)以及清楚記錄的有關[幕後使用內容的](https://github.com/replexica/replexica?tab=readme-ov-file#whats-under-the-hood)內容。 Replexica 編譯器支援 Next.js App Router,Replexica API 支援英文🇺🇸和西班牙文🇪🇸。他們計劃接下來發布 Next.js Pages Router + 法語🇫🇷語言支援! 他們在 GitHub 上擁有 740 多個 Star,並且基於 TypeScript 建置。您應該密切關注該專案以獲得進一步進展! {% cta https://github.com/replexica/replexica %} Star Replexica ⭐️ {% endcta %} --- 7. [Flowise](https://github.com/FlowiseAI/Flowise) - 拖放 UI 來建立您的客製化 LLM 流程。 --------------------------------------------------------------------------- ![弗洛伊薩伊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5bp43nil764fhe4a05z.png) Flowise 是一款開源 UI 視覺化工具,用於建立客製化的 LLM 編排流程和 AI 代理程式。 開始使用以下 npm 指令。 ``` npm install -g flowise npx flowise start OR npx flowise start --FLOWISE_USERNAME=user --FLOWISE_PASSWORD=1234 ``` 這就是整合 API 的方式。 ``` import requests url = "/api/v1/prediction/:id" def query(payload): response = requests.post( url, json = payload ) return response.json() output = query({ question: "hello!" )} ``` ![整合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ahk2ovjrpq1qk3r5pfot.png) 您可以閱讀[文件](https://docs.flowiseai.com/)。 ![流程化人工智慧](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/trkltpn5lk1y1pte0smd.png) 雲端主機不可用,因此您必須使用這些[說明](https://github.com/FlowiseAI/Flowise?tab=readme-ov-file#-self-host)自行託管。 讓我們探討一些用例: - 假設您有一個網站(可以是商店、電子商務網站或部落格),並且您希望廢棄該網站的所有相關連結,並讓法學碩士回答您網站上的任何問題。您可以按照此[逐步教學](https://docs.flowiseai.com/use-cases/web-scrape-qna)來了解如何實現相同的目標。 ![刮刀](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e91sz2mga5wvc0x2hp2g.png) - 您還可以建立一個自訂工具,該工具將能夠呼叫 Webhook 端點並將必要的參數傳遞到 Webhook 主體中。請依照本[指南](https://docs.flowiseai.com/use-cases/webhook-tool)使用 Make.com 建立 Webhook 工作流程。 ![網路鉤子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ckyivo9dvue461jc9pv4.png) 還有許多其他用例,例如建立 SQL QnA 或與 API 互動。 FlowiseAI 在 GitHub 上擁有超過 27,500 個 Star,並擁有超過 10,000 個分叉,因此具有良好的整體比率。 {% cta https://github.com/FlowiseAI/Flowise %} 明星 Flowise ⭐️ {% endcta %} --- 8. [Hexo](https://github.com/hexojs/hexo) - 一個快速、簡單且功能強大的部落格框架。 --------------------------------------------------------------- ![六角形](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vos07fyydiupqqplo2s.png) 大多數開發人員更喜歡自己的博客,如果您也是如此。 Hexo 可能是你不知道的工具。 Hexo 支援許多功能,例如超快的生成速度,支援 GitHub Flavored Markdown 和大多數 Octopress 插件,提供對 GitHub Pages、Heroku 等的一命令部署,以及可實現無限擴展性的強大 API 和數百個主題和插件。 這意味著您可以用 Markdown(或其他標記語言)編寫帖子,Hexo 在幾秒鐘內生成具有漂亮主題的靜態檔案。 開始使用以下 npm 指令。 ``` npm install hexo-cli -g ``` 您可以這樣使用它。 ``` // Setup your blog hexo init blog // Start the server hexo server // Create a new post hexo new "Hello Hexo" ``` 您可以閱讀[文件](https://hexo.io/docs/),查看 Hexo 提供的所有[400 多個外掛程式](https://hexo.io/plugins/)和[主題集](https://hexo.io/themes/)。據我所知,這些外掛程式支援廣泛的用例,例如 Hexo 的 Ansible 部署器外掛程式。 您可以查看有關在[Hexo 上編寫和組織內容的](https://www.youtube.com/watch?v=AIqBubK6ZLc&t=6s)YouTube 教學。 Hexo 在 GitHub 上擁有超過 38,000 顆星,並被 GitHub 上超過 125,000 名開發者使用。它們位於`v7`版本中,解壓縮後大小為`629 kB` 。 {% cta https://github.com/hexojs/hexo %} Star Hexo ⭐️ {% endcta %} --- 9.[螢幕截圖到程式碼](https://github.com/abi/screenshot-to-code)- 放入螢幕截圖並將其轉換為乾淨的程式碼。 --------------------------------------------------------------------------- ![截圖到程式碼](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5akiyz5telxqqsj32ftu.png) 這個開源專案廣泛流行,但許多開發人員仍然不了解它。它可以幫助您以 10 倍的速度建立使用者介面。 這是一個簡單的工具,可以使用 AI 將螢幕截圖、模型和 Figma 設計轉換為乾淨、實用的程式碼。 該應用程式有一個 React/Vite 前端和一個 FastAPI 後端。如果您想使用 Claude Sonnet 或獲得實驗視訊支持,您將需要一個能夠存取 GPT-4 Vision API 的 OpenAI API 金鑰或一個 Anthropic 金鑰。您可以閱讀[指南](https://github.com/abi/screenshot-to-code?tab=readme-ov-file#-getting-started)來開始。 您可以在託管版本上[即時試用](https://screenshottocode.com/),並觀看 wiki 上提供的[一系列演示影片](https://github.com/abi/screenshot-to-code/wiki/Screen-Recording-to-Code)。 他們在 GitHub 上擁有超過 47k 顆星星,並支援許多技術堆疊,例如 React 和 Vue,以及不錯的 AI 模型,例如 GPT-4 Vision、Claude 3 Sonnet 和 DALL-E 3。 {% cta https://github.com/abi/screenshot-to-code %} 將螢幕截圖轉為程式碼 ⭐️ {% endcta %} --- 10. [Appsmith](https://github.com/appsmithorg/appsmith) - 建立管理面板、內部工具和儀表板的平台。 ----------------------------------------------------------------------------- ![應用史密斯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rt7s0r3wz2leec83cl17.png) 管理面板和儀表板是任何軟體創意(在大多數情況下)的一些常見部分,我嘗試從頭開始建立它,這會帶來很多痛苦和不必要的辛苦工作。 您可能已經看到組織建立了內部應用程式,例如儀表板、資料庫 GUI、管理面板、批准應用程式、客戶支援儀表板等,以幫助其團隊執行日常操作。正如我所說,Appsmith 是一個開源工具,可以實現這些內部應用程式的快速開發。 首先,請觀看這個[YouTube 影片](https://www.youtube.com/watch?v=NnaJdA1A11s),該影片在 100 秒內解釋了 Appsmith。 {% 嵌入 https://www.youtube.com/watch?v=NnaJdA1A11s %} 他們提供拖放小部件來建立 UI。 您可以使用 45 多個可自訂的小工具在幾分鐘內建立漂亮的響應式 UI,而無需編寫一行 HTML/CSS。尋找[小部件的完整清單](https://www.appsmith.com/widgets)。 ![按鈕點擊小工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqpnnslvsvjl4gifseon.png) ![驗證](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/489fly7tvknz2uv2mgei.png) Appsmith 幾乎可以在 GUI 上的小部件屬性、事件偵聽器、查詢和其他設定內的任何位置編寫 JavaScript 程式碼。 Appsmith 支援在`{{ }}`內編寫單行程式碼,並將括號之間編寫的任何內容解釋為 JavaScript 表達式。 ``` /*Filter the data array received from a query*/ {{ QueryName.data.filter((row) => row.id > 5 ) }} or {{ storeValue("userID", 42); console.log(appsmith.store.userID); showAlert("userID saved"); }} ``` 您需要使用立即呼叫函數表達式(IIFE)來編寫多行。 例如,無效程式碼和有效程式碼。 ``` // invalid code /*Call a query to fetch the results and filter the data*/ {{ const array = QueryName.data; const filterArray = array.filter((row) => row.id > 5); return filterArray; }} /* Check the selected option and return the value*/ {{ if (Dropdown.selectedOptionValue === "1") { return "Option 1"; } else { return "Option 2"; } }} // valid code /* Call a query and then manipulate its result */ {{ (function() { const array = QueryName.data; const filterArray = array.filter((row) => row.id > 5); return filterArray; })() }} /* Verify the selected option and return the value*/ {{ (function() { if (Dropdown.selectedOptionValue === "1") { return "Option 1"; } else { return "Option 2"; } })() }} ``` 您可以透過幾個簡單的步驟建立從簡單的 CRUD 應用程式到複雜的多步驟工作流程的任何內容: 1. 與資料庫或 API 整合。 Appsmith 支援最受歡迎的資料庫和 REST API。 2. 使用內建小工具建立您的應用程式佈局。 3. 在編輯器中的任何位置使用查詢和 JavaScript 來表達您的業務邏輯。 4. Appsmith 支援使用 Git 進行版本控制,以使用分支來協作建立應用程式來追蹤和回滾變更。部署應用程式並分享:) ![應用史密斯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yltcrmuzwdoydrwyqjpp.png) 您可以閱讀[文件](https://docs.appsmith.com/)和[操作指南](https://docs.appsmith.com/connect-data/how-to-guides),例如如何將其連接到本機資料來源或\[如何與第三方工具整合\](與第三方工具整合)。 您可以自行託管或使用雲端。他們還提供[20 多個模板](https://www.appsmith.com/templates),以便您可以快速入門。一些有用的是: - [維修訂單管理](https://www.appsmith.com/template/Maintenance-Order-Management) - [加密即時追蹤器](https://www.appsmith.com/template/crypto-live-tracker) - [內容管理系統](https://www.appsmith.com/template/content-management-system) - [WhatsApp 信使](https://www.appsmith.com/template/whatsapp-messenger) Appsmith 在 GitHub 上擁有超過 31,000 顆星,發布了 200 多個版本。 {% cta https://github.com/appsmithorg/appsmith %} Star Appsmith ⭐️ {% endcta %} --- 11. [BlockNote](https://github.com/TypeCellOS/BlockNote) - 基於區塊(Notion 樣式)且可擴充的富文本編輯器。 -------------------------------------------------------------------------------------- ![區塊註釋](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eddx8cld0g492w3a8fjh.png) 人們常說,除非您正在學習新東西,否則不要重新發明輪子。 Blocknote 是開源的 Block 為基礎的 React 富文本編輯器。您可以輕鬆地將現代文字編輯體驗加入到您的應用程式中。 Blocknote 建構在 Prosemirror 和 Tiptap 之上。 它們有很多功能,如下所示。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9kd6xnkg9fa5j29frot.png) ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezuz7ywh6vefixmpeyzk.png) 您可以輕鬆自訂內建 UI 元件,或建立自訂區塊、內聯內容和樣式。如果您想更進一步,您可以使用額外的 Prosemirror 或 TipTap 外掛程式來擴充核心編輯器。 其他庫雖然功能強大,但通常具有相當陡峭的學習曲線,並且要求您自訂編輯器的每個細節。這可能需要數月的專門工作。 相反,BlockNote 只需最少的設定即可提供出色的體驗,包括現成的動畫 UI。 開始使用以下 npm 指令。 ``` npm install @blocknote/core @blocknote/react ``` 您可以這樣使用它。透過`useCreateBlockNote`鉤子,我們可以建立一個新的編輯器實例,然後使用`theBlockNoteView`元件來渲染它。 `@blocknote/react/style.css`也被匯入來新增編輯器的預設樣式和 BlockNote 匯出的 Inter 字體(可選)。 ``` import "@blocknote/core/fonts/inter.css"; import { BlockNoteView, useCreateBlockNote } from "@blocknote/react"; import "@blocknote/react/style.css"; export default function App() { // Creates a new editor instance. const editor = useCreateBlockNote(); // Renders the editor instance using a React component. return <BlockNoteView editor={editor} />; } ``` 您可以閱讀可用的[文件](https://www.blocknotejs.org/docs)和[ui 元件](https://www.blocknotejs.org/docs/ui-components)。 您應該嘗試一下,特別是因為它包含廣泛的功能,例如「斜線」選單、流暢的動畫以及建立即時協作應用程式的潛力。 ![削減](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0i7ob8nrhpl7r70k6527.png) 斜線選單 ![即時協作](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/id22qol6y0838zgwad3y.png) 即時協作 ![格式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d8maems8tfhtehw9lkol.png) 格式選單 他們還提供了[20 多個範例](https://www.blocknotejs.org/examples)以及預覽和程式碼,您可以使用它們來快速跟進。 ![例子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4uillknk0ogkcvpula7b.png) Blocknote 在 GitHub 上擁有超過 5,000 顆星,並有超過 1,500 名開發者在使用。 {% cta https://github.com/TypeCellOS/BlockNote %} 星 BlockNote ⭐️ {% endcta %} --- 12. [CopilotKit](https://github.com/CopilotKit/CopilotKit) - 在數小時內為您的產品提供 AI Copilot。 ------------------------------------------------------------------------------------- ![副駕駛套件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzuxjfog2ldam3csrl62.png) 將 AI 功能整合到 React 中是很困難的,這就是 Copilot 的用武之地。一個簡單快速的解決方案,可將可投入生產的 Copilot 整合到任何產品中! 您可以使用兩個 React 元件將關鍵 AI 功能整合到 React 應用程式中。它們還提供內建(完全可自訂)Copilot 原生 UX 元件,例如`<CopilotKit />` 、 `<CopilotPopup />` 、 `<CopilotSidebar />` 、 `<CopilotTextarea />` 。 開始使用以下 npm 指令。 ``` npm i @copilotkit/react-core @copilotkit/react-ui ``` Copilot Portal 是 CopilotKit 提供的元件之一,CopilotKit 是一個應用程式內人工智慧聊天機器人,可查看目前應用狀態並在應用程式內採取操作。它透過插件與應用程式前端和後端以及第三方服務進行通訊。 這就是整合聊天機器人的方法。 `CopilotKit`必須包裝與 CopilotKit 互動的所有元件。建議您也開始使用`CopilotSidebar` (您可以稍後切換到不同的 UI 提供者)。 ``` "use client"; import { CopilotKit } from "@copilotkit/react-core"; import { CopilotSidebar } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css"; export default function RootLayout({children}) { return ( <CopilotKit url="/path_to_copilotkit_endpoint/see_below"> <CopilotSidebar> {children} </CopilotSidebar> </CopilotKit> ); } ``` 您可以使用此[快速入門指南](https://docs.copilotkit.ai/getting-started/quickstart-backend)設定 Copilot 後端端點。 之後,您可以讓 Copilot 採取行動。您可以閱讀如何提供[外部上下文](https://docs.copilotkit.ai/getting-started/quickstart-chatbot#provide-context)。您可以使用`useMakeCopilotReadable`和`useMakeCopilotDocumentReadable`反應掛鉤來執行此操作。 ``` "use client"; import { useMakeCopilotActionable } from '@copilotkit/react-core'; // Let the copilot take action on behalf of the user. useMakeCopilotActionable( { name: "setEmployeesAsSelected", // no spaces allowed in the function name description: "Set the given employees as 'selected'", argumentAnnotations: [ { name: "employeeIds", type: "array", items: { type: "string" } description: "The IDs of employees to set as selected", required: true } ], implementation: async (employeeIds) => setEmployeesAsSelected(employeeIds), }, [] ); ``` 您可以閱讀[文件](https://docs.copilotkit.ai/getting-started/quickstart-textarea)並查看[演示影片](https://github.com/CopilotKit/CopilotKit?tab=readme-ov-file#demo)。 您可以輕鬆整合 Vercel AI SDK、OpenAI API、Langchain 和其他 LLM 供應商。您可以按照本[指南](https://docs.copilotkit.ai/getting-started/quickstart-chatbot)將聊天機器人整合到您的應用程式中。 基本概念是在幾分鐘內建立可用於基於 LLM 的應用程式的 AI 聊天機器人。 用例是巨大的,作為開發人員,我們絕對應該在下一個專案中嘗試使用 CopilotKit。 CopilotKit 在 GitHub 上擁有超過 4,200 個星星,發布了 200 多個版本,這意味著它們正在不斷改進。 {% cta https://github.com/CopilotKit/CopilotKit %} Star CopilotKit ⭐️ {% endcta %} --- 13.[自動完成](https://github.com/withfig/autocomplete)- IDE 風格的自動完成功能適用於您現有的終端和 shell。 ---------------------------------------------------------------------------------- ![自動完成](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8i8vcidsa023jf8r9382.png) [Fig](https://fig.io/?ref=github_autocomplete)讓命令列對個人來說更容易,對團隊來說更具協作性。 他們最受歡迎的產品是自動完成。當您鍵入時,Fig 會在現有終端機中彈出子命令、選項和上下文相關的參數。 最好的部分是您也可以將 Fig 的自動完成功能用於您自己的工具。以下是建立私人完成的方法: ``` import { ai } from "@fig/autocomplete-generators" ... generators: [ ai({ // the prompt prompt: "Generate a git commit message", // Send any relevant local context. message: async ({ executeShellCommand }) => { return executeShellCommand("git diff") }, //Turn each newline into a suggestion (can specify instead a `postProcess1 function if more flexibility is required) splitOn: "\n", }) ] ``` 您可以閱讀[Fig.io/docs](https://fig.io/docs/getting-started)了解如何開始。 他們在 GitHub 上有 24k+ Stars,這對於經常使用 shell 或終端機的開發人員來說非常有用。 {% cta https://github.com/withfig/autocomplete %} 星狀自動完成 ⭐️ {% endcta %} --- 14. [Tooljet](https://github.com/ToolJet/ToolJet) - 用於建立業務應用程式的低程式碼平台。 ---------------------------------------------------------------------- ![工具噴射器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xhipvjl2wnthjccgrpij.png) 我們都建立前端,但它通常非常複雜並且涉及很多因素。這樣可以省去很多麻煩。 ToolJet 是一個開源低程式碼框架,可以用最少的工程工作來建置和部署內部工具。 ToolJet 的拖放式前端建構器可讓您在幾分鐘內建立複雜的響應式前端。 您可以整合各種資料來源,包括PostgreSQL、MongoDB、Elasticsearch等資料庫;具有 OpenAPI 規範和 OAuth2 支援的 API 端點; SaaS 工具,例如 Stripe、Slack、Google Sheets、Airtable 和 Notion;以及 S3、GCS 和 Minio 等物件儲存服務來取得和寫入資料。一切 :) 這就是 Tooljet 的工作原理。 ![工具噴射器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6vv09z7ioma1ce2ttei.png) 您可以在 ToolJet 中開發多步驟工作流程以自動化業務流程。除了建置和自動化工作流程之外,ToolJet 還可以在您的應用程式中輕鬆整合這些工作流程。 ![工作流程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eh2vk3kih9fhck6okf67.png) 您可以閱讀此[快速入門指南](https://docs.tooljet.com/docs/getting-started/quickstart-guide),該指南向您展示如何使用 ToolJet 在幾分鐘內建立員工目錄應用程式。該應用程式將讓您透過漂亮的用戶介面追蹤和更新員工資訊。 查看可用[功能列表](https://github.com/ToolJet/ToolJet?tab=readme-ov-file#all-features),包括 45 多個內建響應式元件、50 多個資料來源等等。 您可以閱讀[文件](https://docs.tooljet.com/docs/)並查看[操作指南](https://docs.tooljet.com/docs/how-to/use-url-params-on-load)。 它們在 GitHub 上有 26k+ Stars,並且基於 JavaScript 建置。他們也獲得了 GitHub 的資助,從而建立了巨大的信任。 {% cta https://github.com/ToolJet/ToolJet %} Star ToolJet ⭐️ {% endcta %} --- 15. [Apitable](https://github.com/apitable/apitable) - 用於建立協作應用程式的 API 導向的低程式碼平台。 --------------------------------------------------------------------------------- ![有能力的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58syhvpb2fn6hhlyrtst.png) APITable 是一個面向 API 的低程式碼平台,用於建立協作應用程式,並表示它比所有其他 Airtable 開源替代品都要好。 有很多很酷的功能,例如: - 即時協作。 ![即時協作](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58kpvpab2nj92421yvy3.gif) - 您可以產生自動表單。 ![形式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0jo084gg0cd9xiud3nz3.gif) - 無限的跨錶連結。 ![交叉表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jnvb9sdp3uqrcn55hwug.gif) - API 第一個面板。 ![API第一個面板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7u48ue4rl0q41rhh6bif.gif) - 強大的行/列功能。 ![行列](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apxqwp84awdbj7cdw5yu.gif) 您可以閱讀完整的[功能清單](https://github.com/apitable/apitable?tab=readme-ov-file#-features)。 您可以嘗試[apitable](https://aitable.ai/)並在 apitable 的[live Gitpod demo](https://gitpod.io/#https://github.com/apitable/apitable)中查看該專案的演示。 您也可以閱讀[安裝指南](https://github.com/apitable/apitable?tab=readme-ov-file#installation),在本機或雲端運算環境中安裝 APITable。 {% cta https://github.com/apitable/apitable %} Star Apitable ⭐️ {% endcta %} --- 16. [n8n](https://github.com/n8n-io/n8n) - 工作流程自動化工具。 ----------------------------------------------------- ![n8n](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4pqsc84nhgj0b9dhfaxo.png) n8n 是一個可擴展的工作流程自動化工具。透過公平程式碼分發模型,n8n 將始終擁有可見的原始程式碼,可用於自託管,並允許您加入自訂函數、邏輯和應用程式。 每個開發人員都想使用的工具。自動化是生產力和簡單性的關鍵。 ![n8n](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxnp57kw5szbpj6mfs1p.png) n8n 基於節點的方法使其具有高度通用性,使您能夠將任何事物連接到任何事物。 有[400 多個集成選項](https://n8n.io/integrations),這幾乎是瘋狂的! 您可以看到所有[安裝](https://docs.n8n.io/choose-n8n/)選項,包括 Docker、npm 和自架。 開始使用以下命令。 ``` npx n8n ``` 此命令將下載啟動 n8n 所需的所有內容。然後,您可以透過開啟`http://localhost:5678`來存取 n8n 並開始建置工作流程。 在 YouTube 上觀看此[快速入門影片](https://www.youtube.com/watch?v=1MwSoB0gnM4)! {% 嵌入 https://www.youtube.com/watch?v=1MwSoB0gnM4 %} 您可以閱讀[文件](https://docs.n8n.io/)並閱讀本[指南](https://docs.n8n.io/try-it-out/),以便根據您的需求快速開始。 他們還提供初學者和中級[課程,](https://docs.n8n.io/courses/)以便輕鬆學習。 他們在 GitHub 上有 39k+ Stars,並提供兩個包供整體使用。 {% cta https://github.com/n8n-io/n8n %} 明星 n8n ⭐️ {% endcta %} --- 17. [DOMPurify](https://github.com/cure53/DOMPurify) - 一個僅限 DOM、超快、超級容忍 XSS 的 HTML 清理程式。 ---------------------------------------------------------------------------------------- ![DOM純化](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r846r2hmmw9d9wzvbocz.png) DOMPurify 是一款僅限 DOM、超快、超級容忍 XSS 的 HTML、MathML 和 SVG 清理工具。作為開發人員,我們的應用程式需要它來確保它們足夠安全。 DOMPurify 可以淨化 HTML 並防止 XSS 攻擊。 您可以向 DOMPurify 提供一個充滿髒 HTML 的字串,它將傳回一個包含乾淨 HTML 的字串(除非另有配置)。 DOMPurify 將刪除所有包含危險 HTML 的內容,從而防止 XSS 攻擊和其他惡意行為。這也太快了。 他們使用瀏覽器提供的技術並將其轉變為 XSS 過濾器。您的瀏覽器速度越快,DOMPurify 的速度就越快。 DOMPurify 使用 JavaScript 編寫,適用於所有現代瀏覽器(Safari (10+)、Opera (15+)、Edge、Firefox 和 Chrome - 以及幾乎所有使用 Blink、Gecko 或 WebKit 的其他瀏覽器)。它不會在 MSIE 或其他舊版瀏覽器上中斷。它根本什麼都不做。 開始使用以下 npm 指令。 ``` npm install dompurify npm install jsdom // or use the unminified development version <script type="text/javascript" src="src/purify.js"></script> ``` 您可以這樣使用它。 ``` const createDOMPurify = require('dompurify'); const { JSDOM } = require('jsdom'); const window = new JSDOM('').window; const DOMPurify = createDOMPurify(window); const clean = DOMPurify.sanitize('<b>hello there</b>'); ``` 如果您遇到問題,請參閱[文件](https://github.com/cure53/DOMPurify?tab=readme-ov-file#how-do-i-use-it)。他們已經記錄了使用腳本或在伺服器端執行它。 您可以看到一些 [純化樣品](https://github.com/cure53/DOMPurify?tab=readme-ov-file#some-purification-samples-please)並觀看[現場演示](https://cure53.de/purify)。 使用起來也非常簡單。 DOMPurify 於 2014 年 2 月啟動,同時版本已達 v3.1.0。 其中涉及到很多概念,我渴望探索它們。如果您有任何與此相關的令人興奮的事情,請告訴我。 我發現的另一個有用的替代方案是[validator.js](https://github.com/validatorjs/validator.js) 。 他們在 GitHub 上擁有超過 12,000 顆星,被超過 30 萬開發者使用,每週下載量超過 5,475,000 次,這使得他們非常可信。 {% cta https://github.com/cure53/DOMPurify %} 明星 DOMPurify ⭐️ {% endcta %} --- 18. [OpenDevin](https://github.com/OpenDevin/OpenDevin) - 更少的程式碼,更多的內容。 ----------------------------------------------------------------------- ![奧彭文](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4on63bb02g4x4ny8gtcn.png) ![奧彭文](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0yepod2rye2jk5r12dt.png) 這是一個開源專案,旨在複製 Devin,一名自主人工智慧軟體工程師,能夠執行複雜的工程任務並在軟體開發專案上與用戶積極協作。該計畫致力於透過開源社群的力量複製、增強和創新 Devin。 只是想讓你知道,這是在德文被介紹之前。 您可以閱讀帶有要求的[安裝說明](https://github.com/OpenDevin/OpenDevin?tab=readme-ov-file#installation)。 他們使用 LiteLLM,因此您可以使用任何基礎模型來執行 OpenDevin,包括 OpenAI、Claude 和 Gemini。 如果您想為 OpenDevin 做出貢獻,您可以查看 [演示](https://github.com/OpenDevin/OpenDevin/blob/main/README.md#opendevin-code-less-make-more)和[貢獻指南](https://github.com/OpenDevin/OpenDevin/blob/main/CONTRIBUTING.md)。 它在 GitHub 上擁有超過 10,700 個 Star,並且正在快速成長。 {% cta https://github.com/OpenDevin/OpenDevin %} 明星 OpenDevin ⭐️ {% endcta %} --- 19. [Amplification-](https://github.com/amplication/amplication)後端開發平台。 ----------------------------------------------------------------------- ![放大](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w7yi3kvwrniredj4lp5r.png) 我想我們都同意,如果我們要達到標準,設定後端並從頭開始是很困難的。 我知道 Appwrite 和 Supabase 在功能方面要好得多,但每種情況都是獨特的,這可能會點擊而不是那些。 ![放大](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d5wud5sef1lpwzi8zdq2.png) Amplication 旨在徹底改變可擴展且安全的 Node.js 應用程式的建立。 他們消除了重複的編碼任務,並提供可立即投入生產的基礎設施程式碼,這些程式碼根據您的規範精心定制,並遵循行業最佳實踐。 其用戶友好的介面促進了 API、資料模型、資料庫、身份驗證和授權的無縫整合。 Amplication 建立在靈活的、基於插件的架構之上,允許輕鬆定製程式碼並提供大量整合選項。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3lc27fgvk8yearir13z.png) ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zgix42tplg9hwko3a7u.png) 您可以閱讀[文件](https://docs.amplication.com/)並查看可用的[社群插件](https://docs.amplication.com/plugins-list/)清單。 他們還提供了[逐步教程](https://docs.amplication.com/tutorials/#step-by-step-tutorials),以幫助您使用 Angular 或 React 建立應用程式。 Amplification 在 GitHub 上擁有超過 13k 顆星,發布了 170 多個版本,因此它們不斷發展。 {% cta https://github.com/amplication/amplication %} 星狀放大 ⭐️ {% endcta %} --- 20. [Embla 旋轉木馬](https://github.com/davidjerleke/embla-carousel)-。 ------------------------------------------------------------------ ![Embla 旋轉木馬](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aj2expoo15t6xhgcm3hi.png) 我們都在應用程式中使用輪播,有時會切換到網格佈局,因為輪播並不總是好看,但這會改變您對輪播的看法。 我之所以了解 Embla Carousel,是因為 Shadcn/ui 在他們的 UI 系統中使用了它。 Embla Carousel 是一個簡單的輪播庫,具有出色的流暢運動和出色的滑動精度。它與庫無關、無依賴性且 100% 開源。 如果您不確定,我建議您查看[基本的實例](https://www.embla-carousel.com/examples/predefined/)。 ![例子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/paqu3ozlvhk5km5746pe.png) ![例子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8qxfvmn83et836zon4ua.png) ![例子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abukp6j29gsaade7eci8.png) ![例子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/locv2kqksvpl0ha8a9te.png) 我最喜歡的是視差,它可以提供非常酷且平滑的過渡。 它們支援 CDN、react、Vue、Svelte 和 Solid。 開始使用以下 npm 指令 (react)。 ``` npm install embla-carousel-react --save ``` 您可以這樣使用它。 Embla Carousel 提供了方便的 useEmblaCarousel 鉤子,用於與 React 無縫整合。最小的設定需要一個溢出包裝器和一個滾動容器。 `useEmblaCarousel`掛鉤將 Embla Carousel 選項作為第一個參數。您還需要使用 useEffect 存取 API ``` import React, { useEffect } from 'react' import useEmblaCarousel from 'embla-carousel-react' export function EmblaCarousel() { const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false }) useEffect(() => { if (emblaApi) { console.log(emblaApi.slideNodes()) // Access API } }, [emblaApi]) return ( <div className="embla" ref={emblaRef}> <div className="embla__container"> <div className="embla__slide">Slide 1</div> <div className="embla__slide">Slide 2</div> <div className="embla__slide">Slide 3</div> </div> </div> ) } ``` 他們還提供了一組插件,您可以加入它們以實現自動播放等額外功能。 ``` npm install embla-carousel-autoplay --save ``` ``` import React, { useEffect } from 'react' import useEmblaCarousel from 'embla-carousel-react' import Autoplay from 'embla-carousel-autoplay' export function EmblaCarousel() { const [emblaRef] = useEmblaCarousel({ loop: false }, [Autoplay()]) return ( <div className="embla" ref={emblaRef}> <div className="embla__container"> <div className="embla__slide">Slide 1</div> <div className="embla__slide">Slide 2</div> <div className="embla__slide">Slide 3</div> </div> </div> ) } ``` 尋找[插件的完整列表](https://www.embla-carousel.com/plugins/),包括自動滾動和滾輪手勢。 您可以閱讀有關如何實現不同部分(例如斷點或上一個/下一個按鈕)的[文件](https://www.embla-carousel.com/get-started/)和[指南](https://www.embla-carousel.com/guides/)。 最讓我驚訝的部分是,您可以使用他們的[生成器](https://www.embla-carousel.com/examples/generator/)使用您自己的一組選項來產生自訂輪播。 ![發電機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wlq7l44bwl681644xf3.png) ![發電機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2r1y3kr926h87clbqosw.png) 它們在 GitHub 上擁有 4.9K 顆星,並被超過 26000 名開發人員使用。如果我必須使用一個,我肯定會使用這個。 {% cta repo %} 明星名稱 ⭐️ {% endcta %} --- [21.Documenso](https://github.com/documenso/documenso) - 開源 DocuSign 替代方案。 -------------------------------------------------------------------------- ![文獻](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cttvudzx02wqsu04qt8v.gif) 如果您從事自由職業並需要簽署協議,這是最佳選擇。我們不應該浪費時間,而應該專注於重要的事情。 以數位方式簽署文件應該既快速又簡單,並且應該成為全球簽署的每個文件的最佳實踐。 如今,這在技術上相當簡單,但它也為每個簽名引入了一個新方:簽名工具提供者。 此專案的技術堆疊包括 TypeScript、Next.js、Prisma、Tailwind CSS、shadcn/ui、NextAuth.js、react-email、tRPC、@documenso/pdf-sign、React-PDF、PDF-Lib、Stripe 和韋爾塞爾。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ziz58jqi2qtl6p6sx62w.png) ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f8zrln5zlywkb6k10n09.png) 免費套餐可讓您每月簽署 10 份文件,這已經足夠了。 您可以閱讀本文以了解如何[設定專案](https://github.com/documenso/documenso?tab=readme-ov-file#developer-setup)。 您可以閱讀[文件](https://github.com/documenso/documenso?tab=readme-ov-file#developer-quickstart)。 我知道這不是一個非常廣泛的用例,但您仍然可以從程式碼中學習,因此這始終是一個優點。 他們在 GitHub 上擁有超過 5800 顆星,並且發布了`v1.5`版本。 不是很流行但非常有用。 {% cta https://github.com/documenso/documenso %} 明星 documenso ⭐️ {% endcta %} --- 哇! 這花了我很長很長的時間來寫。我希望你喜歡它。 我知道人工智慧工具有時太多了,但我們應該使用它們來讓我們的工作更輕鬆。我的意思是,這就是我們所做的正確的事情,讓生活變得更輕鬆。 我嘗試涵蓋廣泛的工具。 不管怎樣,請讓我們知道您的想法以及您計劃在您的工作流程中使用這些工具嗎? 祝你有美好的一天!直到下一次。 我建立了很多技術內容,因此如果您能在 Twitter 上關注我來支持我,我將不勝感激。 |如果你喜歡這類東西, 請關注我以了解更多:) | [![用戶名 Anmol_Codes 的 Twitter 個人資料](https://img.shields.io/badge/Twitter-d5d5d5?style=for-the-badge&logo=x&logoColor=0A0209)](https://twitter.com/Anmol_Codes) [![用戶名 Anmol-Baranwal 的 GitHub 個人資料](https://img.shields.io/badge/github-181717?style=for-the-badge&logo=github&logoColor=white)](https://github.com/Anmol-Baranwal) [![用戶名 Anmol-Baranwal 的 LinkedIn 個人資料](https://img.shields.io/badge/LinkedIn-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/Anmol-Baranwal/) | |------------|----------| 關注 Taipy 以了解更多此類內容。 {% 嵌入 https://dev.to/taipy %} --- 原文出處:https://dev.to/taipy/21-tools-to-take-your-dev-skills-to-the-moon-53mf

🥇第一個讓你視覺化你的 React/NodeJS 應用程式的框架🤯

視覺化獎品 ===== 想像一下,您正在開發全端應用程式,並且想要實作一項新功能。這是一個複雜的過程,因此您拿出筆和紙,或轉到[tldraw](https://www.tldraw.com/) ,並開始繪製應用程式目前的樣子的圖表,從資料庫到伺服器,再到客戶端。 但是,如果您有一個**工具可以為您可視化整個全端應用程式,**那該有多酷?如果該工具有潛力做更偉大的事情,例如立即為您在整個堆疊中加入有用的功能,或者與人工智慧和大型語言模型配合用於程式碼生成,會怎麼樣? 嗯,這個想法已經成為現實,它被稱為`wasp studio` 。在這裡查看: {% 嵌入 https://youtu.be/SIAhAvDEoMw %} 黃蜂工作室是這個名字 ========== 首先, [Wasp 是一個具有超能力的全端 React、NodeJS 和 Prisma 框架](https://github.com/wasp-lang/wasp)。它[在 GitHub 上的星數剛剛突破 10,000 個](https://github.com/wasp-lang/wasp),並已被用來建立超過 50,000 個專案。 為什麼它很特別?它使用設定檔和自己的編譯器來為您管理一系列功能,例如身份驗證、cron 作業、路由和電子郵件發送,為您節省大量時間並讓您專注於有趣的事情。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ugko7ycnjkfwwuool3vj.png) [Wasp 的中央設定檔](https://wasp-lang.dev/docs)(充當應用程式的一組指令)和編譯器的組合還允許 Wasp 透過單行命令為您執行一系列複雜且有趣的任務,例如: - 全端部署 → `wasp deploy` - 使用 Docker 啟動開發資料庫 → `wasp start db` - 建立整個範例應用程式,例如 SaaS 入門 → `wasp new` - 為您提供整個全端應用程式的視覺示意圖 → `wasp studio` 如果你想親自嘗試一下,你所要做的就是: 1. 使用`curl -sSL https://get.wasp-lang.dev/installer.sh | sh`[安裝Wasp](https://wasp-lang.dev/docs/quick-start) https://get.wasp-lang.dev/installer.sh | `curl -sSL https://get.wasp-lang.dev/installer.sh | sh` 2. 使用`wasp new -t todo-ts`在 TypeScript 中建立一個新的待辦事項應用程式 3. 然後要獲得下面螢幕截圖中的視覺化工具,請執行`wasp studio` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l34peqp9t60ftu3d1g32.png) 讓我們快速分解一下我們在這裡看到的內容: - 中間藍色的主應用程式元件顯示了應用程式的名稱、我們正在使用的資料庫及其身份驗證方法 - 左邊的黃色實體向我們展示了我們定義的資料庫模型 - 最左邊的紅色和綠色的操作和查詢向我們展示了作用於資料庫實體的伺服器操作 - 右側的路由和頁面向我們展示了 React 元件所在的位置以及它們是否需要授權(以 🔒 表示) 如果您想知道更複雜的應用程式會是什麼樣子,以下是在[Open SaaS(我們的免費開源 SaaS 樣板啟動器)](https://OpenSaaS.sh)上執行時的樣子。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scdj3khkybrk30579hij.png) 這樣做的好處是,我們可以概覽所有資料庫實體以及它們所依賴的伺服器功能(也稱為「操作」)。在上圖的左上角,您甚至會看到一個 cron 作業`dailyStatsJob` ,它每小時執行一次 ( `0 * * * *` )。 例如,這使得開發後端邏輯變得輕而易舉,特別是如果您不是經驗豐富的後端開發人員。考慮一下讓您到達那裡的程式碼就像這樣簡單: ``` job dailyStatsJob { executor: PgBoss, perform: { fn: import { calculateDailyStats } from "@src/calculateDailyStats" }, schedule: { cron: "0 * * * *" }, entities: [User, DailyStats, Logs, PageViewSource] } ``` 是的,這就是您在伺服器上取得非同步作業所需的全部內容。現在你的`calculateDailyStats`函數將每小時執行一次——不需要第三方服務🙂 這是派對把戲嗎! ======== 好的。您可能會想,視覺化工具很酷,但它真的有用途嗎,還是只是一個不錯的「派對把戲」?老實說,*目前*這只是派對上的把戲。 但這是一個具有**很大潛力的**派對技巧。讓我解釋。 ![https://media2.giphy.com/media/WsNIwVzVEZKnhkEBc1/giphy.gif?cid=7941fdc6akodg2p40uvpuw0ocqn3b0ek94bpdjudqn428rc3&ep=v1_gifs_search&ct=gifm&rid;](https://media2.giphy.com/media/WsNIwVzVEZKnhkEBc1/giphy.gif?cid=7941fdc6akodg2p40uvpuw0ocqn3b0ek94bpdjudqn428rc3&ep=v1_gifs_search&rid=giphy.gif&ct=g) 當然,您可以以當前形式使用它來更好地了解您的應用程式,或者計劃一些新功能,但將來您將能夠使用它做更多事情,例如: - 只需點擊幾下即可新增新的身份驗證方法 - 透過伺服器操作快速搭建功能性客戶端元件 - 立即為您的整個應用程式新增新的全端功能,例如 Stripe 支付 - 與大型語言模型 (LLM) 輕鬆協作,即時產生功能! 同樣,這一切都是可能的,因為中央設定檔充當了應用程式的一組「指令」。透過這個文件,Wasp 確實知道您的應用程式是如何建置的,因此它可以輕鬆地以視覺形式向您顯示您的應用程式。它還使您可以更輕鬆地以令人興奮的新方式建立應用程式的新部分。 看看下面 Wasp 設定檔中的另一個片段。這就是為您的網頁應用程式獲得全端身份驗證所需的一切!這是因為 Wasp 編譯器正在為您管理樣板程式碼。 ``` app todoVisualize { title: "todo-visualize", auth: { userEntity: User, methods: { usernameAndPassword: {}, google: {}, }, } } entity User {=psl id Int @id @default(autoincrement()) tasks Task[] psl=} ``` 一張圖值一千枚代幣 ========= 現在我們已經了解了 Wasp 的工作原理,接下來讓我們更深入地探討 Wasp 和`wasp studio`與 LLM 結合作為未來用例的潛力。 目前,人工智慧輔助程式碼產生的最大限制之一是上下文。現在,我們都知道LLM喜歡產生幻覺,[但他們的「記憶力」也很差](https://glazkov.com/2023/05/18/ai-developer-experience-asymptotes/)。因此,如果您試圖讓他們為您的應用程式建立功能,以確保新功能適用於您的應用程式,您必須不斷「提醒」他們應用程式的工作方式、結構和依賴項。 但是,透過 Wasp 的設定檔(本質上只是全端應用程式及其功能的更高層次抽象),我們為法學碩士提供了成功為手頭上的應用程式建立新功能所需的上下文。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtk0u2g8cxtymf713om5.png) 這非常有效,因為我們不僅為 LLM 提供了所需的上下文,而且 Wasp 的編譯器還承擔了為我們編寫大部分樣板文件的責任(謝謝,朋友),為 LLM 提供了更簡單的任務的寫作,例如: - 修改Wasp設定檔 - 在伺服器上執行的函數 - 使用 Wasp 程式碼的 React 元件 從這個意義上說,法學碩士必須掌握的上下文要少得多,並且其糟糕的記憶力是可以原諒的,因為黃蜂是確保一切都很好地粘在一起的人! 為了進一步說明這一點,讓我們再看看上面介紹的授權碼: ``` auth: { userEntity: User, methods: { usernameAndPassword: {}, google: {}, }, ``` 請考慮此程式碼在整個堆疊中提供身份驗證。因此,您不僅可以在伺服器上獲得為您產生和管理的所有身份驗證邏輯,還[可以在客戶端上獲得可供您使用的 UI 元件和身份驗證掛鉤](https://wasp-lang.dev/docs/auth/ui)! ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8agd8cch9vtnx9a85xyr.gif) 另一方面,如果沒有 Wasp 給我們的抽象,我們最終只能依靠 LLM,它的記憶力很差,容易產生幻覺,一遍又一遍地為我們編寫一堆樣板文件,如下圖所示的 JWT 中間件: ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1uywfi0ww42r0rntez05.png) 法學碩士非常擅長單獨編寫樣板程式碼、重複性任務。但期望他們將其作為有凝聚力的全端應用程式的一部分來完成,這意味著我們有更多的表面積來暴露可能的錯誤。 另一方面,對於 Wasp,**只需幾行程式碼**。如果人類寫起來很容易,那麼法學碩士也很容易寫。 順便說一句,這不僅為我們省去了很多麻煩,還可以為我們節省很多錢,因為[AI 生成的 Wasp 應用程式使用的令牌(即輸入和輸出文字)比同類工具少約 10-40 倍](https://wasp-lang.dev/blog/2023/07/17/how-we-built-gpt-web-app-generator),因此他們以一小部分的價格產生程式碼。 幫助計算機幫助我們 ========= 隨著技術的不斷改進,專業知識較少的用戶將更容易進行編程,因為更多的專業知識將嵌入我們的工具中。 但這意味著我們需要抽象,使我們人類能夠輕鬆地使用這些工具。 就像上面的 LLM 範例一樣,我們可以建立工具,讓人工智慧一遍又一遍地為我們編寫所有樣板文件,但問題是,當他們*可以*做其他更有用的事情時,我們*是否應該*讓他們這樣做?法學碩士擅長快速產生大量新想法。為什麼不建構讓人工智慧在這方面幫助我們的工具呢? 這正是我們對`wasp studio`未來的規劃。一個視覺化介面,讓您在有或沒有法學碩士的幫助下拼湊應用程式的新功能,然後快速對這些不同的想法進行 A/B 測試。 {% 嵌入 https://www.youtube.com/watch?v=ERwtJtNQL28 %} 不僅如此,我們還可以使用一個抽象來與不太懂科技的使用者輕鬆協作。在這些工具的幫助下,甚至您的產品經理也可以從中獲得樂趣並開始建立新功能以供開發人員簽署。 Wasp 及其功能集的強大之處在於,我們獲得的程式碼對於人和機器來說都**更容易閱讀、除錯和維護**。與視覺化介面相結合,我們將能夠快速迭代整個堆疊中的新功能,將其用作我們自己的規劃和編排工具,或者作為更輕鬆地除錯和監督法學碩士可能為我們所做的工作的一種方式。 這是對 Web 開發未來的令人興奮的展望,這些新工具將帶來許多利用它們的新方法。 您認為像`wasp studio`這樣的工具有哪些使用方法?您能想像人工智慧與人類協作領域即將出現哪些其他發展嗎?請在下面的評論中告訴我們,感謝您的閱讀! --- 原文出處:https://dev.to/wasp/the-first-framework-that-lets-you-visualize-your-reactnodejs-app-1d63

比較前 3 個 Javascript 測試框架

### 介紹 每個開發人員都知道編寫測試很重要,但是當涉及 JavaScript 測試時,[有許多框架](https://en.wikipedia.org/wiki/List_of_unit_testing_frameworks#JavaScript)可供選擇。那麼,下次啟動專案時,如何知道該選擇哪個框架呢? 在本文中,我將比較三個流行的框架[——Mocha](https://github.com/mochajs/mocha) 、 [Jest](https://jestjs.io/)和[Jasmine——](https://jasmine.github.io/)以幫助您做出更明智的決定。我將了解這些框架如何處理常見的測試場景,例如模擬函數和非同步呼叫。我將展示如何實施這些測試的範例。我還將討論一些最佳實踐以及為什麼應該使用測試框架。 ### 三個框架 Mocha、Jest 和 Jasmine 都是流行的框架,擁有有用的社群和多年的開發經驗。總體而言,Mocha 和 Jasmine 更適合測試後端,因為它們最初是為 Node 應用程式建立的;因此,他們比 Jest 擁有更多可用的後端工具和文件。對於前端來說,你的測試框架的選擇通常會受到你的前端框架的影響。 Jasmine 更常與 Angular 一起使用,而 Jest 是 Facebook 建立的與 React 一起使用。 無論您選擇哪一個框架,這三個框架都是成熟且有效的選擇。最好的選擇實際上取決於您的專案需求和您的個人喜好。為了幫助您決定哪個框架最適合您,讓我們看看每個框架在一些常見測試場景下的實際應用。 ### 模擬函數 您在應用程式中測試的最常見的事情是函數呼叫。為您的函數編寫可靠的測試非常重要,因為無論測試框架如何,糟糕的測試都可能觸發真實的函數,從而導致記憶體洩漏和瀏覽器中的意外行為。 測試函數呼叫時,您的測試應該: - 專注於函數呼叫的預期結果,而不是函數的實現 - 永遠不要更改應用程式的狀態 - 使用模擬函數,這樣您就不必擔心測試中出現意外的副作用 以下是如何在 Jest、Jasmine 和 Mocha 中模擬前端函數呼叫的範例。 **是** 如果您使用 React,Jest 不需要太多依賴項(如果有的話)。但是,如果您不想深入[研究react-testing-library](https://testing-library.com/docs/react-testing-library/intro) ,Jest也與一些特定於測試的函式庫(例如Enzyme)相容。此範例使用[Enzyme](https://enzymejs.github.io/enzyme/)對元件進行淺層渲染,按一下按鈕,然後查看模式是否已開啟。在這裡,您必須渲染元件並模擬單擊,以查看您的模擬函數呼叫是否按預期開啟模式。 ![Jest 中的模擬函數呼叫](https://39296.cdn.cke-cs.com/xnX5w1TWo7hQQOywFbkx/images/b0bfcd5cf08dd70522fc4b8d5f1b9f3995a962452ddf5634.png/w_752) *Jest 中的模擬函數呼叫* **茉莉花** 在所有框架中,Jasmine 更適合 Angular。但是,一旦為 React 設定了所有正確的配置和幫助程式文件,編寫測試就不需要太多程式碼。 在這裡您可以看到使用[ReactTestUtils](https://reactjs.org/docs/test-utils.html)代替 Enzyme 或 React-testing-library(以顯示其他可用工具之一)。 ReactTestUtils 使得在前端使用 Jasmine 變得更加容易,並保持較低的程式碼行數。但是,您需要了解 ReactTestUtils API。 ![Jasmine 中的模擬函數呼叫](https://39296.cdn.cke-cs.com/xnX5w1TWo7hQQOywFbkx/images/480043c0f2668f7edac640818492acfadbfa8f06a0ec858e.png/w_701) *Jasmine 中的模擬函數呼叫* **摩卡** Mocha 為您提供了更多的靈活性,因為它通常用於前端和後端測試。您必須匯入幾個庫,例如[Chai](https://www.chaijs.com/) ,才能使其與 React 一起使用。雖然 Chai 沒有直接連接到 React,但它是 Mocha 中最常用的斷言函式庫。安裝這些依賴項後,就類似於使用 Jest。此範例結合使用 Enzyme 進行渲染和 Chai 進行斷言。 ![Mocha 中的模擬函數呼叫](https://39296.cdn.cke-cs.com/xnX5w1TWo7hQQOywFbkx/images/1a0a8d5b9414903de0665907e074d79879deb18fca3901bb.png/w_821) *Mocha 中的模擬函數呼叫* #### 我的看法 對於模擬函數,這三個函式庫在程式碼行數和複雜性方面都非常相似。我建議只使用最適合您的堆疊的程式庫:Jest for React、Jasmine for Angular 和 Mocha(如果您也在後端使用 Mocha 並且希望保持一致)。 ### 模擬資料 後端測試與前端測試一樣棘手。對於處理資料尤其如此,因為您不希望測試將資料插入真實資料庫中。如果您不小心,這種危險的副作用很容易潛入您的測試套件中。這就是為什麼使用模擬資料設定測試資料庫是最佳實踐的原因。 當您使用模擬資料時,您可以: - 準確地看到錯誤發生的位置,因為您知道期望的值是什麼 - 類型檢查您的後端響應並確保響應不會洩露真實資料 - 更快發現錯誤 您會經常遇到模擬資料以在請求中發送的情況,而這三個框架都支援這種情況。以下是這三個框架如何實現模擬資料的範例。 **是** 在此 Jest 測試中需要注意的最重要的事情是如何檢查資料是否已成功傳遞到 API 或資料庫。最後有幾個 Expect() 匹配器,它們的順序很重要。在發送模擬資料後,您必須準確地告訴 Jest 您希望找到什麼。這裡使用[supertest](https://www.npmjs.com/package/supertest)函式庫來使用假資料發出模擬 post 請求。 ![在 Jest 後端測試中處理資料](https://39296.cdn.cke-cs.com/xnX5w1TWo7hQQOywFbkx/images/39d0b290154eb4dd1a79e0a2a96f8bfeadcdd9a1fa5dd2ec.png/w_559) *在 Jest 後端測試中處理資料* **茉莉花** 雖然編寫良好的後端 Jasmine 測試需要更多程式碼,但您可以控制建立和重置資料的方式和時間。 Jasmine 還具有內建工具,用於在測試的其他部分引用模擬資料。此範例使用[請求](https://www.npmjs.com/package/request)庫來處理模擬發布資料請求。 ![在 Jasmine 後端測試中處理資料](https://39296.cdn.cke-cs.com/xnX5w1TWo7hQQOywFbkx/images/6f7f5e5070d8c2106f7b7264af5e3f8d38c342ddec26e9e5.png/w_638) *在 Jasmine 後端測試中處理資料* **摩卡** 在所有框架中,Mocha 需要最多的依賴來處理模擬資料和請求。您可能需要使用[chai-http](https://www.app.devspotlight.com/stories/draft/Comparing-the-top-3-Javascript-testing-frameworks)設定一個模擬伺服器來執行請求,而不是像其他伺服器一樣模擬請求和回應。 Mocha 確實有很好的內建工具,但需要更多時間才能上手。使用 Chai 及其相關函式庫是常見的做法,如下例所示: ![在 Mocha 後端測試中處理資料](https://39296.cdn.cke-cs.com/xnX5w1TWo7hQQOywFbkx/images/e9535c9618549c6149ee5ca2c8668a104cf61b433709d20f.png/w_507) *在 Mocha 後端測試中處理資料* #### 我的看法 後端測試是 Mocha 和 Jasmine 最強的地方。它們是為測試 Node 應用程式而建構的,這一點在它們的工具中得到了體現。它們使您可以透過框架中包含的選項和功能進行更精細的控制。如果您願意花時間加入一些可用的庫,Jest 仍然是一個不錯的選擇。 ### 模擬異步呼叫 眾所周知,非同步程式碼會引起問題,因此此處的測試尤其重要。您不僅必須注意自己程式碼中的非同步為,而且許多進入生產的錯誤可能來自意外的非同步來源,例如第三方服務。當您編寫具有異步行為的測試時,請盡量避免觸發真正的函數呼叫,因為測試的非同步呼叫與實際程式碼的執行重疊。 所有測試框架都為您提供了編寫非同步程式碼的多種選項。如果您的程式碼使用回調,那麼您的測試就可以使用回呼。如果可以選擇,請考慮使用[async/await 模式](https://javascript.info/async-await)。它使您的程式碼更具可讀性,並幫助您快速找到測試的問題所在。 [Promise](https://javascript.info/promise-basics)也是編寫非同步測試的選擇。如果您正在使用不支援非同步/等待的舊程式碼,請考慮使用這些。但是,請確保它們按照您在生產中期望的順序執行。在整個執行過程中檢查您的值可以幫助捕捉奇怪的行為。 以下是 JavaScript 測試框架中的非同步測試範例。 **是** 儘管使用Jest 編寫後端測試很簡單,但由於它最初是為了與React 一起使用而建立的,因此您最終可能會花一些時間閱讀文件並安裝第三方庫,因為它的大多數工具都是特定於前端的。但 Jest 確實可以處理您需要處理的任何格式的非同步呼叫,例如回呼或 Promises。此 async/await 呼叫的工作方式與其他 JavaScript 程式碼中的工作方式相同。 ![使用 async/await 開玩笑非同步呼叫](https://39296.cdn.cke-cs.com/xnX5w1TWo7hQQOywFbkx/images/0f4f8ad7e352e46c4e933bab0e365df9e5aca5084b02d0fb.png/w_498) *使用 async/await 開玩笑非同步呼叫* **茉莉花** Jasmine 最初是為 Node.js 建立的,因此它有很多內建功能。但是,在執行測試之前和之後可能需要一些設定。例如,您可以在此處看到,您應該在 beforeAll 方法中處理非同步呼叫,以防止稍後的測試中產生殘留影響。 ![使用 async/await 進行 Jasmine 非同步呼叫](https://39296.cdn.cke-cs.com/xnX5w1TWo7hQQOywFbkx/images/fdb2d7178a6235735d656b013846daf7dba63b525e15c479.png/w_810) *使用 async/await 進行 Jasmine 非同步呼叫* **摩卡** 在這裡您可以看到用於處理返回承諾的完成方法。它使用與前面的 Mocha 範例相同的 chai-http 庫。這是在 Mocha 測試中編寫的非同步呼叫的常見方式。您可以在 Mocha 中使用 Promises 或非同步/等待模式。 ![使用 async/await 進行 Mocha 非同步呼叫](https://39296.cdn.cke-cs.com/xnX5w1TWo7hQQOywFbkx/images/fc2d3391bc3492c18a966e80a6a2326f7ff15ef26c97b0c0.png/w_528) *使用 async/await 進行 Mocha 非同步呼叫* #### 我的看法 對於後端測試,Jasmine 可以輕鬆處理非同步方法並且開箱即用,這將是我的首選。 Mocha 和 Jest 也很有用,儘管它們需要更多地搜尋文件才能找到您需要的內容。 ### 模擬渲染元件 另一個重要且常見的測試是確保渲染的元件在預期時可用。和以前一樣,您通常會看到 Jest 與 React 一起使用,Jasmine 與 Angular 一起使用,但您可以在任何前端程式庫上使用這三個框架中的任何一個。 渲染元件可能是一項昂貴的任務,具體取決於渲染的深度。有些開發人員喜歡使用快照測試,它保存代表 UI 當前狀態的檔案。其他人則喜歡模擬渲染的元件。當您尋找 UI 中的變更時,快照更有用,而當您想要查看元件是否按預期工作時,渲染更有用。兩種方法都很有用。 **是** 正如我之前提到的,Jest 是為 React 建置的,因此您無需導入任何特殊的庫來進行渲染測試。這使得這些測試變得簡單並節省了依賴項的空間。 [ReactDOM](https://reactjs.org/docs/react-dom.html)在許多 React 專案中都很常見,並且附帶了檢查基本渲染所需的方法,如下例所示: ![Jest 框架中的 React 渲染測試](https://39296.cdn.cke-cs.com/xnX5w1TWo7hQQOywFbkx/images/bb94ca1748e993345206d48020127b569c3ddb726f8bb83a.png/w_515) *Jest 框架中的 React 渲染測試* **茉莉花** 設定 Jasmine 來進行 React 渲染測試比看起來更困難;它涉及重要的初始設定。 [Angular 團隊](https://angular.io/guide/testing)使用並推薦[Karma](https://www.npmjs.com/package/karma-jasmine)和 Jasmine 來測試元件。下面的範例用於測試 Angular 元件。您必須匯入要測試的元件,並且可以使用 Angular 隨附的 @angular/core/testing 來設定元件的環境,然後再嘗試渲染該元件並檢查它是否可用。 ![Jasmine框架中的Angular渲染測試](https://39296.cdn.cke-cs.com/xnX5w1TWo7hQQOywFbkx/images/47893f0aa0a46255cd976782196aeae45bee362ea9ea2d29.png/w_577) *Jasmine框架中的Angular渲染測試* **摩卡** 您通常會看到[Enzyme](https://enzymejs.github.io/enzyme/)和 Chai 與 Mocha 一起用於前端測試,並且測試 React 渲染沒有任何不同。一旦匯入了所需的特定方法(例如shallow 和expect),您將能夠編寫與其他框架類似的測試。下面的範例利用了 Enzyme 的淺層渲染和 Chai 的斷言。 ![Mocha框架中的React渲染測試](https://39296.cdn.cke-cs.com/xnX5w1TWo7hQQOywFbkx/images/705c430a50995cd2c5935a795c2f697f19b2eda62fab47dd.png/w_559) *Mocha框架中的React渲染測試* #### 我的看法 渲染元件的最佳實踐是僅使用為您的前端庫推薦的測試框架。使用附帶安裝的工具,您無需處理設定錯誤。如果可能,請嘗試使用淺渲染和快照來節省測試時間並專注於渲染元件的核心功能。 ### 結論 希望您現在對這三個流行框架之間的差異有了更好的了解。正如我所提到的,無論您選擇哪種框架,這三個框架都是成熟且有效的選擇,並且可以為您工作,這取決於您的專案的需要和您的偏好。現在您已準備好接受測試! --- 原文出處:https://dev.to/heroku/comparing-the-top-3-javascript-testing-frameworks-2cco

使用 AI-copilot(Next.js、gpt4、LangChain 和 CopilotKit)建立電子表格應用程式

**長話短說** -------- 在本文中,您將學習如何建立人工智慧驅動的電子表格應用程式,該應用程式允許您使用簡單的英語命令執行各種會計功能並輕鬆與資料互動。 我們將介紹如何: - 使用 Next.js 建立 Web 應用程式, - 使用 React Spreadsheet 建立電子表格應用程式,以及 - 使用 CopilotKit 將 AI 整合到軟體應用程式中。 - 讓電子表格更容易使用、更有趣 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ruxylrd07dga5ngw98np.gif) --- CopilotKit:建構應用內人工智慧副駕駛的框架 ========================== CopilotKit是一個[開源的AI副駕駛平台](https://github.com/CopilotKit/CopilotKit)。我們可以輕鬆地將強大的人工智慧整合到您的 React 應用程式中。 建造: - ChatBot:上下文感知的應用內聊天機器人,可以在應用程式內執行操作 💬 - CopilotTextArea:人工智慧驅動的文字字段,具有上下文感知自動完成和插入功能📝 - 聯合代理:應用程式內人工智慧代理,可以與您的應用程式和使用者互動🤖 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3us3vc140aun0dvrdof.gif) {% cta https://github.com/CopilotKit/CopilotKit %} Star CopilotKit ⭐️ {% endcta %} (請原諒 AI 的拼字錯誤並給 CopilotKit 加上星號:) 現在回到文章! --- 先決條件 ---- 要完全理解本教程,您需要對 React 或 Next.js 有基本的了解。 以下是建立人工智慧驅動的電子表格應用程式所需的工具: - [React Spreadsheet](https://github.com/iddan/react-spreadsheet) - 一個簡單的包,使我們能夠在 React 應用程式中加入電子表格。 - [OpenAI API](https://platform.openai.com/api-keys) - 提供 API 金鑰,使我們能夠使用 ChatGPT 模型執行各種任務。 - [Tavily AI](https://tavily.com/) - 一個搜尋引擎,使人工智慧代理能夠在應用程式中進行研究並存取即時知識。 - [CopilotKit](https://github.com/CopilotKit) - 一個開源副駕駛框架,用於建立自訂 AI 聊天機器人、應用程式內 AI 代理程式和文字區域。 專案設定和套件安裝 --------- 首先,透過在終端機中執行以下程式碼片段來建立 Next.js 應用程式: ``` npx create-next-app spreadsheet-app ``` 選擇您首選的配置設定。在本教學中,我們將使用 TypeScript 和 Next.js App Router。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f2zg8z22tdgmlv4wmfil.png) 接下來,安裝[OpenAI 函式庫](https://platform.openai.com/docs/introduction)、 [Heroicons](https://www.npmjs.com/package/@heroicons/react)和[React Spreadsheet](https://github.com/iddan/react-spreadsheet)套件及其相依性: ``` npm install openai react-spreadsheet scheduler @heroicons/react ``` 最後,安裝 CopilotKit 軟體套件。這些套件使我們能夠從 React 狀態檢索資料並將 AI copilot 新增至應用程式。 ``` npm install @copilotkit/react-ui @copilotkit/react-textarea @copilotkit/react-core @copilotkit/backend ``` 恭喜!您現在已準備好建立應用程式。 --- 建立電子表格應用程式 ---------- 在本節中,我將引導您使用 React Spreadsheet 建立電子表格應用程式。 該應用程式分為兩個元件: `Sidebar`和`SingleSpreadsheet` 。 要設定這些元件,請導航至 Next.js 應用程式資料夾並建立一個包含以下檔案的`components`資料夾: ``` cd app mkdir components && cd components touch Sidebar.tsx SingleSpreadsheet.tsx ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bd9crph3qdenb2eikfoh.png) 將新建立的元件匯入到**`app/page.tsx`**檔案中。 ``` "use client"; import React, { useState } from "react"; //👇🏻 import the components import { SpreadsheetData } from "./types"; import Sidebar from "./components/Sidebar"; import SingleSpreadsheet from "./components/SingleSpreadsheet"; const Main = () => { return ( <div className='flex'> <p>Hello world</p> </div> ); }; export default Main; ``` 接下來,建立將包含電子表格資料的 React 狀態,並將它們作為 props 傳遞到元件中。 ``` const Main = () => { //👇🏻 holds the title and data within a spreadsheet const [spreadsheets, setSpreadsheets] = React.useState<SpreadsheetData[]>([ { title: "Spreadsheet 1", data: [ [{ value: "" }, { value: "" }, { value: "" }], [{ value: "" }, { value: "" }, { value: "" }], [{ value: "" }, { value: "" }, { value: "" }], ], }, ]); //👇🏻 represents the index of a spreadsheet const [selectedSpreadsheetIndex, setSelectedSpreadsheetIndex] = useState(0); return ( <div className='flex'> <Sidebar spreadsheets={spreadsheets} selectedSpreadsheetIndex={selectedSpreadsheetIndex} setSelectedSpreadsheetIndex={setSelectedSpreadsheetIndex} /> <SingleSpreadsheet spreadsheet={spreadsheets[selectedSpreadsheetIndex]} setSpreadsheet={(spreadsheet) => { setSpreadsheets((prev) => { console.log("setSpreadsheet", spreadsheet); const newSpreadsheets = [...prev]; newSpreadsheets[selectedSpreadsheetIndex] = spreadsheet; return newSpreadsheets; }); }} /> </div> ); }; ``` 此程式碼片段建立了 React 狀態,用於保存電子表格資料及其索引,並將它們作為 props 傳遞到元件中。 `Sidebar`元件接受所有可用的電子表格, `SingleSpreadsheet`元件接收所有電子表格,包括更新電子表格資料的`setSpreadsheet`函數。 將下面的程式碼片段複製到`Sidebar.tsx`檔案中。它顯示應用程式中的所有電子表格,並允許使用者在它們之間進行切換。 ``` import React from "react"; import { SpreadsheetData } from "../types"; interface SidebarProps { spreadsheets: SpreadsheetData[]; selectedSpreadsheetIndex: number; setSelectedSpreadsheetIndex: (index: number) => void; } const Sidebar = ({ spreadsheets, selectedSpreadsheetIndex, setSelectedSpreadsheetIndex, }: SidebarProps) => { return ( <div className='w-64 h-screen bg-gray-800 text-white overflow-auto p-5'> <ul> {spreadsheets.map((spreadsheet, index) => ( <li key={index} className={`mb-4 cursor-pointer ${ index === selectedSpreadsheetIndex ? "ring-2 ring-blue-500 ring-inset p-3 rounded-lg" : "p-3" }`} onClick={() => setSelectedSpreadsheetIndex(index)} > {spreadsheet.title} </li> ))} </ul> </div> ); }; export default Sidebar; ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c36qccuwa0knqokag5mk.gif) 更新`SingleSpreadsheet.tsx`文件,如下所示: ``` import React from "react"; import Spreadsheet from "react-spreadsheet"; import { SpreadsheetData, SpreadsheetRow } from "../types"; interface MainAreaProps { spreadsheet: SpreadsheetData; setSpreadsheet: (spreadsheet: SpreadsheetData) => void; } //👇🏻 adds a new row to the spreadsheet const addRow = () => { const numberOfColumns = spreadsheet.rows[0].length; const newRow: SpreadsheetRow = []; for (let i = 0; i < numberOfColumns; i++) { newRow.push({ value: "" }); } setSpreadsheet({ ...spreadsheet, rows: [...spreadsheet.rows, newRow], }); }; //👇🏻 adds a new column to the spreadsheet const addColumn = () => { const spreadsheetData = [...spreadsheet.data]; for (let i = 0; i < spreadsheet.data.length; i++) { spreadsheet.data[i].push({ value: "" }); } setSpreadsheet({ ...spreadsheet, data: spreadsheetData, }); }; const SingleSpreadsheet = ({ spreadsheet, setSpreadsheet }: MainAreaProps) => { return ( <div className='flex-1 overflow-auto p-5'> {/** -- Spreadsheet title ---*/} <div className='flex items-start'> {/** -- Spreadsheet rows and columns---*/} {/** -- Add column button ---*/} </div> {/** -- Add row button ---*/} </div> ); }; export default SingleSpreadsheet; ``` - 從上面的程式碼片段來看, ``` - The `SingleSpreadsheet.tsx` file includes the addRow and addColumn functions. ``` ``` - The `addRow` function calculates the current number of rows, adds a new row, and updates the spreadsheet accordingly. ``` ``` - Similarly, the `addColumn` function adds a new column to the spreadsheet. ``` ``` - The `SingleSpreadsheet` component renders placeholders for the user interface elements. ``` 更新`SingleSpreadsheet`元件以呈現電子表格標題、其資料以及新增行和列按鈕。 ``` return ( <div className='flex-1 overflow-auto p-5'> {/** -- Spreadsheet title ---*/} <input type='text' value={spreadsheet.title} className='w-full p-2 mb-5 text-center text-2xl font-bold outline-none bg-transparent' onChange={(e) => setSpreadsheet({ ...spreadsheet, title: e.target.value }) } /> {/** -- Spreadsheet rows and columns---*/} <div className='flex items-start'> <Spreadsheet data={spreadsheet.data} onChange={(data) => { console.log("data", data); setSpreadsheet({ ...spreadsheet, data: data as any }); }} /> {/** -- Add column button ---*/} <button className='bg-blue-500 text-white rounded-lg ml-6 w-8 h-8 mt-0.5' onClick={addColumn} > + </button> </div> {/** -- Add row button ---*/} <button className='bg-blue-500 text-white rounded-lg w-8 h-8 mt-5 ' onClick={addRow} > + </button> </div> ); ``` 為了確保一切按預期工作,請在`app`資料夾中建立一個`types.ts`文件,其中包含應用程式中聲明的所有靜態類型。 ``` export interface Cell { value: string; } export type SpreadsheetRow = Cell[]; export interface SpreadsheetData { title: string; rows: SpreadsheetRow[]; } ``` 恭喜! 🎉 您的電子表格應用程式應該可以完美執行。在接下來的部分中,您將了解如何新增 AI 副駕駛,以使用 CopilotKit 自動執行各種任務。 --- 使用 CopilotKit 改進應用程式功能 ---------------------- 在這裡,您將學習如何將 AI 副駕駛加入到電子表格應用程式,以使用 CopilotKit 自動執行複雜的操作。 CopilotKit 提供前端和[後端](https://docs.copilotkit.ai/getting-started/quickstart-backend)套件。它們使您能夠插入 React 狀態並使用 AI 代理在後端處理應用程式資料。 首先,我們將 CopilotKit React 元件新增到應用程式前端。 ### 將 CopilotKit 加入前端 在`app/page.tsx`中,將以下程式碼片段加入`Main`元件的頂部。 ``` import "@copilotkit/react-ui/styles.css"; import { CopilotKit } from "@copilotkit/react-core"; import { CopilotSidebar } from "@copilotkit/react-ui"; import { INSTRUCTIONS } from "./instructions"; const HomePage = () => { return ( <CopilotKit url='/api/copilotkit'> <CopilotSidebar instructions={INSTRUCTIONS} labels={{ initial: "Welcome to the spreadsheet app! How can I help you?", }} defaultOpen={true} clickOutsideToClose={false} > <Main /> </CopilotSidebar> </CopilotKit> ); }; const Main = () => { //--- Main component // }; export default HomePage; ``` - 從上面的程式碼片段來看, ``` - I imported the CopilotKit, its sidebar component, and CSS file to use its frontend components within the application. ``` ``` - The [CopilotKit component](https://docs.copilotkit.ai/reference/CopilotKit) accepts a `url` prop that represents the API server route where CopilotKit will be configured. ``` ``` - The Copilot component also renders the [CopilotSidebar component](https://docs.copilotkit.ai/reference/CopilotSidebar) , allowing users to provide custom instructions to the AI copilot within the application. ``` ``` - Lastly, you can export the `HomePage` component containing the `CopilotSidebar` and the `Main` components. ``` 從上面的程式碼片段中,您會注意到`CopilotSidebar`元件有一個`instructions`屬性。此屬性使您能夠為 CopilotKit 提供額外的上下文或指導。 因此,在`app`資料夾中建立`instructions.ts`檔案並將這些[命令](https://github.com/CopilotKit/spreadsheet-demo/blob/main/src/app/instructions.ts)複製到該檔案中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/whs8k2ly9as7j4wn6h5o.png) 接下來,您需要將 CopilotKit 插入應用程式的狀態以存取應用程式的資料。為了實現這一點,CopilotKit 提供了兩個鉤子: [useCopilotAction](https://docs.copilotkit.ai/reference/useCopilotAction)和[useMakeCopilotReadable](https://docs.copilotkit.ai/reference/useMakeCopilotReadable) 。 [useCopilotAction](https://docs.copilotkit.ai/reference/useCopilotAction)掛鉤可讓您定義 CopilotKit 執行的動作。它接受包含以下參數的物件: - `name` - 操作的名稱。 - `description` - 操作的描述。 - `parameters` - 包含所需參數清單的陣列。 - `render` - 預設的自訂函數或字串。 - `handler` - 由操作觸發的可執行函數。 ``` useCopilotAction({ name: "sayHello", description: "Say hello to someone.", parameters: [ { name: "name", type: "string", description: "name of the person to say greet", }, ], render: "Process greeting message...", handler: async ({ name }) => { alert(`Hello, ${name}!`); }, }); ``` [useMakeCopilotReadable](https://docs.copilotkit.ai/reference/useMakeCopilotReadable)掛鉤向 CopilotKit 提供應用程式狀態。 ``` import { useMakeCopilotReadable } from "@copilotkit/react-core"; const appState = ...; useMakeCopilotReadable(JSON.stringify(appState)); ``` 現在,讓我們回到電子表格應用程式。在`SingleSpreadsheet`元件中,將應用程式狀態傳遞到 CopilotKit 中,如下所示。 ``` import { useCopilotAction, useMakeCopilotReadable, } from "@copilotkit/react-core"; const SingleSpreadsheet = ({ spreadsheet, setSpreadsheet }: MainAreaProps) => { //👇🏻 hook for providing the application state useMakeCopilotReadable( "This is the current spreadsheet: " + JSON.stringify(spreadsheet) ); // --- other lines of code }; ``` 接下來,您需要在`SingleSpreadsheet`元件中新增兩個操作,該元件在使用者更新電子表格資料並使用 CopilotKit 新增資料行時執行。 在繼續之前,請在`app`資料夾中建立一個包含`canonicalSpreadsheetData.ts`檔案的`utils`資料夾。 ``` cd app mkdir utils && cd utils touch canonicalSpreadsheetData.ts ``` 將下面的程式碼片段複製到檔案中。它接受對電子表格所做的更新,並將其轉換為電子表格中資料行所需的格式。 ``` import { SpreadsheetRow } from "../types" export interface RowLike { cells: CellLike[] | undefined; } export interface CellLike { value: string; } export function canonicalSpreadsheetData( rows: RowLike[] | undefined ): SpreadsheetRow[] { const canonicalRows: SpreadsheetRow[] = []; for (const row of rows || []) { const canonicalRow: SpreadsheetRow = []; for (const cell of row.cells || []) { canonicalRow.push({value: cell.value}); } canonicalRows.push(canonicalRow); } return canonicalRows; } ``` 現在,讓我們使用`SingleSpreadsheet`元件中的`useCopilotAction`掛鉤建立操作。複製下面的第一個操作: ``` import { canonicalSpreadsheetData } from "../utils/canonicalSpreadsheetData"; import { PreviewSpreadsheetChanges } from "./PreviewSpreadsheetChanges"; import { SpreadsheetData, SpreadsheetRow } from "../types"; import { useCopilotAction } from "@copilotkit/react-core"; useCopilotAction({ name: "suggestSpreadsheetOverride", description: "Suggest an override of the current spreadsheet", parameters: [ { name: "rows", type: "object[]", description: "The rows of the spreadsheet", attributes: [ { name: "cells", type: "object[]", description: "The cells of the row", attributes: [ { name: "value", type: "string", description: "The value of the cell", }, ], }, ], }, { name: "title", type: "string", description: "The title of the spreadsheet", required: false, }, ], render: (props) => { const { rows } = props.args const newRows = canonicalSpreadsheetData(rows); return ( <PreviewSpreadsheetChanges preCommitTitle="Replace contents" postCommitTitle="Changes committed" newRows={newRows} commit={(rows) => { const updatedSpreadsheet: SpreadsheetData = { title: spreadsheet.title, rows: rows, }; setSpreadsheet(updatedSpreadsheet); }} /> ) }, handler: ({ rows, title }) => { // Do nothing. // The preview component will optionally handle committing the changes. }, }); ``` 上面的程式碼片段執行使用者的任務並使用 CopilotKit 產生 UI 功能顯示結果預覽。 `suggestSpreadsheetOverride`操作傳回一個自訂元件 ( `PreviewSpreadsheetChanges` ),該元件接受以下內容為 props: - 要新增到電子表格的新資料行, - 一些文字 - `preCommitTitle`和`postCommitTitle` ,以及 - 更新電子表格的`commit`函數。 您很快就會學會如何使用它們。 在元件資料夾中建立`PreviewSpreadsheetChanges`元件,並將下列程式碼片段複製到檔案中: ``` import { CheckCircleIcon } from '@heroicons/react/20/solid' import { SpreadsheetRow } from '../types'; import { useState } from 'react'; import Spreadsheet from 'react-spreadsheet'; export interface PreviewSpreadsheetChanges { preCommitTitle: string; postCommitTitle: string; newRows: SpreadsheetRow[]; commit: (rows: SpreadsheetRow[]) => void; } export function PreviewSpreadsheetChanges(props: PreviewSpreadsheetChanges) { const [changesCommitted, setChangesCommitted] = useState(false); const commitChangesButton = () => { return ( <button className="inline-flex items-center gap-x-2 rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" onClick={() => { props.commit(props.newRows); setChangesCommitted(true); }} > {props.preCommitTitle} </button> ); } const changesCommittedButtonPlaceholder = () => { return ( <button className=" inline-flex items-center gap-x-2 rounded-md bg-gray-100 px-3.5 py-2.5 text-sm font-semibold text-green-600 shadow-sm cursor-not-allowed" disabled > {props.postCommitTitle} <CheckCircleIcon className="-mr-0.5 h-5 w-5" aria-hidden="true" /> </button> ); } return ( <div className="flex flex-col"> <Spreadsheet data={props.newRows} /> <div className="mt-5"> {changesCommitted ? changesCommittedButtonPlaceholder() : commitChangesButton() } </div> </div> ); } ``` `PreviewSpreadsheetChanges`元件傳回一個電子表格,其中包含從請求產生的資料和一個按鈕(帶有`preCommitTitle`文字),該按鈕允許您將這些變更提交到主電子表格表(透過觸發`commit`函數)。這可確保您在將結果新增至電子表格之前對結果感到滿意。 將下面的第二個操作加入到`SingleSpreadsheet`元件。 ``` useCopilotAction({ name: "appendToSpreadsheet", description: "Append rows to the current spreadsheet", parameters: [ { name: "rows", type: "object[]", description: "The new rows of the spreadsheet", attributes: [ { name: "cells", type: "object[]", description: "The cells of the row", attributes: [ { name: "value", type: "string", description: "The value of the cell", }, ], }, ], }, ], render: (props) => { const status = props.status; const { rows } = props.args const newRows = canonicalSpreadsheetData(rows); return ( <div> <p>Status: {status}</p> <Spreadsheet data={newRows} /> </div> ) }, handler: ({ rows }) => { const canonicalRows = canonicalSpreadsheetData(rows); const updatedSpreadsheet: SpreadsheetData = { title: spreadsheet.title, rows: [...spreadsheet.rows, ...canonicalRows], }; setSpreadsheet(updatedSpreadsheet); }, }); ``` `appendToSpreadsheet`操作透過在電子表格中新增資料行來更新電子表格。 以下是操作的簡短示範: \[https://www.youtube.com/watch?v=kGQ9xl5mSoQ\] 最後,在`Main`元件中新增一個操作,以便在使用者提供指令時建立一個新的電子表格。 ``` useCopilotAction({ name: "createSpreadsheet", description: "Create a new spreadsheet", parameters: [ { name: "rows", type: "object[]", description: "The rows of the spreadsheet", attributes: [ { name: "cells", type: "object[]", description: "The cells of the row", attributes: [ { name: "value", type: "string", description: "The value of the cell", }, ], }, ], }, { name: "title", type: "string", description: "The title of the spreadsheet", }, ], render: (props) => { const { rows, title } = props.args; const newRows = canonicalSpreadsheetData(rows); return ( <PreviewSpreadsheetChanges preCommitTitle="Create spreadsheet" postCommitTitle="Spreadsheet created" newRows={newRows} commit={ (rows) => { const newSpreadsheet: SpreadsheetData = { title: title || "Untitled Spreadsheet", rows: rows, }; setSpreadsheets((prev) => [...prev, newSpreadsheet]); setSelectedSpreadsheetIndex(spreadsheets.length); }} /> ); }, handler: ({ rows, title }) => { // Do nothing. // The preview component will optionally handle committing the changes. }, }); ``` 恭喜!您已成功為此應用程式建立所需的操作。現在,讓我們將應用程式連接到 Copilotkit 後端。 ### 將 Tavily AI 和 OpenAI 加入到 CopilotKit 在本教程的開頭,我向您介紹了[Tavily AI](https://tavily.com/) (一個為 AI 代理提供知識的搜尋引擎)和 OpenAI(一個使我們能夠存取[GPT-4 AI 模型的](https://openai.com/gpt-4)庫)。 在本部分中,您將了解如何取得 Tavily 和 OpenAI API 金鑰並將它們整合到 CopilotKit 中以建立高級智慧應用程式。 造訪[Tavily AI 網站](https://app.tavily.com/sign-in),建立一個帳戶,然後將您的 API 金鑰複製到您專案的`.env.local`檔案中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w8shpxr5hh9r9kggk1jv.png) 接下來,導覽至[OpenAI 開發者平台](https://platform.openai.com/api-keys),建立 API 金鑰,並將其複製到`.env.local`檔案中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4ugtobr70wg6z6ru3cj.png) 以下是`.env.local`檔案的預覽,其中包括 API 金鑰並指定要使用的 OpenAI 模型。請注意,存取 GPT-4 模型需要[訂閱 ChatGPT Plus](https://openai.com/chatgpt/pricing) 。 ``` TAVILY_API_KEY=<your_API_key> OPENAI_MODEL=gpt-4-1106-preview OPENAI_API_KEY=<your_API_key> ``` 回到我們的應用程式,您需要為 Copilot 建立 API 路由。因此,建立一個包含`route.ts`的`api/copilotkit`資料夾並新增一個`tavily.ts`檔案。 ``` cd app mkdir api && cd api mkdir copilotkit && cd copilotkit touch route.ts tavily.ts ``` 在`tavily.ts`檔案中建立一個函數,該函數接受使用者的查詢,使用 Tavily Search API 對查詢進行研究,並使用[OpenAI GPT-4 模型](https://openai.com/gpt-4)總結結果。 ``` import OpenAI from "openai"; export async function research(query: string) { //👇🏻 sends the request to the Tavily Search API const response = await fetch("https://api.tavily.com/search", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ api_key: process.env.TAVILY_API_KEY, query, search_depth: "basic", include_answer: true, include_images: false, include_raw_content: false, max_results: 20, }), }); //👇🏻 the response const responseJson = await response.json(); const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY! }); //👇🏻 passes the response into the OpenAI GPT-4 model const completion = await openai.chat.completions.create({ messages: [ { role: "system", content: `Summarize the following JSON to answer the research query \`"${query}"\`: ${JSON.stringify( responseJson )} in plain English.`, }, ], model: process.env.OPENAI_MODEL, }); //👇🏻 returns the result return completion.choices[0].message.content; } ``` 最後,您可以透過將使用者的查詢傳遞到函數中並向 CopilotKit 提供其回應來執行`route.ts`檔案中的`research`函數。 ``` import { CopilotBackend, OpenAIAdapter } from "@copilotkit/backend"; import { Action } from "@copilotkit/shared"; import { research } from "./tavily"; //👇🏻 carries out a research on the user's query const researchAction: Action<any> = { name: "research", description: "Call this function to conduct research on a certain query.", parameters: [ { name: "query", type: "string", description: "The query for doing research. 5 characters or longer. Might be multiple words", }, ], handler: async ({ query }) => { console.log("Research query: ", query); const result = await research(query); console.log("Research result: ", result); return result; }, }; export async function POST(req: Request): Promise<Response> { const actions: Action<any>[] = []; if (process.env.TAVILY_API_KEY!) { actions.push(researchAction); } const copilotKit = new CopilotBackend({ actions: actions, }); const openaiModel = process.env.OPENAI_MODEL; return copilotKit.response(req, new OpenAIAdapter({ model: openaiModel })); } ``` 恭喜!您已完成本教學的專案。 結論 -- [CopilotKit](https://copilotkit.ai/)是一款令人難以置信的工具,可讓您在幾分鐘內將 AI Copilot 加入到您的產品中。無論您是對人工智慧聊天機器人和助理感興趣,還是對複雜任務的自動化感興趣,CopilotKit 都能讓您輕鬆實現。 如果您需要建立 AI 產品或將 AI 工具整合到您的軟體應用程式中,您應該考慮 CopilotKit。 您可以在 GitHub 上找到本教學的源程式碼: https://github.com/CopilotKit/spreadsheet-demo 感謝您的閱讀! --- 原文出處:https://dev.to/copilotkit/build-an-ai-powered-spreadsheet-app-nextjs-langchain-copilotkit-109d

🕵️‍♂️ 自學的藝術:如何自學任何程式設計概念🤓

自學簡介 ---- 首先,讓我為您描繪一下場景。您在新聞中或透過朋友聽說過「程式設計師的就業市場非常棒」。 你發現自己有一些隨機的 YouTube 影片或奇怪的付費課程,它們可以教你一些東西,你會想*啊哈!這就是所缺少的!* 只需幾天(如果不是幾個小時)你就會很快意識到**程式設計是困難的**,遵循你在網路上找到的一些隨機課程大多只會讓你擅長複製東西,所以當你嘗試時,你最終只是盯著那個巨大的空白螢幕稍後自己思考。 ![](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExa2p6ZWttZjcwdmlucjI5bTgwYjk5c3FtZHAxemxnNDhjbW5rdTJkYyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Dh5q0sShxgp13DwrvG/giphy.gif) ### 首先,你要怎麼學到東西? 讓我們來聽聽著名程式設計師[GeoHotz](https://wikipedia.org/wiki/George_Hotz)的說法: {% youtube 8RtGlWmXGhA %} 學習是一個複雜的過程,每個人的情況可能會有所不同。對我來說,**最簡單的學習方法就是找到能激勵你去做的事情。** 由於學習是一個艱難且有時乏味的過程,因此擁有明確的目標可以讓您走得更遠,並且可以讓您感覺自己取得了更大的成就,或者正如 GeoHotz 所說: > *你永遠不會透過觀看名為「學習程式設計」的影片來學習程式設計*。 對於我和我認識的其他程式設計師來說,我們喜歡建立副專案,而這種透過做專案來學習東西的方法(在學院中稱為[基於專案的學習](https://www.bu.edu/ctl/ctl_resource/project-based-learning-teaching-guide/))由於其功效、作品集、腦海中浮現的隨機想法變得越來越流行,甚至那些可以幫助我們實現興趣愛好的東西也成為你學習的靈感來源的絕佳例子。 所以繼續吧!首先,選擇您的學習**靈感/專案**。如果您是完全的初學者,請從**小事**開始。例如,考慮一個可以在螢幕上顯示您的名字以及所選短語的程式! 還在問自己如何對一個好的專案創意進行分類?由於這對於初學者來說尤其困難,因此我們將在下面的部分中幫助您回答這個問題。 ### 什麼是好主意? ![定義想法](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3zq2vlihra2yl5utqdr.png) 我正在尋找這些東西來檢查目前是否是一個好主意: - **實用性**:這個想法應該是解決實際問題的東西/你感興趣的東西。這將為您提供將專案進行到底的動力。 - **複雜性**:想法的複雜性應該與您目前的技能水平相符。如果您是初學者,請從簡單的專案開始,隨著您的技能提升逐漸解決更複雜的專案。 - **興趣**:選擇一個您真正感興趣的專案。這將使學習過程變得更加愉快,減少苦差事。 對於初學者來說,一些好主意可以是建立一個基本計算器、一個簡單的部落格或一個互動式待辦事項清單。對於更高級的學習者,可以考慮建立一個從 API 獲取資料的天氣應用程式、即時應用程式,甚至是井字棋或貪吃蛇等簡單遊戲。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sr9blqii3utyi5u7pjcw.png) 事實上,如果您對即時主題感興趣,我們已經編寫了[完整的分步教程](https://wasp-lang.dev/blog/2023/08/09/build-real-time-voting-app-websockets-react-typescript),向您展示如何使用 WebSocket 建立即時投票應用程式。它將教你如何與朋友即時投票,同時建立一個完全全端的 React + NodeJS Web 應用程式——一個很棒的投資組合專案! 厭倦了千篇一律的舊想法,或者在尋找新想法時完全迷失了方向?檢查這個[很棒的儲存庫](https://github.com/practical-tutorials/project-based-learning),其中包含許多指向其他想法清單的不同連結! ### 為工作/您的學習主題選擇正確的工具 ![選擇您的學習科目](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sm0oftk9uwxap862fhve.png) 好的第二步是為您的專案選擇正確的語言/工具。 如果您是完全的初學者:**一切正常,**因為大多數程式語言的主要程式設計概念都是相同的。不要擔心任何關於「更好的語言」、「更好的作業系統」或類似的東西的意見,記住,我們正在嘗試在這裡創造一些東西。 還不知道嗎?只要使用[JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) !它很簡單,有大量[教程](https://dev.to/llxd/javascript-cheatsheet-and-snippets-for-beginners-hd6),基本上可以製作所有東西。 :) 如果您已經具備某種程式設計基礎,請使用人工智慧和一些出色的抽象/框架來更快地完成工作。例如,您可以使用[Wasp](https://wasp-lang.dev/)來跳過大量重複操作,而不是從頭開始建立所有內容(並且可能會在過程中遭受一些小事情的困擾),Wasp 是一個很棒的 React/Node 全端框架,可以處理為您管理程式設計的樣板部分。 🤯 此外,[他們的 CLI](https://wasp-lang.dev/docs/quick-start)也可以幫助您更快地啟動。透過執行`wasp new` ,您可以獲得適合您需求的自訂範本。例如,如果您正在建立新的 SaaS,您可能會發現[OpenSaaS](https://opensaas.sh/)適合您,或者如果您正在建立更具體的解決方案,如果沒有其他合適的解決方案, [AI 程式碼產生器](https://usemage.ai/)可以幫助您快速啟動。 ![黃蜂命令列介面](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emke5b2bu330atzxhoyp.png) --- 順便說一句,如果您還沒有,請給我們的儲存庫一些關愛!像[Wasp](https://wasp-lang.dev)這樣的開源專案可以節省我們大量的時間,讓我們能夠專注於建立 Web 應用程式的有趣部分! 透過[在 GitHub 上為該儲存庫加註星標,](https://www.github.com/wasp-lang/wasp)您將幫助我們繼續讓所有開發人員更快、更輕鬆地進行 Web 開發! ![](https://media.giphy.com/media/M9NbzZjAcxq9jS9LZJ/giphy.gif?cid=790b76115lfwr3wfm942vpkbuxdsr86riku5a1md0pkjum5c&ep=v1_gifs_search&rid=giphy.gif&ct=g) {% cta https://www.github.com/wasp-lang/wasp %} ⭐️ 給黃蜂一顆星! ⭐️ {% endcta %} --- ### 試著去做(並犯一些錯誤) ![動手實踐](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5b89wx2d0n4xe3u9j3cn.png) 現在,是時候讓我們動手了! 身為程式設計師,你必須具備的一項基本技能是**搜尋**。內容無所不在,我們只需要找到它。首先將手邊的任務分解成更小的問題: 讓我們使用*一個簡單的應用程式範例,該應用程式允許用戶輸入其姓名,以便其顯示在螢幕/客戶端上:* - 如何在 Python 上顯示我的名字? - 如何在程式碼中儲存文字? 您搜尋和尋找內容的每個問題都會產生更多問題,這些問題有望更準確地解決問題。您可能會親眼看到,像「在螢幕上顯示使用者名稱」這樣簡單的任務可以變得任何複雜程度。 我們如何在應用程式上輸入和保存資料?我們如何正確顯示這些資料?您將嘗試回答這些問題,但有時可能**會失敗**。作為工程師,除了解決專案可能引起的任何不確定性之外,我們還必須確定這些問題是否與我們正在開發的解決方案相關。 ![迭代周期](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6xpmwooej1ntp0eg5qk.png) 在尋求答案和辨識主題是否不相關之間找到平衡非常重要。這個過程有助於我們的專業成長。哦,我們不要忘記我們的朋友 AI,例如[Chat-GPT](https://chat.openai.com/chat) ,它可以為我們解釋甚至編碼。 請記住,與一般的工程一樣,編碼的一部分涉及嘗試和錯誤。我們每天都會嘗試、除錯並尋找解決方案。我們嘗試的越多,我們就越接近所需的解決方案。對於每個工程師/程式設計師來說,快速適應這個過程是朝著正確方向邁出的一大步。 但是,請注意,如果您是一個完全的初學者,請先嘗試自己搜尋。人工智慧很棒,可以幫助你很多,但它可能不精確,只有自己學習才能讓你有能力發現缺陷。 ### 反思你的進步 ![一座山,通往成功之路](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93hnhsi5zjgnbdyddtnn.png) 定期反思迄今為止所學到的知識非常重要。這可以很簡單,例如在每天結束時寫下您所學到的新概念的摘要,甚至建立有關它的部落格文章或教程,或者只是一條簡單的推文。這不僅可以加深您的理解,還可以為將來的使用提供參考(您可以[在這裡](https://buildinpublic.xyz/what-is-build-in-public)了解更多有關**公共建築**概念的訊息,這對公司很有好處,對您的旅程也很有好處!)。 反思您的進步也讓您有機會評估自己的優勢和劣勢,使您能夠專注於需要改進的領域。它就像個人回饋循環,讓您更了解自己的學習方式以及如何提高學習效率。 這也是自我推銷和透過作品集向他人展示的好時機,例如,您的創作內容和方式! 自學程式設計的挑戰 --------- 自學程式設計有其挑戰。它需要紀律、耐心以及排除故障和從錯誤中學習的能力。此外,如果沒有結構化的課程,很容易感到不知所措或迷失。 然而,同樣重要的是要記住,自學並不意味著孤立學習。與其他學習者互動、分享您的程式碼並尋求回饋(例如,您可以查看[Wasp 的 Discord](https://discord.com/invite/rzdnErX)或其他社群來開始參與)。這可以極大地幫助您增強理解並提高編碼技能。 對於課程部分,你也不必盲目地搜尋所有內容。您可以使用[開發人員路線圖](https://roadmap.sh/)來了解您在每一步中應該學習哪些內容! 自學程式設計的好處 --------- ![](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExbXU1ZGUyM3Q4enBucGYyeXk1aXFpMmF2YjY3OWdjZnF2cWRvdjgzdSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/avrlp4ymZdpuwSVI7P/giphy.gif) 儘管面臨挑戰,自學程式還是有許多好處。它允許靈活性,培養創造力,並且可以帶來難以置信的回報。但沒有什麼比你能做任何事的感覺,或者換句話說,**你將獲得的信心**更令人驚奇的了。 當你最終創造出你喜歡創造的東西並意識到你在這個過程中學到了多少東西時,這很棒,但是,如果有足夠的時間,你可以學習並創造任何想到的想法,那就更棒了。此外,您可以按照自己的步調並專注於您最感興趣的領域。建立讓您興奮的專案並與他人分享您的進度。繼續學習,繼續編碼,最重要的是,享受這趟旅程。 結論 -- ![貼文中的所有圖片合併成一個循環](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/urn4d7pwer1kvmzqen9x.png) 總之,自學程式設計是一次賦能之旅,可以釋放無數機會。有時可能會充滿挑戰,但您獲得的可能性是無限的。 哦,萬一您還沒有為[Wasp 的存儲庫](https://www.github.com/wasp-lang/wasp)加註星標,我建議您這樣做!對於任何希望更快、更輕鬆地完成專案的人來說,這是一個很棒的全端框架! {% cta https://www.github.com/wasp-lang/wasp %} ⭐️ 給黃蜂一顆星! ⭐️ {% endcta %} 最後,成功的自學之旅的關鍵是一致性、耐心和適量的好奇心。將挑戰視為成長的機會,不要害怕尋求協助。在這段旅程中,您並不孤單,每個程式設計師,無論經驗如何,都是從您現在的位置開始的。 --- 原文出處:https://dev.to/wasp/the-art-of-self-learning-how-to-teach-yourself-any-programming-concept-5de4

  近期留言