React服务端渲染

• seo不友好

• 首屏时间长，用户体验差

• 问题 数据同步 路由跳转 SEO信息

• 如何在开发是方便的进行服务的的测试

工程架构

• webpack配置
• node服务
• 服务端渲染的基础

项目架构

• React
• react-router
• mobx配置
• 服务端的优化

业务开发

• 页面开发
• 登陆优化
• 服务端渲染的优化

项目部署

• PM2
• Nginx
• 一键部署

学会

• 工程架构的概念，为什么做工程架构
• 服务端渲染的难点以及如何解决
• react + react-router -mobx 的项目架构模式

WebApp 架构简介

工程架构

• 解放生产力
  1、源代码预处理
  2、自动打包，自动更新页面显示
  3、自动处理图片依赖，保证开发和正式环境的统一
• 围绕解决方案搭建环境
  1、不同的前端框架需要不同的运行架构
  2、预期可能出现的问题，并规避
• 代码规范
• 保证项目规范
• 保证项目质量
  1、code lint
  2、不同环境排出差异
  3、git commit预处理

项目架构

• 技术选型
• 数据解决方案
• 整体的代码风格

web开发常用的网络优化

• 优化方法
  1、合并资源文件，减少http请求
  2、压缩资源文件减小请求大小
  3、利用缓存机制，尽可能使用 缓存减少请求 cache-control
  利用文件内容做一次hash,内容改变，则hash改变，请求新的资源。

模块化工具

1、no
2、seajs
3、requirejs
4、CommonJS

静态文件

使用gulp或grunt等工具手动编译到html, 自由度低，操作复杂或者甚至不处理
交给后端，让后端服务处理。

单页面应用

• 特征
  1、所有内容都在前端生成
  2、js承担更多的业务逻辑，后端只提供API
  3、页面路由跳转不经过后端

常用类库

• react
• vue
• backbone
• ng

模块化工具

• webpack
• rollup

其他考虑因素

• toB or toC
• 移动端 PC端

为什么会有服务端渲染

• 单页面存在的问题
  1、seo不友好
  2、首次请求等待时间不好，体验不好
  使用react-dom/server提供我们将react组件渲染成html的方法

  项目开发的配置

• 常用配置
  1、webpack dev server
  2、hot module replacement
  3、