前端架构

HTML与CSS 初级 《Head First HTML与CSS(第2版)》豆瓣评分：9.3 入门经典，初始获得信息的好途径。帮助读者逐步构件小的知识点，再结合一本整体的类别逻辑型的书，就可以把所有基础知识学清楚了。 中级 《CSS权威指南(第三版)》 豆瓣评分 8.5 本书适合自学过 CSS 的人但希望全面了解 CSS 的人阅读。由浅入深，全面易懂，不愧为权威指南。虽然内容有点儿老，但依然能够满足学习的需求。希望出版社能引进更新的版本。 《css禅意花园》豆瓣评分 8.4 这本书的作者是世界著名的网站设计师，书中的范例来自网站设计领域最著名的网站——CSS Zen Garden（CSS禅意花园）。 书籍较老，但理念却很经典。 高级 《CSS揭秘》豆瓣评分 9.4 多年难得一见的重磅 CSS 书籍，看得很过瘾，CSS 进阶必读。 JavaScript 初级 《javascript语言精粹》豆瓣评分9.1 本书通过对JavaScript语言的分析，甄别出好的和坏的特性，从而提取出相对这门语言的整体而言具有更好的可靠性、可读性和可维护性的JavaScript的子集，以便你能用它创建真正可扩展的和高效的代码。 雅虎资深JavaScript架构师Douglas Crockford倾力之作。 向读者介绍如何运用JavaScript创建真正可扩展的和高效的代码。 《JavaScript

⽇前，开源中国翻译了前端开发者罗伯托·埃尔南德斯（Roberto Hernandez）的⼀篇⽂章，作者根据⾃⼰对前端发展现状的观察，以及⼀些已有调查的研究，对 2020 年的前端发展趋势做出了个⼈预测，以下是部分重点内容。 微前端——微服务的扩展 这可能是近年来前端中的最新问题。2019 年，微前端确实获得了不少关注，2020 年，它将被越来越多的开发⼈员和公司接受和使⽤。 那么，究竟什么是微前端呢？⽬前⽹络上对其普遍的定义是：微前端是⼀种类似于微服务的架构，它将微服务的理念应⽤于浏览器端，即将单⻚⾯前端应⽤由单⼀的单体应⽤转变为多个⼩型前端应⽤聚合为⼀的应⽤。 在 2020 年，微前端架构将继续受到关注，因为它有助于解决应⽤程序和组织复杂架构中的重⼤问题。 前端框架——React.js 最受喜爱 2019 年的 JavaScript 现状调查结果显示，React 仍以最⾼的满意率蝉联第⼀。Stack Overflow 的调查中也体现了开发⼈员对 React 的喜爱，很多⼈表示会继续使⽤ React 构建漂亮、健壮且可扩展的应⽤程序。 此外，我们还应关注快速增⻓的 Svelte.js。它在短短的⼀年内吸引了不少爱好者，现在它的受欢迎程度⾮常接近 React.js。 Web组件 根据 MDN 的定义，“Web 组件是⼀套不同的技术套件，能够⽤来创建可重⽤的⾃定义元素

基本思路 1. 为什么要做组件化？ 无论前端也好，后端也好，都是整个软件体系的一部分。软件产品也是产品，它的研发过程也必然是有其目的。绝大多数软件产品是追逐利润的，在产品目标确定的情况下，成本有两个途径来优化：减少部署成本，提高开发效率。 减少部署成本的方面，业界研究得非常多，比如近几年很流行的“去IOE”，就是很典型的，从一些费用较高的高性能产品迁移到开源的易替换的产品集群，又比如使用Linux + Mono来部署.net应用，避开Windows Server的费用。 提高开发效率这方面，业界研究得更多，主要途径有两点：加快开发速度，减少变更代价。怎样才能加快开发速度呢？如果我们的开发不是重新造轮子，而是 每一次做新产品都可以利用已有的东西，那就会好很多。怎样才能减少变更代价呢？如果我们能够理清模块之间的关系，合理分层，每次变更只需要修改其中某个部 分，甚至不需要修改代码，仅仅是改变配置就可以，那就更好了。 我们先不看软件行业，来看一下制造行业，比如汽车制造业，他们是怎么造汽车的呢？造汽车之前，先设计，把整个汽车分解为不同部件，比如轮子，引擎，车门， 座椅等等，分别生产，最后再组装，所以它的制造过程可以较快。如果一辆汽车轮胎被扎破了，需要送去维修，维修的人也没有在每个地方都修一下，而是只把轮胎 拆下来修修就好了，这个轮胎要是实在坏得厉害，就干脆换上个新的，整个过程不需要很多时间。

