大前端与前后端分离

一、大前端

  简单来说,大前端就是所有前端的统称,比如Android、iOS、web、Watch等,最接近用户的那一层也就是UI层,然后将其统一起来,就是大前端。大前端最大的特点在于一次开发,同时适用于所有平台,开发者不用为一个APP需要做Android和iOS两种模式而担心。大前端是web统一的时代,利用web不仅能开发出网站,更可以开发手机端web应用和移动端应用程序。

  由于node的出现,前端工程师不需要依赖于后端程序而直接运行,从而前后端分离起来。所以当开发一个新产品的时候服务只需要写一次,但是面向用户的产品可能有很多,例如网站、Android客户端、iOS客户端和微信小程序等。由于各个平台使用的技术栈都不一样,代码无法复用,非常浪费人力、物力。那么有没有什么技术能够解决这一痛点呢?大前端应运而生,其实大前端的主要核心就是跨平台技术,有了跨平台技术,各个平台的差异性就抹平了,开发者只需要一套技术栈就可以开发出适用于多个平台的客户端。

  目前的主流跨平台方案:Cordova/phoneGap、React Native、Weex、微信小程序、PWA和Flutter等,根据其原理性,可以分为四大类。

  • H5+原生(Cordova、Ionic、微信小程序)
  • JavaScript开发+原生渲染 (React Native、Weex、快应用)
  • 自绘UI+原生(Flutter)
  • 增强版Web App(PWA)

  大前端不仅会成为移动开发与Web前端的发展趋势,也将会是未来的显示设备终端的开发技术趋势。大前端将做更多的终端开发、工程化等工作,而不仅仅只是开发Web页面。大前端工程师将能搞定所有端上的开发。与充满争议的全栈工程师相比,它更具可操作性。但同时对开发者而言,要会更多的技术栈,比如原生开发者要学习html、css、js等前端知识,前端开发人员也要学习Android或iOS的原生开发技术,然后了解一下常见的跨平台技术,只有这样才能更好的融入到大前端的这个大家庭中。

二、前后端分离

  前后端分离是指前端HTML页面通过AJAX调用后端的RESTFUL API接口并使用JSON数据进行交互,例如通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦。

  以前的Java Web项目大多数都是Java程序员又当爹又当妈,又搞前端,又搞后端。随着时代的发展,渐渐的许多大中小公司开始把前后端的界限分的越来越明确,前端工程师只管前端的事情,后端工程师只管后端的事情。正所谓术业有专攻,一个人如果什么都会,那么他毕竟什么都不精。大中型公司需要专业人才,小公司需要全才,但是针对技术而言,前后端需要分离。

  大家一致认同的前后端分离的例子就是SPA(Single-page application),所有用到的展现数据都是后端通过异步接口(AJAX/JSONP)的方式提供的,前端只管展现。详细点此处

