大白话说前端应用 | 从开发角度看应用架构10

前言

本文仅代表作者的个人观点；

本文在实验中，请教了同事舒力，在此表示感谢；

本文的内容仅限于技术探讨，不能作为指导生产环境的素材；

本文素材是红帽公司产品技术和手册；

本文分为系列文章，将会有多篇，初步预计将会有16篇

一、前端指的啥？

前端应用指的啥？

长久以来，一直以为他很高大上、很渺茫，离我们的生活很远。

其实，前端离我们的生活很近。

前端更多指的是web service。我们想一下牛逼的aws的全称是啥来着？

AWS=Amazon Web Services

亚马逊、京东、淘宝，这些大名鼎鼎的互联网公司，起家大多都是电商，靠网购起家。

然后，这些互联网公司将支撑他们业务的技术抽取出来，对外提供云服务。

所以说，所谓前端，我们可以理解成web层。

二、前端的框架

我们想象一下，我们登录一个网站：

在浏览器中输入：www.wakin.com，这时候，浏览器会显示页面：

然后，我可以输入我在这个网站的用户名和密码：

或者，我需要注册这个网站的会员：

这个时候，问题来了：

1.输入www.wakin.com后，显示的网站首页面是谁提供的？

2.我要注册网站的会员，对话框是谁提供的？

在正式做架构分析之前，我们需要明确两个概念：web server和web container的区别。

Web Server，指的是Apache web server（是C语言实现）。这点考过RHCE7的同学应该都了解，里面有一道考题就是搭建web server。web server主要提供的是静态页面。

什么是web container？听起来很玄乎。tomcat大家都知道吧。web container是Java应用服务器。而tomcat实际上就是一个serverlet容器。所以我们有时候把tomcat这些软件功能叫web container。web container提供的是动态页面。

JBoss的前端软件叫JBoss Web Server，是不是听着和Apache web server有点混淆？没关系，我们看看JBoss Web Server包含啥：

JBoss Web Server它包含了web server和tomcat。

所以说，相对于Apache web server，Tomcat是后端，运行的是Java应用。

继续发问：Tomcat这类产品，和传统意义上的app server有什么区别，比如WAS、WebLogic、JBoss EAP。

关于JBoss EAP这类软件，他们有一个很拉轰的名字：EJB Container。

有点晕菜了？别着急，我们用大白话说：

本质上讲，EJB Container和web container本质的功能是类似的。但他们干的活不一样：WEB Container主要是跟HTTP server（或http请求）打交道；EJBContainer主要跟后端数据库、其它服务打交道。

刚才也提到了，EJB Container对应JBoss产品是EAP，它和JBoss Web Server有啥关系呢？

我们看一下EAP的架构：

看见没，放大点：

也就是说，JBoss EAP包含了web container。

所以说，http server、web container、EJB container三者之间的关系，用JBoss来描述的话，大致是：

也就是说，搭建一个比较简单的网站，用JBoss webserver就够了。如果大家一个大型的网站，并运行企业级应用，则需要类似EAP的平台。

在这里，我们需要强调一下，web server其实只是EAP很小的一部分。EAP有很多功能，它是完全符合Java EE框架和标准的：

• Batch API
• Java API for JSON Processing (JSON-P)
• Concurrency utilities
• WebSocket API
• Java Messaging Service (JMS)
• Java Persistence API (JPA)
• Java Connector Architecture (JCA)
• Java API for RESTful web services (JAX-RS)
• Java API for XML web services (JAX-WS)
• Servlet API
• Java Server Faces (JSF)
• Java Server Pages (JSP)
• Contexts and Dependency Injection (CDI)
• Java Transaction API (JTA)
• Enterprise Java Beans (EJB)
• Bean Validation API

这里，我们又要提啥叫EJB了。我们说的直白一些，EJB container干的事情，是做的Java应用的分布式。它实际上就是运行jar包的一个软件平台。这些jar包中，包含了很多java的类。这些类可以被客户端远程或者本地调用。同时，EJB container还提供了对后端数据库的访问功能等。

三、前端框架

截至到目前，我们搞清楚了web server、web container、EJB container。再看一下两种前端架构。

主要有两种：

第一种：以Web为中心的架构

第二类：Web服务应用程序架构

我们知道，目前互联网的网站页面，是html。目前html的架构是html5。

我们通过浏览器，输入网址，前端的页面显示其实有多种模式：

1. 在服务端生成界面，传到前端，也就是浏览器显示

2. 静态页面web server提供，动态页面服务器端提供。

以Web为中心的架构，主要是在服务器端生成页面的架构如下图：

