我的第一个项目背后的故事。

第一次尝试

大学。

Gfree 的构建。

@t7m/redux-generator

用法

经验教训

接下来，项目和我们开发者将面临什么？

开发项目是一件很棒的事情。你能学到很多东西，结交朋友，而且如果一切顺利的话，还能帮助某些人解决一些问题。但每个项目背后都有一个故事，讲述它是如何一步步变成现实的。今天，我想和大家分享一下我和朋友们一起创建的 Gfree（一个无麸质社区）的故事。2018
年春天，我们在大学里开始学习 Web 开发，这让我从算法和数学的学习中解脱出来，感觉耳目一新。我开始大量尝试 CSS，我的朋友注意到了我的热情，建议我们一起做一个项目。
时间快进到夏天，我的情况不太好，因为一些健康问题崩溃了（直到写这篇文章之前，只有我的家人知道这件事）。我被诊断出患有慢性抑郁症，那段日子很艰难。在康复的最初几天，我非常渴望学习新东西，再加上一次偶然的机会，我的推荐视频里出现了 Sarah Drasner 的身影。我被深深吸引了，Web 开发就此成为我的新冒险。那年七月，我花了好多时间研究大型网站开发公司都在用什么框架。我接触到了各种网站框架，差点就选择了Angular，但React框架的流行度实在太高，不容忽视，所以就决定用React了。我和朋友闲聊时，我们决定一起做个项目。我们有很多想法，但我患有乳糜泻，所以我说服他，这个项目必须和无麸质食品相关，他也同意了。

第一次尝试

虽然设计专业学位不太理想，只掌握了一些网页基础知识（HTML、CSS、jQuery），但我仍然渴望学习 React，再加上有个朋友，是时候开始做项目了。我把学习 Firebase 的任务交给了我的朋友。我一开始只是做一些界面原型，心想这应该不难吧？但我当时完全没想到，设计一个好的界面完全是另一回事。我的设计风格深受 Dribbble 的影响，想要达到我的预期并不容易。那么，就让我来展示一下最初的几个原型吧。

一切都在争相吸引眼球，毫无重点可言，色彩对于这样一个群体来说也过于浓烈。简直一团糟。那年夏天我意识到自己需要提升设计知识，而我也确实这么做了。那年夏天我学习了设计原理并进行了实验。同时，我的心理健康状况也在那段时间有了很大的改善。药物帮助我消除了焦虑和空虚感，也重新点燃了我对学习的渴望。由于大学的缘故，Gfree已经沉寂了几个月。

大学。

2018/2019 是我本科最后一年，因为成绩不错，所以我必须专注于学业。我进步很大，暑假期间学到的东西给了我极大的自信。实际上，我当时有点过于自信了。我们当时还在讨论 Gfree，决定也应该让用户写下他们的故事和体验。在第一学期末的假期里，我们又做了一次尝试。这次我们决定直接上手写代码。这能有多难？不就是一个界面和一些动态内容吗？这就是成果。

由于我没有参与设计，事情变得难以控制，很难保持一致性。此外，我对自己的 React 技术过于自信，导致我盲目，JavaScript 的世界远不止 React。

代码变得非常复杂，这让我大开眼界，前端开发工作并不轻松。它仍然需要用到我学过的所有CSS知识，不仅仅是HTML和CSS。

我们了解到需要设计界面、设计系统，还要建立一套管理框架。工作量太大，我们决定等到大学毕业后再进行。

那一年我结识了一位新朋友，他对加入我们团队很感兴趣，于是我们就一起工作了。而且，我们都拿到了计算机科学学士学位，真是美好的时光。

Gfree 的构建。

2020年真是充满挑战的一年，幸运的是，我们找到了一份自由职业。我们学到了很多东西，最终做好了全职投入Gfree项目的准备。

我们设计了 Gfree 背后的系统，确保需求简洁明了，并且前端和后端使用相同的共享模型。这个维基百科在保持项目一致性方面发挥了重要作用。

用户界面/用户体验设计

我和@dinasso1一起负责 UI/UX 设计。我们首先从选择配色方案入手。我们的主要目标是让用户感到平静。

在 Figma 中，我们采用“颜色+色调”的命名规则，例如，对于主色，我们有 primary100 到 primary900，其中 primary 是该颜色的最深色调。这在开发过程中非常方便。

排版方面，我们采用了Inter 字体构建了一个系统。

排版系统中的命名规则也发挥了很大的作用，它使用户界面的开发更加稳健。

这是两位新手设计师制作的设计文件。

我为我们所做的工作感到自豪，它并不完美，而且可能永远也不会完美。我们就是这样学习的，从不完美中学习，对吧？

堆栈使用

• Next.js
• Styled-components/xstyled
• TypeScript
• 重制版
• 福米克
• SlateJs

前端