三、敏捷模型

  使用前后端分离符合敏捷开发模式,利用nodeJS层夹在前后端中间充当Controller,作为前后端之间的桥梁,增加灵活性。  

  从技术角度,使得项目从面向UI转变为面向服务,适合于超大项目的同一套后端,多套前端的模式,后端只提供数据Model,viewModel由不同的端自行渲染,即后端只要提供满足的数据需求就可以了,剩下的事情,就让“大前端”内部自己解决。

  从开发人员角度,使得前后端可同时并行开发,前后端完全解耦。产品经理提出PRD(Product Requirements Document产品需求文档)、UI设计稿后直接前端开发(后端数据mock模拟),完成后直接递交客户预览进行可行性分析,通过后交由DBA(或架构师)进行数据库设计、后端研发人员(或架构师)进行后端设计等,中国人喜欢先设计数据库,外国人恰恰相反,甚至使用hibernate自动完成数据库的建表操作。前端先行往往使产品开发效率更高,且做到了敏捷开发中的测试先行(Mock数据最早做出),简单讲,就是将通常的“后端功能推动型”改为“大前端产品拉动型”,前端逆袭了,BFF(Backend for Frontends,为前端而存在的后端。

  模式是测试专职维护BFF上的Mock数据,将设计的用例转化为实际可用的Mock数据,开发测试用同一套标准,减少流程和沟通上的损耗。

  “大前端”开发测试完成的内部版本是半成品,是缺乏后台实际支撑的。这个内部版本不能交给实际的用户使用,但是内部的产品,开发,测试可以使用,用来体验,查找bug等等。对于后端开发来说,也很便利,服务开发好之后,有现成的产品用来测试,能省很多事。向老板汇报,或者向客户展示,也很方便,有实际可用的产品可以体验,虽然数据是Mock的。这个跟看word文档,ppt,原型设计,或者UI图,感觉是完全两样的。修改成本小,一般来说,70%的工作在后台开发,30%的工作在“大前端”页面。在内部试用的那一周中,发现的问题,或者需求变更,可以非常容易的在下一个版本迭代完成。这个时候,后台服务的开发还没开始,或者刚刚开始,变更成本很小。

  以前,想开发一个功能,首先考虑的是后端逻辑是怎么样的。很多时候,要根据后端现有的逻辑,修改页面的展示,交互的顺序等等。是一种“后端功能推动的模式”。现在,产品和“大前端”一起,领先后端至少一个迭代以上。遇到需求变更强烈的点,或者争论较大的点,可以考虑让内部版本运行时间长一点,比如领先两三个版本。等产品想清楚了,基本稳定了,后端再上。这样,产品思考问题的重点,就从后端现有的功能转移到客户现实需求上来。“需求拉动型开发模式”,解放了产品的思维,更容易设计出符合客户期望的产品。原来的模式是由后端推着前端走,现在的模式是产品和前端拉着后端走,思维模式是完全不一样的。“大前端需求拉动型开发模式”:先有个可用的产品,搞清楚用户喜欢什么,再接上后端实现。“后端功能推动型开发模式”:先做需求分析,评估现有后端功能,然后想办法满足客户需求。

问题是:“客户或者用户知道自己想要什么吗?需求分析能有效吗?”。相对来讲,如果有个可用的东西,真正用起来了,用户更加容易知道自己想要什么。比如“这个颜色最好改一下”,“这里的按钮碍眼,最好去掉”,“这里我想看更多的信息,最好能加上”。

前后端分离敏捷开发模式图:

原文地址:https://www.cnblogs.com/guanghe/p/12205122.html

时间: 2024-10-12 18:44:06

大前端与前后端分离的相关文章

移动端开发者眼中的前端开发流程变迁与前后端分离

写在最开始 移动端与前端的区别 前端开发的混沌时代 后端 MVC MVC 方案实现 MVC 的缺点与改进 前端只写 Demo HTML 模板 后端 MVC 架构总结 AJAX 与前端 MVC 前后端分离的缺点 双端 MVC 不统一 SEO 性能不够 集中 Or 分离 Nodejs 前后端分离的哲学 Nodejs 分层 实战应用 风险控制 总结 参考资料 写在最开始 这是一篇面向移动端开发者的科普性文章,从前端开发的最初流程开始,结合示范代码,讨论开发流程的演变过程,希望能覆盖一部分前端开发技术栈

大前端 前后端分离带来的好处

大前端 前后端分离带来的好处:1. 前后端分离开发,相互之间的影响很小2. 使用 webpack,模块化打包前端代码3. 在开发时,可以做到代码热替换,可以使用 babel,可以使用 css 预处理器等等4. 打包时,打包代码的同时还可以做到按需加载代码,静态文件地址自动写入 html 标签,压缩 css.js 代码.压缩图片5. NPM 管理依赖 除了享受不到前后端分离的优点外,还会1. 放弃 ES6,只能写 ES5 以下版本的代码,且要自己处理一些兼容问题2. 不能够使用 A.R.V 三大框

架构设计:前后端分离之Web前端架构设计

在前面的文章里我谈到了前后端分离的一些看法,这个看法是从宏观的角度来思考的,没有具体的落地实现,今天我将延续上篇文章的主题,从纯前端的架构设计角度谈谈前后端分离的一种具体实现方案,该方案和我原来设想有了很大的变化,但是核心思想没变,就是控制层是属于Web前端的. 在以前文章里我说道前后端分离的核心在于把mvc的控制层归为前端的一部分,原方案的构想在实际的生产开发里很难做到,我觉得核心还是控制层和视图层的技术异构性,这样后果使得系统改造牵涉面太大,导致在项目团队里,沟通.协调以及管理成本相对较高,

localStorage + 配置url 前后端分离之前端先行

关于localStorage和sessionStorage的基础说明说明网上一大堆,这里说下自己的一个亲身应用. 使用localStorage配置url,使前端代码更方便适配测试和真实环境: 大家都知道如果前后端分离的话,往往很多时候可以前端先行,不依赖于后台(接口得提前定义好). 但是存在两个问题: 1.前后端分离后前端虽然不依赖于后台,但是依赖ajax返回的结果 2.往往自己造的mock地址跟真是环境的url地址不一致,如果写死了,则需要改动很大一片 先说第二个问题,之前在一个项目上看到的时

前后端分离后的前端时代

本文从前端开发的视角,聊一聊前后端分离之后的前端开发的那些事儿.阅读全文,大约需要8分钟. 什么是前后端分离 除了前端之外都属于后端了. 你负责貌美如花,我负责赚钱养家 在传统的像ASP,JSP和PHP等开发模式中,前端是处在一个混沌的状态中,可以说是没有独立的"人格"可言. 前端负责切图和编写静态页面模板,后端将数据渲染到前端提供的页面模板中,最后将页面渲染到浏览器展示. 这个过程中,前端只提供页面模板或者写一些JavaScript脚本,有的甚至JS脚本都是后端来写,前端的作用只局限

通过nginx部署前端代码实现前后端分离

实现前后端分离,可以让前后端独立开发.独立部署.独立单测,双方通过JSON进行数据交互. 对于前端开发人员来说,不用每次调试都需要启动或配置Java/Tomcat运行环境:对于后端开发人员来说 ,也不用在需要往JSP页面注入数据. 通过nginx来部署前端代码,可以帮助前端实现以下基本需求: 1.请求转发,解决请求跨域的问题 server { listen       7777; location /{ root   /Users/xiaoyun/git/someproject/dist; }

前后端分离, 前端如何防止直接输入URL进入页面?

转自:https://blog.csdn.net/weixin_41829196/article/details/80444870 前后端分离,如何防止用户直接在地址栏输入url进入页面,也就是判断用户是否登录,没有,则直接跳转到登录页,后台可以用session记录用户登陆的状态,疑问的是前端每次ajax请求,都要做状态判断么,没登录就location.href="login.html",还是有什么别的写法?请教大神,重点想知道前端是如何写的,求demo, 另外就是单页面应用上,前端又

分享一个前后端分离方案源码-前端angularjs+requirejs+dhtmlx 后端asp.net webapi

一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年angularjs和reactjs算是比较火的项目了,而我选择angularjs并不是因为它火,而是因它的模块化.双向数据绑定.注入.指令等都是非常适合架构较复杂的前端应用,而且文档是相当的全,碰到问题基本上可以在网上都找到答案.所以前端基本思路就以angularjs为主.代码模块化,通过requir

【前端经典面试题】前后端分离(说一说你理解的前后端分离?)

前言:昨晚面试遇到了这个问题,既然遇到了,找些资料来一起做个总结吧. 1.对前后端分离的误解  在回答这个问题的时候不要钻到某个具体的技术 ,或者某个具体的框架上面→比如ajax异步请求.vue或react等组件化的开发框架.再或者rest接口规范.API接口数据约定等.从某个具体的技术切入来回答对前后端分离的理解本身就是一种局限的看法,所以在回答这个问题的时候应该从以下几个方面展开. 2.为什么要分离?  在以往的很长一段时间里,后端开发才是开发团队里的核心,前端开发往往仅由一小撮人甚至交给后