我所遇到的前端程序员分两种： 第一种一直在问：如何学习前端？ 第二种总说：前端很简单，就那么一点东西。 我从没有听到有人问：如何做一名优秀、甚至卓越的WEB前端工程师。 如何成为一名优秀的web前端工程师 何为：前端工程师？ 前端工程师，也叫Web前端开发工程师。他是随着web发展，细分出来的行业。 Web前端开发技术主要包括三个要素：HTML、CSS和JavaScript! 它要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。 随着近两三年来RIA(Rich Internet Applications的缩写，中文含义为：丰富的因特网应用程序)的流行和普及带来的诸如：Flash/Flex，Silverlight、XML和 服务器端语言(PHP、http://ASP.NET，JSP、Python)等语言，前端开发工程师也需要掌握。 前端开发的入门门槛其实很低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。 HTML 甚至不是一门语言，他仅仅是简单的标记语言! CSS 只是无类型的样式修饰语言。当然可以勉强算作弱类型语言。 Javascript 的基础部分相对来说不难，入手还算快。 也正因为如此

Serverless 是当下炙手可热的技术，被认为是云计算发展的未来方向，拥有免运维、降低开发成本、按需自动扩展等诸多优点。尤其是在前端研发领域，使用 Node 开发云函数，可以让前端工程师更加专注于业务逻辑，实现全栈工程师的角色转变。但现有的开发模式、工具、脚手架已经标准化、流程化，存量业务正在线上稳定运行，如何将 Serverless 融入到现有开发模式和工具中？如何将 Serverless 和当前的业务进行结合落地？本文将尝试给出解答。 本文内容整理自腾讯 Serverless 技术专家王俊杰在 GMTC 2019 深圳站的演讲。 前端与 Serverless 的不解之缘 目前很多前端同学都在学习 Serverless，很多文章和教程对 Serverless 都有不同方式的解读，今天我们首先来回顾三个问题： 究竟什么是 Serverless？ Serverless 是否等于 FaaS 加 BaaS？ 我们所说的 FaaS 是什么？ 加州大学伯克利分校 2019 年 3 月份发表过一篇论文，名为《Cloud Programming Simplified: A Berkeley View on Serverless Computing》，文中对“Serverless 是什么”进行了一些描述： Put simply,serverless computing = FaaS +

　　前文讲到了CSI技术，这就说明网站静态化技术的讲述已经推进到了浏览器端了即真正到了web前端的范畴了，而时下web前端技术的前沿之一就是前后端分离技术了，那么在这里网站静态化技术和前后端分离技术产生了交集，所以今天我将讨论下前后端分离技术，前后端分离技术讨论完后，下一篇文章我将会以网站静态化技术的角度回过头来重新审视下前后端分离技术，希望通过这种审视来加深我们对两套技术的理解。 　　前后端分离技术我个人认为是web前端被专业化以后的必由之路，而nodejs的出现是前后端分离技术的一个强兴的催化剂，原因是nodejs的出现削平了前端技术和服务端技术之间的鸿沟，使得前后端两套不同技术体系进行真正意义的解耦提供了无限的可能性。但是如果我们把nodejs技术的使用认为就是实现了前后端分离，这种理解又实在太肤浅了，下面我将讲讲我研究过的前后端分离技术方案，以及这些技术方案隐藏在背后思考，希望这些思考能给大家以一个新的思路来理解前后端分离技术。 　　我们要深刻理解前后端分离技术有一个重要的前提，那就是要把前后端分离技术认为是传统的web 应用里的MVC 设计模式的进一步演进 。那么我们首先来看看MVC的定义，下面的内容摘录于维基百科的解释，具体如下： MVC模式（Model-View-Controller）是软件工程中的一种软件架构模式，把软件系统分为三个基本部分：模型（Model）、视图

对于前后端分离该怎样理解？ 不能把对前后端分离的理解拘束在某个具体的框架或者技术中，这样会太过于局限。 以前，后端开发相较于前端更有牌面，很多公司没有前端工程师这个职位，前端的工作都由后端来做，例如JSP就是一个前后端耦合的技术，需要不停的套模板。现在很多的服务都开始web化，那么前端需要展示的东西就变得越来越而复杂，这种时候JSP这种套模板的技术就没有办法高效开发。在本质上，前端当时没有像Spring这样对于后端有着工程化，模式化的思想。所以出现了很多效率低下的问题，前端工作变得越来越繁复，所以需要前后端的分离。前端也需要工程化模式化的去做，从本质上来看前后端分离不是一个技术问题，而是一个工程化的考量和一个项目管理的问题，前端开发十分的繁琐，不停的复制粘贴，东拼西凑，不像Java那样便于管理，所以像Vue.js和React,js这些前端框架的出现本质上改变了前端开发，所以我们管这些框架叫：前端开发工程性框架，至此前端开发才变得有章可循。 前后端分离该怎样实施？ 在开发的四大步中，设计、开发、测试、部署，前后端分离应该渗透到每一步中。 第一个阶段设计阶段：第一个层面是系统设计阶段，后端开发比较好理解，包括系统架构设计，数据库，中间件，缓存等，考虑容量，扩展性，可维护性等问题。前端也应该如此，前端的页面很多很复杂，前端的项目架构应该做好充足的准备，一定要满足长期性可演变可进化的目标。

前端基础 一、HTTP,HTML,浏览器 1、说一下 http 和 https https 的 SSL 加密是在传输层实现的。 (1)http 和 https 的基本概念: http: 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器 端请求和应答的标准(TCP)，用于从 WWW 服务器传输超文本到本地浏览器的传输协议，它可以 使浏览器更加高效，使网络传输减少。 HTTP 是一个基于 TCP/IP 通信协议来传递数据(HTML 文件, 图片文件, 查询结果等)HTTP 是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。 它于 1990 年提出，经过几年的使用与发展，得到不断地完善和扩展。目前在 WWW 中使用的是 HTTP/1、0 的第六版，HTTP/1、1 的规范化工作正在进行之中，而且 HTTP-NG(Next Generation of HTTP)的建议已经提出。HTTP 协议工作于客户端-服务端架构为上。浏览器作为 HTTP 客户端通过 URL向HTTP服务端即WEB服务器发送所有请求。Web服务器根据接收到的请求后，向客户端发送 响应信息。 https: 是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。

前端开发 前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。 移动互联网带来了大量高性能的移动终端设备以及快速的无线网络，HTML5，node.jS的广泛应用，各类框架类库层出不穷。 发展历程 前端技术的发展是互联网自身发展变化的一个缩影。 前端技术指通过浏览器到用户端计算机的统称，存贮于服务器端的统称为后端技术。 前端开发主要职能就是把网站的界面更好地呈现给用户。 以前会Photoshop和Dreamweaver就可以制作网页，随着网站开发难度加大、开发方式多样，网页制作更接近传统的网站后台开发，网页制作更多被称为Web前端开发。前端技术包括4个部分：前端美工、浏览器兼容、CSS、HTML“传统”技术与Adobe AIR、Google Gears,以及概念性较强的交互式设计，艺术性较强的视觉设计等。 在Web1.0时代，由于网速和终端能力的限制，大部分网站只能呈现简单的图文信息

心之所向，勇往直前！ 记录开发过程中的那些小事，给自己加点经验值。 前言 作为一个 .Net后端 开发，在竞争愈加激烈的当下，掌握点前端配菜好像已经是家常便饭了。 刚好在工作的第5个年头，辞去小主管职务的我要再次踏上面试之路，为了要避免被面试官吊打，除了复习《吊打面试官》相关的题目，当然也要对自己掌握的技能温故知新。 　　 项目使用了Vue cli3.0作为基础架构，这个版本和2.0的有一些不同。具体参考： 　　1. 《 vue cli3.0快速搭建项目详解 》 　　2. 《vue-cli2.0与vue-cli3.0》 　　环境 　　 　　技术栈 上面是项目的一些基本情况，至于实际开发用到的组件这个每个人的项目都有可能不同，这里就不贴出来了;而且这个系列只是对一些关键点进行记录和说明，其他的在网上都可以找到资料的内容就不再重复。 架构 　　微服务 这个词可以说是大火特火，现在很多应用都在逐步朝着这方面转移。 　　这个架构的好处，我想是不言而喻的。浅显点理解就是 独立运行、灵活、扩展性强 。 　　在调整后端架构的同时，我就想前端能不能也实现这种模式？在查找了几天资料（主要参考 《 滴滴 webapp 5.0 Vue 2.0 重构经验分享 》 ）理清思路后，就抽出空余的时间之后就搞出这一套架构。不过距离真正的微前端还是有些差距。毕竟现在前端的框架那么多（Vue、React