前端架构

qiankun + vue + element 的微前端架构项目，主项目与子应用均使用vue。支持三大前端框架可根据自己需求调整。 微前端 qiankun 微前端是什么、为什么要做微前端、qiankun是什么这些笔者将不再叙述，在前端微服务话提出的两年里已经有过了很多次的讨论和“定义”。 qiankun有兴趣的可以搜一下。 暂时还对这方面未有过了解的同学-> 传送门： 可能是你见过最完善的微前端解决方案 , qiankun 简单使用教程 鉴于qiankun文档只有寥寥十几行，这里做一个简单的概述（搬运）。 话不多说上步骤及代码： 创建一个主项目工程目录 npm install qiankun 改造主项目入口文件： main.js // 导入qiankun依赖 import { registerMicroApps, runAfterFirstMounted, setDefaultMountApp, start } from "qiankun"; function render({ appContent, loading }) { if (!app) { app = new Vue({ el: "#container", router, store, data() { return { content: appContent, loading }; }, render(h) {

http://caibaojian.com/some-fe 蒋长浩博士 Facebook 介绍：蒋长浩，祖籍湖南，获清华大学计算机本硕学位、伊利诺伊大学(UIUC)博士学位，在卡耐基梅隆大学(CMU)、谷歌公司从事过“普适计算~大规模计算”的优化研究。在Facebook任研究科学家，他创造BIGPIPE，使大型网站访速翻1倍，举世关注。 钱宝坤 新浪微博 微博：貘吃馍香 博客： http://w3help.org 混迹于IT行业多年的普通程序员，偏好浏览器相关内容研究。w3help.org文章内容主要提供者之一。现就职于新浪微博前端基础架构组，参与微博前端公用组件开发，以及前端工具开发相关工作。 嗷嗷 淘宝网 微博：aoao 博客： http://www.aoao.org.cn 介绍：从事前端开发多年，期间做过设计转过产品，混过后端，写过《Web标准设计》一书。目前就职于淘宝网，主要负责前端性能监控、优化等前端开发相关的工作。 郭润增 腾讯 微博：grzcn 博客： http://grz.qzone.qq.com 介绍：aka郭小帅，08年毕业加入腾讯QQ空间前端团队至今一直在关注Web前端优化，主要负责Qzone Feeds和个人中心的业务特性和性能优化，也是Qzone 6.0的开拓者之一。 李成银 百度 微博：welefen 博客： http://www.welefen.com

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> # 前端工程——基础篇 > 喂喂喂，那个切图的，把页面写好就发给研发工程师套模板吧。 你好，切图仔。 不知道你的团队如何定义前端开发，据我所知，时至今日仍然有很多团队会把前端开发归类为产品或者设计岗位，虽然身份之争多少有些无谓，但我对这种偏见还是心存芥蒂，酝酿了许久，决定写一个系列的文章，试着从工程的角度系统的介绍一下我对前端，尤其是Web前端的理解。 只要我们还把自己的工作看作为一项软件开发活动，那么我相信读过下面的内容你也一定会有所共鸣。 ## 前端，是一种GUI软件 现如今前端可谓包罗万象，产品形态五花八门，涉猎极广，什么高大上的基础库/框架，拽炫酷的宣传页面，还有屌炸天的小游戏……不过这些一两个文件的小项目并非是前端技术的主要应用场景，更具商业价值的则是复杂的Web应用，它们功能完善，界面繁多，为用户提供了完整的产品体验，可能是新闻聚合网站，可能是在线购物平台，可能是社交网络，可能是金融信贷应用，可能是音乐互动社区，也可能是视频上传与分享平台…… > 从本质上讲，所有Web应用都是一种运行在网页浏览器中的软件，这些软件的图形用户界面（Graphical User Interface，简称GUI）即为前端。 如此复杂的Web应用，动辄几十上百人共同开发维护，其前端界面通常也颇具规模

