1.组织介绍

此Group意在打造大前端技术交流平台，打破APP端与Web端等客户端开发平台间的技术壁垒，尽可能的磨平差异化，同时又在各端开发领域深耕技术框架与各类复杂问题的解决方案。

2.组织架构图

3.研发规范

3.1 编码规范

前端规范 app端规范

3.2 组件封装规范

前端规范 app端规范

3.3 分支管理规范

3.3.1 流程示意图

3.3.2 流程描述：

1.迭代流程

• 从master分支迁出dev分支用于当前迭代版本的稳定输出分支用,命名规则为dev/{当次迭代版本号}/main,如dev/0.10.0/main;
• 从第一部的dev分支再迁出各自用于开发需求时使用的self分支,命名规则为dev/{当次迭代版本号}/{当前开发人员姓名拼音首字母},如dev/0.10.0/yyj;
• 在self分支完成开发并通过代理的方式与服务端联调，单项或多项任务完成联调和本地测试后发起merge request，由项目负责人合并回dev分支；
• 将合并后的dev分支代码发布到dev和int环境进行测试，测试失败则继续在self分支上修改，并重复上一步流程直至dev和int环境测试通过；
• 将dev和int环境测试通过的dev分支代码打上对应tag号并发布qa环境进行测试，测试失败则重复第三步操作，直至qa环境测试成功；
• 将qa环境测试通过的dev分支提merge request，由项目负责人合并回master分支，并在master分支上打对应tag号后等待发布；

2.修复流程

• 从master分支迁出hotfix分支用于当前修复版本的稳定输出分支用,hotfix/{上次迭代版本号}/main,hotfix/0.9.0/main;
• 从第一部的hotfix分支再迁出各自用于修复时使用的self分支,命名规则为hotfix/{上次迭代版本号}/{当前开发人员姓名拼音首字母},如hotfix/0.9.0/yyj;
• 在self分支完成开发并通过代理的方式与服务端联调，单项或多项任务完成联调和本地测试后发起merge request，由项目负责人合并回hotfix分支；
• 将合并后的hotfix分支代码发布到hotfix(待建)环境进行测试，测试失败则继续在self分支上修改，并重复上一步流程直至hotfix环境测试通过；
• 将hotfix环境测试通过的hotfix分支代码打上对应tag号并发布qa环境进行测试，测试失败则重复第三步操作，直至qa环境测试成功；
• 将qa环境测试通过的hotfix分支提merge request，由项目负责人合并回master分支，并在master分支上打对应tag号后等待发布；

3.3.3 CodeReview流程

3.3.3.1 Review介入时机

• 在3.3.1描述的分支流程的每个merge request中进行review;
• 遇到merge request体量较大的可以先对粗略review一遍，后续再针对此次mr号进行详细review;

3.3.3.2 Review标准

• 根据3.1和3.2的规范进行Coding层的review；
• 根据业务场景进行需求层的review, 这部分主要针对业务开发过程中的思考深度来进行展开，例如当前功能能否抽象成组件等；

4.技术博客翻译

2020年8月

• Adobe的照片夹特性你应当开始使用起来(Adobe Portfolio Features You Need to Start Using）(原文链接) --於永健

• REPL(Read-Eval-Print Loop 交互式编程环境)驱动设计(REPL Driven Design）(原文链接) --姚颖慧

• 构建自己的编程语言(A Programming Language）(原文链接） --朱清松

• 你应该知道的10个ES2020新特性(10 New JavaScript Features in ES2020 That You Should Know) (原文链接) --胡佳梅

• 我们已经改善了Chrome中图像的延迟加载！(We've improved image lazy-loading in Chrome!) (原文链接) --高珊瑚

• Flutter为什么使用Dart(Why Flutter Uses Dart) (原文链接) --杨斌

• docker化一个Node.js web的应用(Dockerizing a Node.js web app) (原文链接) --许伟

• 探索数据结构(Explore Data Structures) (原文链接) --娄亚明

• Flutter如何工作(How Flutter Works) (原文链接) --曹奔奔

• sqflite第三方库使用翻译(How to Use Sqflite) (原文链接) --杜德汉

• react-mobx 学习(react-mobx Learning) (原文链接) --李俊

• 机器学习(machine-learning) (原文链接) --张继文

• 面向前端开发人员的7个最佳CSS-IN-JS库(7 BEST CSS-IN-JS LIBRARIES FOR FRONT-END DEVELOPERS) (原文链接) --王翠青

• 创建一个区块链保险应用(Build a blockchain insurance app) (原文链接) --张跃

• 如何在js项目中引入ts(How to Add TypeScript to a JavaScript Project ) (原文链接) --朱正品

2020年9月

• REACT NATIVE与FLUTTER进行应用开发 (2020)(REACT NATIVE VS FLUTTER FOR APP DEVELOPMENT (2020)）(原文链接) --娄亚明

• 4种必要的检测网站安全的途径(4 Essential Ways to Check Your Website’s Health）(原文链接) --於永健

• 了解Flutter布局（盒子）约束(Understanding Flutter Layout (Box)Constraints）(原文链接) --杨斌

• 苹果登录验证用户(Authenticating Users with Sign in with Apple）(原文链接) --许伟

• 模态(Modality）(原文链接) --张继文

• Dart对比JavaScript(Dart vs JavaScript）(原文链接) --曹奔奔

• 实用函数式编程(Pragmatic Functional Programming）(原文链接) --姚颖慧

• 高级TypeScript类型备忘单(带有示例)(Advanced TypeScript Types Cheat Sheet (with Examples)) (原文链接) --胡佳梅

• 如何使用AVIF:新一代图像压缩格式(How to Use AVIF: The New Next-Gen Image Compression Format）(原文链接） --朱清松

• React中轻量级动画插件包——react-reveal(React-reveal）(原文链接） --李俊

• 使用定制的静态站点生成器简化堆栈(Simplify Your Stack With A Custom-Made Static Site Generator）(原文链接） --高珊瑚

2020年10月

• React Hook介绍(Introducing Hooks）(原文链接） --於永健

5.技术专题

技术专题	概述及意图	负责人
RxJS	控制数据处理流程及渲染性能	朱清松、待招
Web Worker	浏览器多线程编程思想开拓	朱清松、待招
GraphQL	数据通信优化	张跃
SSR	首页分离	王翠青
ReactHook	react函数式编程思想学习	高珊瑚
Jest	前端单元测试框架	李俊
Cypress	前端UI自动化测试框架	姚颖慧
Typescript	前端强类型校验、采坑排雷	朱正品、胡佳梅
APP-Structure	基于Native+Flutter+H5的App框架	张继文、娄亚明
APP框架功能点	Debug面板、K线渲染、Error监控等	杜德汉、许伟、杨斌、曹奔奔

6.技术分享

6.1 2020Q3

• 前端框架概述（上） -- 朱清松 2020.07.23

• 前端框架概述（下） -- 於永健 2020.08.06

• Android打包上架过程 -- 娄亚明 2020.08.12

• IOS打包上架过程 -- 张继文 2020.08.19

• 前端 Android Flutter三端事件传递机制简述 -- 杨斌 2020.08.27

• NodeJS梗概 -- 许伟 2020.09.03

• Flutter路由机制 -- 杜德汉 2020.09.10

• android插件制作流程 -- 曹奔奔 2020.09.17

• Flutter插件制作流程 -- 曹奔奔 2020.09.17

• 用Service Worker实现前端性能优化 -- 朱清松 2020.09.23