译者 | Kurt Bittner , Pierre Pureur
翻译者 | 武川
策画 | 丁晓昀
不论你是程式设计初学者却是现职合作开发人员，自学捷伊基本概念和词汇（或架构）都是跟得上加速的控制技术产业发展节拍的先决条件。
以React为例，它由Facebook在六年前开放源码，那时早已正式成为亚洲地区JavaScript合作开发人员的必选。
总之，Vue和Angular也有它他们的拥护者。除Svelte和像Next.js或Nuxt.js这种的通用型架构，除Gatsby、Gridsome，之类。
假如你想正式成为一位出众的JavaScript合作开发研究者，除采用好JS以外，最少还假如有采用相同架构和库的实战经验。
为的是协助你正式成为两个后端剑客，我搜集了9个工程项目，每一工程项目都有两个某一的主轴和两个相同的JavaScript架构或库做为控制技术栈，你能试著构筑它。读懂，没甚么比突发奇想去构筑小东西对你更有协助的了，因此请一往无前，磨练你的洞察力，一来吧。
1. 用 React 构筑
两个影片搜寻 App
具体来说，你能用 React 合作开发两个影片搜寻 App。右图是那个 App 最后的模样。
你将教给甚么
在构筑那个App时，你将采用相较较捷伊Hooks API，这有利于提升你的React专业技能。那个示例工程项目采用React组件、Hooks、两个外部API，总之，还采用CSS进行样式化。
控制技术栈和特性
React
create-react-app
JSX
CSS
那个项目不采用任何类，为你提供了两个进入React世界的完美入口，在2023年肯定对你有所协助。
你能在这里（https://www.freecodecamp.org/news/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7/）找到那个示例工程项目。请跟着教程做，或者提供你的反馈。
2. 用 Vue 构筑两个聊天 App
另两个工程项目是采用我最喜欢的JavaScript库VueJS构筑两个聊天App。
那个App看起来像这种。
你将教给甚么
跟随本教程，你将自学如何从零开始构筑两个Vue应用程序——创建组件、处理状态、创建路由、连接到第三方服务，甚至是进行身份验证。
控制技术栈和特性
Vue
Vuex
Vue Router
Vue CLI
Pusher
CSS
这真的是两个入门Vue的好工程项目，它也有利于提升你现有的专业技能，解决2023年的合作开发问题。
你能在这里（https://www.sitepoint.com/pusher-vue-real-time-chat-app/）找到教程。
3. 用 Angular 8
构筑两个漂亮的天气 App
下面的例子将协助你用谷歌的Angular 8构筑两个漂亮的天气App。
你将教给甚么
那个工程项目将教你从零开始创建应用程序时的宝贵专业技能——从设计到合作开发，一直到生产就绪的部署。
控制技术栈和特性
Angular 8
Firebase
服务器端渲染
CSS网格布局和Flexbox
移动，响应迅速
暗色模式
漂亮的界面
我之因此非常喜欢那个工程项目，其中两个原因是你教给的小东西并不是相互独立的。相反，你将了解整个合作开发过程——从设计到最后部署。
你真的假如试著一下那个工程项目。
4. 用 Svelte 构筑两个待办事项 App
Svelte是那个领域的新进者——最少与React、Vue和Angular相比是这种。尽管如此，它仍是2023年的热门架构之一。
好吧，待办事项App不一定是最热门的，但它确实能协助你磨练你的Svelte专业技能。它看起来是这种的。
你将教给甚么
那个教程将向你展示如何从头到尾采用Svelte 3合作开发App。它采用了组件、样式和事件处理器。
控制技术栈和特性
Svelte 3
组件
CSS样式
ES 6语法
那时也并没那么多好的Svelte启动工程项目，因此我发现那个工程项目（https://medium.com/codingthesmartway-com-blog/building-a-svelte-3-todo-app-from-start-to-deployment-1737f72c23a6）能做为两个很好的起点。
而且，谁知道呢，也许你就是那个创建另两个更全面的Svelte教程的人。
5. 用 Next.js 构筑两个电子商务购物车
Next.js是创建React应用程序的最流行架构，它支持开箱即用的服务器端渲染。
那个工程项目将向你展示如何构筑两个电子商务购物车，它看起来像这种。
你将教给甚么
控制技术栈和特性
Next.js
组件和页面
数据抓取
样式
部署
SSR和SPA
通过真实的例子（比如电子商务展示）来自学新控制技术总是很好的。你能在这里（https://snipcart.com/blog/next-js-ecommerce-tutorial）找到教程。
6. 用 Nuxt.js 构筑两个
完整的多词汇博客网站
Nuxt.js之于Vue就像Next.js之于React——两个结合了服务器端渲染和单页应用程序的强大架构。
创建的应用程序看起来像这种。
你将教给甚么
那个示例工程项目将教你如何采用Nuxt.js构筑两个成熟的网站——从初始搭建到最后部署。
它采用了Nuxt提供的许多很酷的功能，比如页面和组件，和SCSS。
控制技术栈和特性
Nuxt.js
组件和页面
Storyblok模块
Mixin
用于状态管理的Vuex
SCSS
Nuxt中间件
这对你来说可能是两个非常酷的工程项目（https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial），它涵盖了Nuxt.js的许多特性。我个人也喜欢采用Nuxt。你假如试著一下它，因为它也将协助你正式成为更好的Vue合作开发人员。
7. 用 Gatsby 构筑两个博客
Gatsby是两个很好的静态站点生成器，它在底层采用了React和GraphQL。那个工程项目看起来是这种的。
你将教给甚么
在那个教程中，你将自学如何利用Gatsby、React和GraphQL构筑两个出众的博客。
控制技术栈和特性
Gatsby
React
GraphQL
插件和主轴
MDX/Markdown
Bootstrap CSS
模板
假如你曾经想过要合作开发两个博客，这就是两个很好的例子（https://blog.bitsrc.io/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc）。它将教你如何利用React和GraphQL做到这一点。
我并不是说WordPress是两个糟糕的选择，但有了Gatsby，你能采用React构筑两个高性能的网站——这是两个很棒的组合。
8. 用 Gridsome 构筑两个博客
Gridsome之于Vue……好了，我们早已有Next/Nuxt了。
Gridsome与Gatsby一样，两者都采用GraphQL做为数据层，不一样的是Gridsome采用了VueJS。它也是两个很棒的静态站点生成器，能帮你构筑出很好的博客。
你将教给甚么
那个工程项目将教你如何采用Gridsome、GraphQL和Markdown构筑两个简单的博客。
它还介绍了如何通过Netlify来部署应用程序。
控制技术栈和特性
Gridsome
Vue
GraphQL
Markdown
Netlify
总之，这不是最全面的教程，但它确实涵盖了Gridsome和Markdown的基本基本概念（https://www.telerik.com/blogs/building-a-blog-with-vue-and-markdown-using-gridsome），能做为两个很好的起点。
9. 用 Quasar 构筑两个类似
SoundCloud 的音频播放器
Quasar是另两个Vue架构，也能用来构筑移动App。
在那个工程项目中，你将构筑这种的两个音频播放器。
你将教给甚么
其他工程项目主要关注Web应用程序，而那个工程项目将向你展示如何采用Quasar架构构筑两个移动App。
你假如早已有两个可用的Cordova和Android Studio/Xcode合作开发环境。假如没，教程中提供了两个Quasar网站的链接，在那里他们会告诉你如何搭建。
控制技术栈和特性
Quasar
Vue
Cordova
WaveSurfer
UI组件
这是两个小工程项目（https://www.learningsomethingnew.com/how-to-build-a-sound-cloud-like-audio-player-app-with-vue-js-quasar-and-wave-surfer），展示了Quasar在构筑移动App方面的能力。
总结
我在本文中展示了9个能构筑的工程项目，每一工程项目都关注两个JavaScript架构或库。
那时，选择权就在你的手中——你是否会通过采用以前从未采用过的架构来试著一些新小东西？或者你想通过做两个你早已掌握了一些知识的控制技术工程项目来加强你的专业技能？却是继续采用你最喜欢的架构/库，在2023年用它完成所有的工程项目？
声明：本文为InfoQ翻译，未经许可禁止转载。
2023年第一季度，ArchSummit亚洲地区架构师峰会将落地北京海航万豪酒店。来自百度、京东、华为、腾讯、斗鱼、中国信通院等企业与学术界的控制技术研究者，将就数字化业务架构、低代码实践、国产化替代方案、分布式架构等主轴展开分享讨论。
