前端远程办公系列 —— 整体介绍

整体介绍

前言

有些公司需要你有远程办公的经验

远程办公是某些公司和组织的一种工作方式。比如公司运作以天津为根据地，还有一些团队在武汉，忙不过来时还有外包

本系列就以前端工程师的视角，以一个真实的场景来说一下这个事情。会说遇到了什么问题、如何协作、用到什么新工具，什么技术...

背景

张三，一直从事前端，没有远程工作的经验，做过后台系统，这次入职一家科技资讯类的公司。公司用户使用的产品是安卓和ios端。

Tip：之所以没有使用 uniapp 这种跨平台开发方案，因为客户觉得慢。

入职

张三入职后需要马上投入工作，首先需要本地跑起 cms 系统。

Tip：cms 就是内容管理系统，用于配置 app 的内容，比如创建一篇文章。

mac

公司发的是 mac，对于一直用windows系统台式机的张三来说，非常不适应。

由于时间不多，所以张三先用自己的 windows 笔记本进行工作。

Tip：后续在介绍如何使用 mac。

vpn

EasyConnect

通过 git 要下载仓库代码，这里使用 EasyConnect - 能够帮助您在办公室之外使用公司内网的所有系统及应用。

跟运维同学申请 vpn 的账号和密码。登录界面如下：

登录进去后就是这样：

然后就能通过 git clone 拉取代码以及提交代码。

Vone

有一些web项目，测试或线上环境需要连接vpn才能通过浏览器访问。

这里使用的是天融信公司的产品，有 mac 版本，这里张三选则 windows 版本。用法如下：

Tip: 遇到 vnp冲突。比如vone连不上，先后重连、退出重启、删除链接重建链接，都以失败告终。最后退出 easyconnet，连接成功。

钉钉

工作沟通基本都是使用钉钉。

考勤打卡也是钉钉。张三上班地方是在武汉一个软件园，到附近50米就能打卡上下班。

发送信息给对方，如果对方已读，通过钉钉就能知晓。

上级也能看到自己上下班打卡时间，一周或一月平均上班时长。

屏蔽无关信息

信息很多，总被打扰，怎么办？

可以通过钉钉设置，屏蔽掉无关的信息。步骤：进入新消息通知(钉钉app->设置隐私->新消息通知)中，设置允许通知的消息，比如张三就选择：

• 单聊信息
• @我的信息
• DING消息

这样其他人的信息就不会总是骚扰到自己。

下班后如果不想被消息骚扰到，可以在新消息通知中将新消息通知、语音和视频童话邀请通知取消。

氚云

公司采用工时制的绩效。比如一月是22天，每天工作7h，要拿到100%的绩效就得有22*7小时的有效工时。

项目绩效管理用钉钉的氚云（钉钉->工作台->氚云）。

进入氚云，选择项目绩效管理，有三个菜单，其中主要使用成员报工。

在成员报工中点击新增就可以增加报工，比如每天最多可以申请10小时，最多只能一次申报近3天的工时等等。而且也能以图表的方式查看团队中所有成员报工情况。

MasterGo

UI的设计稿用 MasterGo - 协同时代的产品设计工具，支持最多 500 人同时在线协同，产品经理随时线上评审，工程师随时查看标注、获取代码、下载切图

墨刀

原型使用墨刀 - 一款在线原型设计与协同工具

Tip：MasterGo和墨刀都是万兴科技开发的产品

腾讯会议

每天早上产品在钉钉发布早会会议号，通过腾讯会议进行。

超过两人就会自动转成60分钟，如果会议时间过长，则会再次创建会议，重新进去。

重要的会议，例如需求评审，会议主持人则会进行本地录制或云录制。记得之前有同事选择云录制，分享后不清晰，后来转码还是什么。总之可以选择本地录制，在上传。

项目管理

以一个需求为例：

产品在钉钉中发消息，说下午要进行某需求评审，请设计、测试、研发相关人员参加，并附上墨刀的原型。

下午通过腾讯会议进行

会议后，项目负责人约定时间出技术方案，之后落实到具体人员后，出工时评估，最后同步到 excel 中。

Tip：项目的技术方案、管理项目的excel都写在钉钉文档中，支持多人一起编辑。

每天会开早会，产品主持，会陆续过一遍现在进行的项目，以及每个项目今天的目标，比如A项目高优bug日清、B项目今天提测、C项目下午20:00上线。

提测通常由主R发起邮件。测试收到邮件就能介入。

Tip：这里主R就是项目技术负责人。

测试完毕，测试同学也会发起邮件通知开发、技术负责人、产品负责人，并请领导确认上线时间，并让开发附上运维须知，并让运维执行。

禅道

主要用于处理bug单。

还有提测前走一遍测试同学给这次需求创建的自测单，初步保证这次提交的需求质量。

钉钉群

每个项目都有一个钉钉群

群里的公告中会有一些公共信息，比如客户端测试环境下载地址、vpn账号和密码等等

早会后，如果当天有A项目的事情计划，会后产品会将今天对A项目的安排发送到该群

前端项目

这是一家科技资讯类的公司，公司主要产品是安卓和ios端。

后台使用 cms 系统来编辑和配置移动端内容。比如编辑、发布一篇文章，设置是否可以点赞...

使用手机分享出去的就是h5项目，可能只需要做几个页面即可。

安卓和ios还涉及一个端内项目。

Tip：端内模板项目是一种在客户端内部运行的项目。前端将构建完的dist目录（端内项目就是普通的前端项目，比如用 vue2开发）发给客户端同学，他们会打包到app中。这种方式的好处：

• 跨平台开发：前端模板通常可以用于多个平台，例如Web、iOS和安卓。这意味着使用前端模板可以使开发人员在不同的平台上实现相似的界面和功能，从而减少工作量和开发成本。
• 代码重用和组件化：前端模板通常提供了一系列预先构建好的组件，例如按钮、输入框、导航栏等。开发人员可以直接使用这些组件来构建界面，而无需从头开始编写每个元素的代码。
  缺点是出现问题，有时不清楚是哪一端的问题，排查起来费劲。

前端这边使用无界的微前端解决方案，将多个系统都需要使用的功能单独出一个项目，然后通过无界将其引入。

项目生产过程

代码通过 git 管理。

不同分支对应 jenkins 不同环境。

比如上测试环境，步骤：提交代码 -> jenkins 找到对应环境的项目（例如 test-projectA）-> 点击构建，有时就生效了（jenkins脚本中没有自动部署），有时则需要自己手动通过 k8s 进行部署。

Tip：Kubernetes（通常简称为K8s）是一个开源的容器编排引擎，用于自动化部署、扩展和管理容器化应用程序

最后发布到线上，直接让运维部署。