1:MVC模式首先不是框架！！（之前我公司新招聘进来的一个前端，刚毕业不久的，可能在学校学过Spring MVC，争论说MVC就是一个Java框架）。 2:其次，MVC也不是设计模式！！设计模式是使代码能够高复用的，减少重复搬砖工作的编写代码设计经验的总结；是具体到解决业务问题的（如单例模式，策略模式，桥接模式，观察者模式）。在菜鸟教程网也把MVC放在了设计模式左边那一栏；非常容易让匆忙学习了去面试的同学理解错误。 MVC模式其实准确来说是【框架模式】；框架模式在设计模式之上，也有利于提高代码的复用，而且是设计框架的思考和总结，框架模式会包含很多设计模式，例如MVC中就包含观察者模式，策略模式，组合模式，单例模式等等。在不同的代码模块会使用不同的设计模式达到最好的效果。 老生常谈，面试常备问题：什么是MVC，分别代表了什么？ 网上一搜索一大把。 M（models）：数据模型层；主要就是用来处理具体的业务逻辑，要加减乘除，割接拼接字符串，根据标志配状态什么乱七八糟业务处理都在这里；也在这里进行数据库的CURD增删改查操作，Spring 中还有种说法是持久层，其实就是数据持久化，也就是保存数据库；持久层框架就是类似于Mybatis和Hibernate之类那些。 V（view）：视图层；就是用来展示处理后的数据的页面。 C（controller）：控制器层；起到一个中介的作用

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 前端是什么？ 在回答这个问题之前，我想到了一道面试题： 当我们在浏览器中输入网址并按回车之后，接下来会发生什么？ 我们来简单地看一看 “网页展现” 的整个过程。 比如这里有一个用户，它需要访问 abc.com 这个网址。一般来说，当用户输入一个域名时，是在请求一个 HTML 资源。当他完成域名解析之后，他的浏览器会向 abc.com 这个域名所指向的 Web 服务器发出请求。 有时候 Web 服务器直接就可以返回用户的请求了；有时候 Web 服务器还需要向数据库查询一些数据，然后才能把处理结果返回给用户。 当用户的浏览器拿到服务器返回的 HTML 资源之后，就开始解析并显示 HTML 的内容了。 一般来说，HTML 页面需要 CSS 资源来描述页面的样式。比如浏览器在解析 HTML 时发现了一个 CSS 外链 abc.com/a.css ，它就会去请求这个资源。 HTML 页面往往还需要加载外部的 JS 资源，比如 abc.com/a.js ，此时浏览器同样会向服务器请求这个资源。 当所需的资源都加载完成之后，这个页面就可以提供完整的外观和功能了。整个过程差不多就是这个样子了。 我们看一看这张流程图，可以在中间画一道竖线，把它分成左右两个部分。 我们会发现，这道线左侧的事情发生在浏览器端，我们称之为 “前端”

5 月 25 日，以「无界」为主题的第二届微医前端技术沙龙成功举办。本届沙龙的演讲题目涵盖了前端技术几个主要的应用场景，包括服务端、桌面端以及跨平台的开发。最近几年前端技术发展非常快，各种可以提高开发效率的新技术和框架层出不穷，让原来的前端工程师蜕变成了新一代的全端工程师，技术之间的界限被打破，相互碰撞、融合和进化。 活动伊始，本届沙龙活动主持人，来自用户技术部的前端团队负责人洪波对远道而来的微医外部30多家公司的同行和100多位来自内部各个部门的同事表示了欢迎，感谢大家挤出宝贵的周末时间来参加第二届微医前端技术沙龙，并对本次沙龙的主题进行了阐述和说明。 本届沙龙邀请到了公司元老级的前端工程师立明为本次沙龙致开幕辞，立明目前是用户技术部负责人，带着近150人的技术团队。立明向大家介绍了微医的业务以及在互联网医疗领域做的创新探索。接下来，韩高钶、高翔、宋睿、蒋嘉巍、殷利萍、胡梦杰与张明峰7位讲师分别给大家做分享与交流。 主题一《Feb.js - 基于 Vue 的通用应用框架》 医院平台的韩高钶 ，结合微医在SSR实践中的经验为我们介绍了 Vue SSR 的实现原理，针对 SSR 架构中存在的一些挑战来介绍 Feb.js 是如何保证服务的高可用、高性能和高体验的，以及如何快速的使用 Feb.js 搭建一个企业级的 SSR 应用。 主题二《微医在 Node.js 微服务方向的探索》

相对于桌面端浏览器，移动端Web浏览器上有一些较为明显的特点：设备屏幕较小、新特性兼容性较好、支持一些较新的HTML5和CSS3特性、需要与Native应用交互等。但移动端浏览器可用的CPU计算资源和网络资源极为有限，因此要做好移动端Web上的优化往往需要做更多的事情。首先，在移动端Web的前端页面渲染中，桌面浏览器端上的优化规则同样适用，此外针对移动端也要做一些极致的优化来达到更好的效果。需要注意的是，并不是移动端的优化原则在桌面浏览器端就不适用，而是由于兼容性和差异性的原因，一些优化原则在移动端更具代表性。 一、网络加载类 1．首屏数据请求提前，避免JavaScript文件加载后才请求数据 为了进一步提升页面加载速度，可以考虑将页面的数据请求尽可能提前，避免在JavaScript加载完成后才去请求数据。通常数据请求是页面内容渲染中关键路径最长的部分，而且不能并行，所以如果能将数据请求提前，可以极大程度上缩短页面内容的渲染完成时间。 2．首屏加载和按需加载，非首屏内容滚屏加载，保证首屏内容最小化 由于移动端网络速度相对较慢，网络资源有限，因此为了尽快完成页面内容的加载，需要保证首屏加载资源最小化，非首屏内容使用滚动的方式异步加载。一般推荐移动端页面首屏数据展示延时最长不超过3秒。目前中国联通3G的网络速度为338KB/s（2.71Mb/s）