在这种架构中，JSF会与JSP一起配合。

这种方式显然页面生成效率会低一些。

我们主要看第二种： Web服务应用程序架构。

这种架构相对于第一种，要先进很多。

在这种架构中，静态页面保存在web server上（通常会缓存到CDN中），html5主要动态页面AngularJS等框架提供，底层使用JavaScript书写。

客户端在浏览器输入域名以后，静态页面由web server(通常缓存到cdn)，动态页面的内容web server直接转发到 web container上（下图web tier）。最终在页面呈现。如果数据存到数据库中，需要通过EJB container做OR Mapping，将Entity实例化，以便应用访问数据。

这里，我举个例子。

下面的例子，是一套应用代码,其前端UI展示是这个样子，就是一个to to list应用。我们在里面可以添加要做的事情，比如：买牛奶、买鸡蛋、或者赚大钱。

这个应用主要有4个类：

• Item.java类：这个类为应用程序生成待办事项，它包含三列：ID、描述、是否完成。
• ItemRepository.java类：它有添加项目、查看单个项目和查看所有项目列表的方法，并且这个类模拟内存数据库，来存放存储待办事项列表。所以说，这个类是真正干活的。
• ItemService.java类，它是一个简单的POJO类，它通过CDI方式引用ItemRepository.java类。
• ItemResourceRESTService类，它为前端用户界面提供了REST端点（基于AngularJS）。它需要调用ItemService.java，然后给前端返回JSON。

也就是说，Item.java创建了待办事项条目的框架，ItemRepository响应前端的请求，调价条目（就是将输入的信息填充到Item.java创建的框架中），返回给前端最终进行展示。

ItemRepository被以CDI方式注入到ItemService中，ItemService有被用CDI的方式注入到ItemResourceRESTService中，以便为前端提供RESTService，响应前端http请求，发到后端，结果填充好以后，以JSON形式返回给前端。

因此，这是典型的 Web服务应用程序架构，只是这个应用没有链接数据库，而是通过ItemRepository.java类模拟了一个内存数据库。

我们看一下这个应用的源码结构，分为两个目录webapp和java：

webapp中有html：

我们查看index.html:

可以看它是AngularJS

我们查看js/app.js的源码：

可以看到对ItemService的调用：

再看一下js/service.js：

同样显示了通过restful api方式对ItemService进行调用：

在webapp的WEB-INI：

XML 配置元数据提供给web container：

通过JBDS导入一个已经存在的maven项目：

1.查看源码：Item.java类。

这个类在应用程序中创建一个todo项目。它有三个属性：一个id，一个描述和一个表示任务是否完成的布尔属性(如前端页面：1 Buy Milk Done)。

如下图箭头所示：

2.查看：ItemRepository.java

该类它具有添加项目、查看单个项目和查看所有项目列表的方法,并且它模拟内存数据库并存储待办事项列表。

注意到这个类用@ApplicationScoped注解，这表示只要应用程序在应用程序服务器上部署并运行，该类的对象就保持在作用域中。

注意到seedTodoList（）方法已用@PostConstruct注释。一旦该类被初始化，这个方法用三个项目填充待办事项列表，说白了就是页面直接显示如下三个条目：

3.查看：ItemService.java类：

它是一个简单的POJO类，这个类注入ItemRepository类并调用它的方法来实现添加、查看和列出所有todo项目的方法：

接下来，我们先把POJO转化为无状态的 EJB.

使用@Stateless注释标注ItemService类以将此POJO转换为EJB。

4.查看ItemResourceRESTService类：

它为前端用户界面提供了REST endpoint（基于AngularJS）。该文件位于rest文件夹中。

注意到这个类需要使用ItemService EJB来调用EJB的方法，并向前端层提供JSON响应。

将ItemService EJB注入到ItemResourceRESTService类中。

将@EJB注释添加到ItemService声明中。

我们在看一下同目录下的ItemResourceRESTService文件：

它实际上定义了本package被作为api调用：

而报的名字就是路径：

接下来，启动EAP：

通过运行以下命令来构建和部署EJB到JBoss EAP：

查看EAP日志：

访问应用：

我们添加条目，然后观察日志：

查坎EAP日志：

魏新宇

• 红帽资深解决方案架构师
• 专注开源云计算、容器及自动化运维在金融行业的推广
• 拥有MBA、ITIL V3、Cobit5、C-STAR、TOGAF9.1（鉴定级）等管理认证。
• 拥有红帽RHCE/RHCA、VMware VCP-DCV、VCP-DT、VCP-Network、VCP-Cloud、AIX、HPUX等技术认证.