【Frontend】Alpha Review 展示博客

团队成员介绍

  • Jingyi Xie:负责技术选型、项目初始化、项目重难点的突破、前后端联调的主持和最终的修缮工作。
  • Hanyue Tu:负责主页和问卷页面的API协商和编码。
  • Ziwei Wu:负责编辑器功能的编写。
  • Jiaqi Xu:负责显示提示、运行结果功能的编写。
  • Jingwei Yi:负责编辑器页面的逻辑和编辑器页面的联调。

典型场景描述

我们的产品面向编程的初学者(如高校新生)或是有一定编程基础但是需要快速入门一门新语言(当前只考虑了 Python)的人员。他们都需要通过某种方式入门一门新语言,但由于背景的不同,后者只需做一些语法上的训练,而前者可能还需要编程思维或是常用算法的训练。我们会根据用户的水平和做题记录循序渐进地为其推荐合适的题目,同时在用户犯错时,将解释器/编译器的报错转化为人性化的提示,以降低其对编程学习的恐惧感。

团队管理与协作

成员分工见"团队成员介绍"一节。

在团队内部我们采用了常见的 git workflow,即首先我们团队有一个自己的主分支 frontend-master,每人再基于此创建自己的分支,一项功能完成后并入 frontend-master,再一并并入 master 分支。在任务分配时我们已经尽量降低了成员与成员之间工作的耦合度,使整个团队能高效地并行。对于功能上实在有耦合关系的成员,我们鼓励其在开发时多交流以提高效率。

至于团队间的协作,我们主要是需要和后端对接。我们使用 hackmd 这一工具进行文档的协作。首先由我们提出前端需要的接口,再由后端的同学评估合理度,并进行开发。当然,当遇到一些涉及需求的问题时,我们三组人会一起开会,以确保大家没有对需求的理解产生偏差。

项目质量控制

前端的开发其实非常依赖后端的数据。为了在后端尚未完工时我们也能进行开发,我们使用了如下策略:将请求的逻辑按功能封装成函数,每个函数实现mockup和real server两个版本——前者只是简单地按照接口格式返回假数据,后者则包含真正的发请求的逻辑。如此一来,我们可以和后端并行开发,让前端的逻辑尽早得到测试;同时将对接时的工作量降到最低,避免后期引入新的错误。

我觉得我们 alpha 阶段的成果还是比较契合我们场景的,首先我们确实实现了错误的人性化提示,并以合理的方式呈现出来,其次我们的推荐系统也在前端有一定程度的强调,即用户答题成功后的splash,同时我们也利用推荐系统为用户设计了流畅且合理的使用路径。

【Frontend】Alpha Review 展示博客_第1张图片

技术细节介绍

我们前端使用了 Vue.js 作为主框架——此处带有一些技术选型者自身的偏见(曾有相关开发经验),但也不失为一个好的选择。UI 框架我们选择了 Vuetify,这是一个Material Design风格的框架,和Vue.js 融合度很高,适合快速开发。

项目的一大难点是编辑器,尤其是其"挖空"的功能。我们的思路是:与其从头开始开发,不如基于一个完善的代码编辑器做减法。于是我们找到了 ACE Editor,这是一个功能强大同时可以灵活定制的前端代码编辑器。当前实现的所谓挖空,其实是改变了某些行的样式,同时根据用户光标的位置决定是否响应2输入事件,仅此而已。我们禁用了大量编辑器的辅助功能,如粘贴、撤销、重做等,以将用户的活动范围限制在空里。当然我们也改变了一些事件的行为,如将回车和行首退格的行为变成了上下移动光标,以提高用户体验。

事后诸葛亮

回首这次 alpha 阶段开发可以发现,我们在需求分析和进度安排上还有一些不是很合理的地方。前期时我们前端组并没有和其他两个组进行很好的沟通,导致我们不能及时知道他们对需求的变更(在第六第七天时有一个较大的变化),从而使最后的工期比较紧张。这一点我们会在 beta 阶段注意。

你可能感兴趣的:(【Frontend】Alpha Review 展示博客)