PC 浏览器前端优化策略 PC 端优化的策略很多，如 YSlow（YSlow 是 Yahoo 发布的一款 Firefox 插件，现 Chrome 也可安装，可以对网站的页面性能进行分析，提出对该页面性能优化的建议）原则，或者 Chrome 自带的 Audits 等，总结起来主要包括网络加载类、页面渲染类、CSS 优化类、JavaScript 执行类、缓存类、图片类、架构协议类等几类，下面逐一介绍。 网络加载类 1．减少 HTTP 资源请求次数 在前端页面中，通常建议尽可能合并静态资源图片、JavaScript 或 CSS 代码，减少页面请求数和资源请求消耗，这样可以缩短页面首次访问的用户等待时间。通过构建工具合并雪碧图、CSS、JavaScript 文件等都是为了减少 HTTP 资源请求次数。另外也要尽量避免重复的资源，防止增加多余请求。 2．减小 HTTP 请求大小 除了减少 HTTP 资源请求次数，也要尽量减小每个 HTTP 请求的大小。如减少没必要的图片、JavaScript、CSS 及 HTML 代码，对文件进行压缩优化，或者使用 gzip 压缩传输内容等都可以用来减小文件大小，缩短网络传输等待时延。前面我们使用构建工具来压缩静态图片资源以及移除代码中的注释并压缩，目的都是为了减小 HTTP 请求的大小。 3．将 CSS 或 JavaScript 放到外部文件中，避免使用

构建单页Web应用 摘自 前端农民工的博客 让我们先来看几个网站： coding teambition cloud9 注意这几个网站的相同点，那就是在浏览器中，做了原先“应当”在客户端做的事情。它们的界面切换非常流畅，响应很迅速，跟传统的网页明显不一样，它们是什么呢？这就是单页Web应用。 所谓单页应用，指的是在一个页面上集成多种功能，甚至整个系统就只有一个页面，所有的业务功能都是它的子模块，通过特定的方式挂接到主界面上。它是AJAX技术的进一步升华，把AJAX的无刷新机制发挥到极致，因此能造就与桌面程序媲美的流畅用户体验。 其实单页应用我们并不陌生，很多人写过ExtJS的项目，用它实现的系统，很天然的就已经是单页的了，也有人用jQuery或者其他框架实现过类似的东西。用各种JS框架，甚至不用框架，都是可以实现单页应用的，它只是一种理念。有些框架适用于开发这种系统，如果使用它们，可以得到很多便利。 开发框架 ExtJS可以称为第一代单页应用框架的典型，它封装了各种UI组件，用户主要使用JavaScript来完成整个前端部分，甚至包括布局。随着功能逐渐增加，ExtJS的体积也逐渐增大，即使用于内部系统的开发，有时候也显得笨重了，更不用说开发以上这类运行在互联网上的系统。 jQuery由于偏重DOM操作，它的插件体系又比较松散，所以比ExtJS这个体系更适合开发在公网运行的单页系统

摘自 前端农民工的博客 让我们先来看几个网站： coding teambition cloud9 注意这几个网站的相同点，那就是在浏览器中，做了原先“应当”在客户端做的事情。它们的界面切换非常流畅，响应很迅速，跟传统的网页明显不一样，它们是什么呢？这就是单页Web应用。 所谓单页应用，指的是在一个页面上集成多种功能，甚至整个系统就只有一个页面，所有的业务功能都是它的子模块，通过特定的方式挂接到主界面上。它是AJAX技术的进一步升华，把AJAX的无刷新机制发挥到极致，因此能造就与桌面程序媲美的流畅用户体验。 其实单页应用我们并不陌生，很多人写过ExtJS的项目，用它实现的系统，很天然的就已经是单页的了，也有人用jQuery或者其他框架实现过类似的东西。用各种JS框架，甚至不用框架，都是可以实现单页应用的，它只是一种理念。有些框架适用于开发这种系统，如果使用它们，可以得到很多便利。 开发框架 ExtJS可以称为第一代单页应用框架的典型，它封装了各种UI组件，用户主要使用JavaScript来完成整个前端部分，甚至包括布局。随着功能逐渐增加，ExtJS的体积也逐渐增大，即使用于内部系统的开发，有时候也显得笨重了，更不用说开发以上这类运行在互联网上的系统。 jQuery由于偏重DOM操作，它的插件体系又比较松散，所以比ExtJS这个体系更适合开发在公网运行的单页系统