什么是前后端分离？区分前端和后端，需要有一个明确的界限。一般用户能直接看到的都属于前端范畴，前端之外的都属于后端。在ASP、JSP、PHP等传统开发模式中，前端处于混乱状态，可以说完全没有独立的“人格”。前端负责切图和编写静态页面模板，后端将数据渲染成前端提供的页面模板，最后将页面渲染到浏览器进行显示。在这个过程中，前端只是提供页面模板或者写一些JavaScript脚本，有的甚至JS脚本都是后端写的。前端的作用仅限于图片裁剪和样式模板文件。这个角色就是传说中的“形象切割少年”。这也是为什么业界认为前端是一个很简单的工作，只要花一周的时间，学会简单的HTML、CSS和PS技能，就可以胜任这份工作。现在看来，那时候的前端就是打酱油，发展前景很有限。那时候的JavaScript脚本还比较简单，一个jQuery就可以风靡全球。因此，对于精通语言代码的后端程序员来说，可以快速上手JavaScript。对于前端来说，发展空间就更小了。前后端分离不仅仅是简单的代码分离。首先是架构分离解耦，逐步摆脱前后端对架构的依赖。前后端各司其职，分别部署在不同的服务器上，通过RESTful接口传输数据。减轻后端服务器的压力。后端服务器不再负责页面渲染，只负责输入数据，吞吐量提高了数倍。二是逻辑分离。没有分离的时候，业务代码的边界很不清晰，业务逻辑基本都放在后端。分离之后，前端也承担了一部分不应该由后端编写的业务逻辑，数据处理更加清晰。.最后是系统分离。同一个后台系统可以为PC、Mobile、Native等不同的前端终端提供相同的接口数据，而不需要为每一种终端都提供一套接口。同样，对于前端应用来说，更方便的是调用多个后端服务器的接口，在多个系统之间处理和展示数据。为什么要前后端分离？前后端分离使得软件开发流程更加清晰，解决了开发阶段的痛点。以前，前端不仅要学习后端的模板渲染语法，还要配置后端的开发环境，不断同步后端的代码，非常痛苦对于前端。但是现在，前端有了自己的服务器，不需要依赖后端服务器来支撑项目运行。如果是在开发阶段，也可以使用mock数据（首先要和后端确定接口数据??结构）摆脱对后端接口的依赖，大大提高了开发效率，系统分工更加清晰。当然，如果只是提出一个概念，技术上无法实现，那就是一句空话。随着前端技术的更新和发展，gulp、webpack等前端工程化工具在短短几年内得到了发展。HTML5和JavaScript也不断更新新特性，为开发前端独立应用提供前端应用场景和技术支持。ReactNative、PWA、微信小程序都是基于前端技术开发移动应用和小应用，前端进入了一个最好的时代。前端技术这几年的发展，也让后端无法约束前端自己指挥。一定要放开前端，让前端突破自己的空间，发挥大前端的优势。看看下面，这几年前端技术有哪些发展，让前后端分离成为可能。随着微服务的兴起，系统架构解耦、前后端分离是必然趋势。2009年，谷歌推出angularJS，将后端MVC的思想带到了前端。模块化、指令化、双向绑定等特性使得构建前端应用项目成为可能。HTML5规范于2012年定稿，标准于2014年10月实施，HTML5的新特性加速了前端领域的发展。2015年6月17日，ECMAScript6正式版发布，带来了许多新的语言特性，如类、模块和Promise。Nodejs的出现使得用JavaScript编写服务端程序成为可能，一个从前端到后端的系统都可以用JavaScript来开发。Nodejs的事件驱动性能在负载均衡方面表现突出，越来越多的Nodejs服务器被应用到生产环境中。使用由npm管理的JavaScript模块，您可以快速构建可插拔系统。在经历了RequireJS的模块化之后，出现了ReactJS、VueJS等前端框架，将前端模块化推向了一个新的高度。结合ECMAScript6语言类、模块等，用babel编译成浏览器可识别的ES5语法。grunt、gulp、webpack、rollup等打包工具的编译打包，让构建前端应用变得非常简单。前端场景也跳出了PC端网页，有移动端H5页面、微信端页面、HybridApp内嵌页面等。利用前端技术，可以做的网站就是最基本的前端形式，最基本的就是PC端网站和手机端网站。可以在浏览器打开，也可以在微信或者各种app打开（这也是app一直打开webview的方式）。H5游戏H5游戏已经不稀奇了。微信在退出打飞机游戏的时候，推广了H5。游戏的大发展。无需安装，可通过手机浏览器访问。最大的特点是：轻巧简单。H5游戏使用HTML5canvas等开发，也可以使用webgl制作3DH5游戏。MobileAPPNative移动APP是用Native开发语言制作的。比如开发IOSAPP，可以使用Object-c、swift等，开发AndroidAPP，可以使用JAVA或者Kotlin等，我们这里说的手机APP是指前端的使用技术。几年前流行的HybirdAPP框架是ionic，也有国内开发者做的mui和HTML5+框架。这些框架的技术是将html、css和JavaScript打包成一个文件，将文件放在webview中访问，最后将原生应用的shell放在外层，生成IOS和Android的安装文件。这种APP可以做很多简单的APP，但是不适合做交互比较复杂的APP，因为webview的性能还存在一定的问题，在Android设备上的实现滞后比较明显。近两年，基于React的ReactNative和基于Vue的Weex框架已经成为使用前端技术开发移动应用的新一代框架。他们摒弃了webview，使用了新的渲染机制，大大提升了app的性能。性能和体验。这两者目前都处于完善阶段，未来非常有前途。桌面应用使用Nodejs和基于Chromium的框架Electron，这使得使用HTML、CSS和JavaScript开发跨操作系统的桌面应用成为可能。应用程序可以在windows、maxOS和linux系统上运行。ChromeAPP运行在Chrome浏览器上的插件是运行在Chrome上的HTML应用程序，完全采用前端技术开发生产。2010年，谷歌推出了基于Chrome开发的PC端操作系统ChromeOS。它的特点是速度快，设计简单。相应地，市场上也推出了很多基于ChromeOS的笔记本电脑，包括三星和戴尔。微信小程序2017年1月，微信退出小程序，一度引爆前端行业。小程序是根据前端技术设计开发的，系统的兼容性和不同设备的适配也有很好的设计。开发者只需要专注于实现业务代码。因此，只要熟悉了前端技术，就可以很快做出一个小程序。在WebVR和WebAR这两年，新兴和流行的技术是人工智能和机器学习，其次是VR和AR。去年年底，QQ和支付宝都在AR和VR方面做了尝试，都在抢红包。练习上。前端技术webgl可以在浏览器上很好的实现3D场景，而Three.js就是这样一个方便好用的JavaScript框架。Chrome浏览器已经兼容WebVR，配合DaydreamView，可以浏览WebVR页面。前后端分离后，需要考虑什么？分离出来的前端不再是简单的HTML文件，而是一个独立的应用系统。除了考虑页面的数据渲染和展示，还需要用工程化的思维来考虑前端架构、前后端交互、数据安全等。架构前端应用部署在Nodejs、Nginx或者Nodejs和Nginx的组合服务器上，页面请求通过反向代理转发到后端服务器，相当于在传统流程上加了一个Nodejs层。当然也可以使用Nodejs服务器来承担部分负载均衡工作，业务逻辑也可以在Nodejs层处理，例如：通过判断请求是来自PC还是APP，请求被发送到不同的后端服务器。在Nodejs的架构中，分层是这样的：在RESTful接口交互前后端分离后，更多的是使用RESTful风格的接口与后端进行数据交互。REST是“REpresentationalStateTransfer（代表状态转移）”的缩写，是一种API架构风格，通过在客户端和服务端之间传递表现状态来驱动应用状态的演化。在RESTfulWeb服务中，每个资源都有一个地址。资源本身都是方法调用的目标，所有资源的方法列表都是一样的。这些方法是标准的，包括HTTPGET、POST、PUT、DELETE，可能还有HEADER和OPTIONS。RESTfulAPI设计使得后端可以通过接口向前端传输数据，数据的格式通常是JSON等常见格式。对于前端，只要后端返回RESTful数据，不管后端是用Java、python还是PHP写的，请依赖后端，让前端系统独立。Nodejs的工程化建设不仅可以作为前端服务器，在开发阶段也能起到很大的作用。前端生态的发展围绕Nodejs展开。使用npm管理项目依赖，可以在Nodejs环境下很好的维护和运行。grunt、gulp、webpack、rollup等打包工具都运行在nodejs上，结合语法编译、打包、部署等插件，将应用输入为一个完整的应用。如果你使用的是Angular、React、Vue框架，或者你使用的ES6语法还不兼容浏览器，你需要使用babel将语法编译成浏览器可以识别的ES5语法，然后再打包应用。SPASPA是单页网络应用程序（singlepagewebapplication，SPA）的缩写，即只有一个网页的应用程序，加载单个HTML页面并在用户与应用程序交互时动态更新页面的网络应用程序.像Angular、React或Vue都是为SPA设计的，结合前端路由库（react-router、vue-router）和状态热存储（redux、vuex）等，可以开发出媲美NativeAPP的WebAPP，用户体验得到了极大的提升。当然，SPA并不完美，也不适合所有的Web应用。需要结合项目和场景来选择。SPA有以下缺点：初始加载时间增加。代码拆分和延迟加载可用于提高性能并减少初始加载时间。SEO不友好，现在可以通过Prerender或者Serverrender来解决一部分。页面的前后端需要开发者自己写，但是现在有一些路由库已经帮我们基本解决了。对开发人员的要求很高。由于做SPA需要了解一整套技术栈，后期需要考虑是否有合适的人选进行维护。掌握哪些技术可以更好的开发前端应用前端技术日新月异，发展迅速。作为一个与时俱进的前端工程师，我们还是需要不断学习和更新技术栈的。在这种情况下，我们需要掌握哪些技术呢？下面列出了一些前端技术，其中一些技术在新系统中已经不再使用，但是仍然有很多老系统在使用它们。语言知识ES5&ES6&ES7//ES语言基础HTML5API&CSS3//HTML5和CSS特效Less&Sass//CSS预编译语言SVG&Canvas&D3.js//图形数据可视化WebGL&Three.js//3D场景CMD&AMD&CommonJS//语言标准RequireJS&SeaJS//ES模块化库CoffeeScript&TypeScript//ES语言风格库NodeJS&Express&Koa//NodewebserverTCP&HTTP&WebSocket//网络协议框架，库jQueryBackboneEmberAngular&Angular2&Angular4ReactVue&Vue2Ionic&Ionic2ReactNativeWeexElectron......工具SublimeText&Atom&Webstorm&VScode//Editor,IDESVN&Git//代码管理,VersionControlChromeDevTools&FireFoxDeveloperEdition//浏览器开发者工具ESLint&JSLint//JavaScript代码语法检查ReactDevTools//react调试工具ReduxDevTools//redux调试工具VueDevTools//vue调试工具Grunt&Gulp&browserify&Webpack//代码打包工具Babel//语法转换工具等如ES6、react等，将代码转成ES5forever*pm2//nodejs项目部署工具karma&mocha&PhantomJS//自动化测试框架...最后，前端时代的到来，是前端开发最好的时代，也是最坏的时代。好景不长，是因为各种前端技术更新换代，开始应用到更多的场景，发挥更大的优势和作用。对于前端开发者来说，机会很多。说是最差的时代，因为技术更新迭代速度非常快，整个技术栈可能两三年就要更新一次。被打入海浪之后。