我们的网站需求之一是SEO，而客户端React并不适合这种情况。我们还需要OpenGraph预览。Next.js解决了这些问题，它的路由系统让一切都变得超级直观。Next.js太棒了，值得单独写一篇文章来介绍（也许下一篇就写这个？）。

说到 CSS，这完全取决于个人喜好。我们喜欢styled-components，所以就用了它。除此之外，我们还用了xstyled 。这让我们的工作效率提升了十倍。还记得我们在设计中采用的命名规范吗？有了xstyled，我们就可以直接在 styled-components 的语法中使用它了。

import {styled} from '@x-styled/styled-components'
const Button = styled.button`
    background-color: primary100; /* This is awesome */
    ${h100} /* This how we used our typography system*/
`

国家管理

状态管理方面，我们选择了 Redux。但如果你之前用过 Redux，就会知道它有很多样板代码。代码越多，需要维护的东西也就越多。幸运的是，我之前试用过 Rekit，我很喜欢他们 Redux 代码的架构方式。一番搜索之后，我发现了 Ducks 模式。

鸭子模式是一种模块化的 Redux 代码组织方式，它有一些规则。

*1. 必须导出默认的 reducer() 函数

1. 必须将其操作创建器导出为函数
2. 必须具有 npm-module-or-app/reducer/ACTION_TYPE 格式的操作类型
3. 如果外部 reducer 需要监听其 action 类型，或者它是一个已发布的可重用库，则可能需要将其 action 类型导出为 UPPER_SNAKE_CASE 格式*

您可以在这里了解更多信息。

虽然这种模式使得代码的阅读和管理更加容易，但我们仍然需要一种像 Rekit 那样生成代码的方法。

我们试用了一款名为 Hygen 的代码生成工具。它在生成代码方面表现良好。但是，在更新代码时却遇到了问题。Hygen 依赖正则表达式来更新代码，而当你使用 Prettier 格式化代码时，它就很难发挥作用，而且结果难以预测。

所以我寻找用抽象语法树（AST）更新代码的方法，然后就发现了 Babel。Babel 非常庞大，我用了一本很棒的手册来熟悉它。虽然花了不少时间，但我很自豪自己学会了它。

学习抽象语法树（AST）为我打开了许多新的大门。我可以编写 Babel 插件，甚至在需要时创建自定义的 ESLint 插件。

$ npm install -g @t7m/redux-generator
$ redux COMMAND
running command...
$ redux (-v|--version|version)
@t7m/redux-generator/0.0.2 win32-x64 node-v10.16.3
$ redux --help [COMMAND]
USAGE
  $ redux COMMAND
...

#First command is to initialise Redux boilerplate (./redux)
#You can then get rootReducer from ./redux and integrate it in your config
redux init

#Second you need to create a Feature to contain reducers and actions.
redux create --f (name of feature)

#Create a synchronous action
#You'll get prompt with existing features to choose from. 
redux create --a (name of action)

#Create a asynchronous action
# You'll get prompt with existing feature to choose from.
redux create --async (name of async action)

组件架构

我们的解决方案有点混合风格，我们从不同的概念中汲取了我们喜欢的部分。

原子定义了只有一个任务的组件。（按钮、标题、字段……）

我制作了这个概念图，解释了每个布局组件。

我注意到很多组件都使用了重复的布局，我认为我们可以添加模式（布局组件的组合）。这肯定能减少一些样板代码。

我们尽量避免在非布局组件样式中使用边距。边距仅在布局组件中使用。这看似微不足道的改动，实际上修复了许多不必要的 CSS 错误。

后端

后端部分很简单。控制器处理数据库查询。授权中间件处理签名和注册操作。端点处理来自前端的请求。

后端使用的堆栈

• Node.js
• ExpressJs
• PassportJS
• MongoDB
• Jest → 用于测试。至于 DevOps，我的朋友负责托管和文件存储方案。

经验教训

构建一个项目绝非易事，它需要深思熟虑且持之以恒的执行。试图通过偷工减料来加快进度，只会适得其反，大幅拖慢项目速度。此外，它还会导致技术债务，我们曾为此付出惨痛的代价。权宜之计或许能暂时满足需求，但肯定会在未来带来诸多挑战。

稳扎稳打可以加快项目进度，减少对出现bug的焦虑。

接下来，项目和我们开发者将面临什么？

对于这个项目，我们需要讨论市场营销策略，我们也构思了很多功能。这里是我们的学习试验场，我们会定期尝试新的功能。

对我以及我的朋友们来说，这个项目证明了我们有能力创造东西。毕业后找一份初级开发人员的工作并不容易，疫情更是雪上加霜。希望这个项目能够展现我们的能力和热情。所以，如果贵公司正在招聘 React 开发人员，我非常乐意加入。

这就是Gfree。我很想听听大家的反馈。