2017年公司前端项目分类

1、Express展示网站(express)

Key Tech:

Node、Express.js、artTemplate、jquery、gulp、redis

说明:

此类项目使用Node+Express搭建后台与实现后台逻辑,使用前端template(artTemplate etc)进行模块化,页面逻辑使用原生js或jquery。某些需要存储的功能会用到redis等轻量级数据库。

此类项目作为完整web应用,不需要后端开发人员,所以没有过于复杂的逻辑,目的在于快速搭建活动或展示页面。

上手要点:

此类项目使用gulp进行自动化构建,主要用于打包、编译less、压缩css和js等。

部署要点:

此类项目是Node项目,需要按照项目本身情况在服务器上安装对应版本的Node(一般必须>=4.0.0)。之后运行 npm install 安装依赖。启动应用的方法为node bin/www(或app.js之类)。

使用 forever / pm2 工具保持Node程序在后台运行并提供log。目前线上项目使用pm2。(forever/pm2安装:npm install -g pm2)

域名使用Nginx进行代理。

2、单页应用类后台管理系统(SPA)

Key Tech:

Vue.js、Angular.js、Webpack、

说明:

此类项目使用Vue.js或Angular.js之类的渐进式JavaScript MVC(MVVM)框架作为基础开发,打包编译过之后是一个单页应用(顾名思义只有一个index.html作为入口)。

目前我司主要使用Vue.js,也有几个旧的Angular.js后台在维护。

此类项目由于使用JavaScript MVC框架,组件化极为优秀,特别适合大量js逻辑的富前端后台管理系统使用。同时也可以作为类似于Mobile App的Web App开发,类似于网易云音乐。

此类项目会作为今后Web前端的主要技术积累点。希望在之后迭代系统时可以提取出一个TheONE Vue组件库(吐舌头)。

上手要点:

此类项目一般使用Webpack进行打包,配置了热更新(hot reload),clone好项目后 npm install,npm run dev即可。

对于某些需要连接数据库的项目,可以在本机配置相应服务(webpack config),也可以连接线上数据库或者与人连调。具体咨询相应后端工程师。

部署要点:

由于Webpack会生成一大堆hash命名、内容压缩过的乱七八糟文件,不利于进行项目管理,此类项目的打包构建应该放到服务器上进行。

此类项目是Node项目,需要按照项目本身情况在服务器上安装对应版本的Node(一般必须>=4.0.0)。之后运行 npm install 安装依赖。

由前端工程师帮助调整Webpack的打包目标文件夹,使用npm run build命令进行打包。打包之后会生成一个(默认叫dist)文件夹,包含一个html文件(index.html)作为入口文件,以及一大堆js、css、font、img等资源文件。

部署时把这个index.html当成是一个单纯的html用Nginx监听一下即可。

3、前后端不分离的前端部分(Backend Framework)

Key Tech:

对应后端语言及模板

说明:

此类项目遵循对应后端语言及模板的设定。

上手要点:

需要找对应的后端程序员帮助本地环境搭建。注意,有些功能可以直接通过后端模板实现,不必使用js。

还有一种方法,不用搭建本地环境,直接创建一个本地web项目进行页面开发。不过开发一些需要频繁与后端交互的功能会很难受。

部署要点:

这个就不是前端的专业了。



评论

暂无评论

在这里输入