Jerry之前曾经写过一篇微信公众号文章，题目叫<>

关注我的公号“汪子熙”后，在历史菜单“前端开发相关”里即可找到这篇文章：

该文章简单回顾了SAP UI技术的发展历史，然后提了下Salesforce的Apex和Lighting Component等技术和框架。

目录

SAP UI
SAP GUI + Dynpro
Web Dynpro
BSP/CRM WebClient UI
SAP UI5/Fiori
UI5 in SAP Cloud for Customer
Hybris Enterprise Commerce Platform
--------------------------------------------------------------------------------
Salesforce UI
Apex
Lightning Experience
Aura Framework
Lightning Component Framework
Visualforce

我也画了张简单的图：

R1和针对于大型机的R2对我们来说实在太古老了，对我们来说，只能通过SAPGUI里的复古主题，即Classical Theme来体验一下这些老古董的外观风采。

到了1992年出现了类似JSP技术的BSP(business server page)，能够借助在服务器端执行的ABAP语言实现动态网页效果。

在运行时，每个BSP页面会自动生成一个临时的ABAP类，执行这些BSP页面上嵌入的ABAP代码，执行的结果再渲染成原生的HTML代码。

值得一提的是，BSP技术兼容普通的HTML/JavaScript应用，换句话说，几乎所有能运行在除Netweaver以为的web服务器上的基于HTML/JavaScript的web应用，也能以BSP为载体，运行在Netweaver上。因此，即使是如今SAP的旗舰级产品S/4HANA里的很多Fiori UI应用，也是以BSP应用为载体存储在Netweaver上的。

比如S/4HANA物料主数据管理的Fiori应用，其名称在Chrome开发者工具里能看到：

这个BSP应用在Netweaver上能找到：

诞生于1992年的BSP技术到了今天还在服役，这本身就是一个奇迹了。当然它本身由于历史原因也有一些局限：

  1. 开发效率不够高，没有类似后来UI5里控件库的概念，导致开发人员需要重复造很多轮子。SAP后来自己也发布了一些BSP Extension，类似JSP里的tag，以此来弥补开发效率的缺陷。

另外BSP的开发工具在SAPGUI里只有事务码SE80，这个工具在做HTML和JavaScript开发时显得不够友好。因此后期SAP Fiori开发也采取了在本地现代IDE比如Eclipse里做开发，完毕后再上传到Netweaver自动生成BSP的方式。

  1. 没有MVC的概念，在大型企业级应用开发中显得力不从心。

正是由于暴露了这两个缺陷，促成了WebUI和Webdynpro的问世。对这两种前端技术的详细介绍，请参考Jerry之前提到的微信文章：SAP UI和Salesforce UI开发漫谈，这里不再重复，只是聊聊一些该文章中没有提过的内容。

ABAP Webdynpro的亮点就是能够以所见即所得的方式进行UI界面开发，缺点是不再支持类似BSP那样兼容传统的HTML/JavaScript，因此无法实现某些对界面复杂度和交互性要求较高的需求。

而WebUI在继承了BSP所有优点的同时，在BSP基础上提供了对MVC的封装，使得开发效率大大提高，同时开发出来的Web应用结构清晰，不再会出现一个视图页面几千行代码的情况。

下图是一个典型的WebUI模型，MVC三层在workbench里有清晰的界定。

WebUI和ABAP Webdynpro至今仍广泛应用于SAP产品中。在S/4HANA的CRM模块里，WebUI继续扮演着非常重要的角色，详情请阅读我下面这篇文章：Hello World, S/4HANA for Customer Management 1.0

而Webdynpro，是SAP SRM UI开发的主流技术。

搜索公网上所有使用了SAP BSP技术的网站：
https://www.google.com/search?q=inurl:/sap/bc/bsp/&gws_rd=ssl

使用了Webdynpro的：

随着时间的推移，用户对移动设备上访问网页的体验要求越来越高，因此有了SAP从业者现在很熟悉的前端技术：SAP UI5。

关于UI5最新的技术发展方向，请关注我的公众号“汪子熙”，阅读我写的这篇文章：

Fiori Fundamentals和SAP UI5 Web Components

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

SAP 前端技术的演化史简介的更多相关文章

  1. 记录一次参加D2前端技术论坛的杭州之行

    前言 在这里,闰土首先要感谢以下两位大佬提供的门票,分别是来自新浪微博部门的H同学,以及来自小米科技的D同学. 当我周六晚上在青旅写完这篇文章过后,第二天上网发现,已经有大佬提前一步在掘金上发布了高质 ...

  2. 前端技术之_CSS详解第一天

    前端技术之_CSS详解第一天 一html部分 略.... 二.列表 列表有3种 2.1 无序列表 无序列表,用来表示一个列表的语义,并且每个项目和每个项目之间,是不分先后的. ul就是英语unorde ...

  3. 使用前端技术和MySQL+PHP制作自己的一个个人博客网站

    源代码地址:https://github.com/YauCheun/BlogCode 我的博客网站地址:http://www.yublog.fun/ 制作前景: 想拥有一个自己独自开发的一个小型博客网 ...

  4. 绝版珍珍藏：web前端技术学习指南

    绝版珍珍藏:web前端技术学习指南 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的 ...

  5. 前端测试框架jest 简介

    转自: https://www.cnblogs.com/Wolfmanlq/p/8012847.html 作者:Ken Wang 出处:http://www.cnblogs.com/Wolfmanlq ...

  6. 解密国内BAT等大厂前端技术体系-阿里篇（长文建议收藏）

    进入2019年,大前端技术生态似乎进入到了一个相对稳定的环境,React在2013年发布至今已经6年时间了,Vue 1.0在2015年发布,至今也有4年时间了. 整个业界在前端框架不断迭代中,也寻找到 ...

  7. 解密国内BAT等大厂前端技术体系-百度篇（长文建议收藏）

    1 引言 整个业界在前端框架不断迭代中,也寻找到了许多突破方向,例如跨平台中的RN.Flutter,服务端GraphQL.Serverless,前端和客户端的融合越来越紧密,前端在Node和Elect ...

  8. 解密国内BAT等大厂前端技术体系-携程篇（长文建议收藏）

    1 引言 为了了解当前前端的发展趋势,让我们从国内各大互联网大厂开始,了解他们的最新动态和未来规划.这是解密大厂前端技术体系的第四篇,前三篇已经讲述了阿里.腾讯.百度在前端技术这几年的技术发展. 这一 ...

  9. 解密国内BAT等大厂前端技术体系-腾讯篇（长文建议收藏）

    1 引言 为了了解当前前端的发展趋势,让我们从国内各大互联网大厂开始,了解他们的最新动态和未来规划.这是解密大厂前端技术体系的第三篇,前两篇已经讲述了阿里和百度在前端技术这几年的技术发展.这一篇从腾讯 ...

随机推荐

  1. java类中成员的初始化顺序(一)

    类被创建之后的成员的初始化顺序到底是怎么样的? 首先 不考虑继承 package com; public class DemoOne { /** * 关于类的初始化顺序 */ //不考虑继承结构的情况 ...

  2. linux总结之find搜索文件（times 3）

    个人原创,转自请在文章头部显眼位置注明出处:https://www.cnblogs.com/sunshine5683/p/10091341.html find命令的各种搜索 一.根据文件名进行查找 命 ...

  3. SimpleScalar Course Project

    https://blog.csdn.net/wahaha_nescafe/article/details/8500186 https://blog.csdn.net/wahaha_nescafe/ar ...

  4. python Django html 模板循环条件

    views里返回数据为例: renturn render(request,'xxx.html',{'obj':123,'k1':[1,2,3,4],'k2':{'name':'yooma','age' ...

  5. Swift 函数调用到底写不写参数名

    最近真正开始学 Swift,在调用函数的时候遇到一个问题:到底写不写函数名? 我们来看两个个例子: // 1 func test(a: Int, b: Int) ->Int { return a ...

  6. sublime3中如何快速生成html头部信息

    前提要安装Emmet 插件:已经结束了啊,不要以为下面的操作跟问题有关,下面是具体的生成头部信息方法 输入下边加粗的缩写,然后Tab,就可以了: 生成html4.01 Transitional用 ht ...

  7. WEB前端常用JavaScript代码整理

    文章目录 html代码用JS动态加载进页面 JS判断用户访问的是PC还是mobile或者微信浏览器 判断浏览器的简单有效方法 点击某个div区域之外,隐藏该div 如何在手机上禁止浏览器的网页滚动 改 ...

  8. CSS属性之attr()

    attr()准确的说,不应该是一个属性,而是一个CSS的函数,我们先看看MDN上的介绍吧: Summary The attr() CSS function is used to retrieve th ...

  9. input文字垂直居中和按钮对齐问题，兼容IE8

    1.盒子模型问题:请CSS重置 2.按钮不对齐:请浮动或者vertical-align:middle;然后计算宽高,使其对齐 : 3.IE8文本不居中:line-height属性     注意:IE8 ...

  10. HTML 5 <input> placeholder 属性 实现搜索框提示文字点击输入后消失

    H5之前要实现这个功能还要用到JS,H5出来之后新增加了placeholder属性,有了这个属性就就能轻松实现这个功能. 定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息(h ...