静态类型框架中的响应式Web编程

静态类型框架中的响应式Web编程，用于雷米·埃尔·西巴耶·贝索涅引用此版本：雷米·埃尔·西巴耶·贝索涅特。静态类型框架中的响应式Web编程，用于编程语言[cs.PL]。索邦大学，2018年。法语。NNT：2018SORUS169。电话：02457428HAL ID：电话：02457428https://theses.hal.science/tel-02457428提交日期：2020年HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire索邦大学博士论文专业性信息学计算机、电信和电子博士学院（巴黎）提交人雷米·埃尔·西伯利亚·贝索涅特要获得的等级索邦大学博士论文题目：静态类型框架中的响应式Web编程，用于（初步版本）博士生导师M. 伊曼纽尔·C·哈·伊卢报告员M. Manuel S和RRANO索邦大学因里亚·索菲亚·安提波利斯M.彼得五世鲁汶天主教大学审查员和审查员女士。Emmanuelle ENCRENAZ索邦大学M.让-费迪南德·苏西尼M.本杰明·CCNAMTezos谢谢你4材料表1导言和最新技术水平1.1Web客户端的应用程序编程 . . . . . . . . . . . . . . . . . . ... ...91.1.1编程模型和技术 . . . . . . . . . . . . . . . . . . . ... ...91.1.2Web客户端编程131.1.3Web客户端执行模型1.1.4L’orchestration des interactions1.2Web客户端的新编程技术161.2.1为了安全和1.2.2用于1.3L’approche proposée par cette thèse1.3.1同步反应模型231.3.2将同步编程引入Web客户端261.3.3捐款261.3.4相关工作271.3.5论文计划272Pendulum，Web的292.1同步核心292.2在主机程序中执行2.2.1实践中的语言332.2.2生成器和实例342.2.3输出信号352.2.4从同步程序切换到主机程序362.2.5同步程序的对象模型和类型362.3与Web客户372.4输入事件，输出DOM393编译：从同步到控制433.1GRC的定义443.1.1L’environnement d’exécution du graphe de flot de contrôle3.1.2控制流图的结构453.2控制流图的转换示例463.3编译方案：表面和深度493.3.1符号和定义493.3.2每个指令的编译方案503.3.3排气弧的集成56目录3.3.4实施说明3.4静态调度593.4.1图61的破坏3.4.2相互作用633.4.3图65的重建4编译：朝向OCaml和Web674.1将GRC编译为中间语言：Imp674.2L’environnement d’exécution et la fonction d’instant en OCaml4.2.1执行环境的表示4.2.2动量函数的宏生成4.2.3访问同步程序实例的接口4.2.4访问同步程序生成器的接口4.3与Web客户744.3.1元素和事件存在4.3.2信号值的聚合755在浏览器中执行5.1Web浏览器作为时钟775.1.1依赖于事件的775.1.2独立于输入的时钟的定义5.2性能测试比较815.2.1TodoMVC82应用程序5.2.2实施的运行时性能比较6应用程序896.1多媒体播放器896.2异步通信管理926.3与Eliom93集成6.3.1响应输出信号936.3.2移动应用程序967结论和展望105参考文献109参考书目109网络资源113图115表首字母缩略词117A Pendulum119的语法B卡应用程序代码C 媒体播放器应用程序代码摘要131第一章简介和最新技术水平Web是当今今天，任何类型的机器都有一个基于网络的界面，从智能手表到电视，再到手机和家庭自动化很长一段时间以来，Web不再局限于浏览静态文档，而是公开了提供交互、动画和内容的复杂图形界面（GUI）应用。组成这些应用程序的所有砖块在它们开始运行时并不存在，而是通过从源服务器以外的源下载来聚合，通信变得越来越丰富和众多的后者。除了内容、视频、音乐或文本之外，大量的通信是由第三方元素生成的：广告、跟踪用户的社交网络实例或用于分析用户导航的统计数据的累积器由于其规范性方面，Web应用程序正逐渐取代桌面应用程序成为"重客户端"，以简化可移植性，从而简化软件的分发。因此，这种类型的程序对运行它的机器具有越来越深的访问权限是很自然的。因此，浏览器的API（应用程序编程接口）越来越多地管理特定的传感器和材料：GPS、加速计、触摸屏、数据存储甚至显卡。然而，很难预测程序将在什么样的性能、显示或兼容性条件最常用的代码库甚至被迫在运行时处理浏览器版本、屏幕大小或网络质量问题。有些图书馆甚至专门用于这方面的工作。Web应用程序在初始化之前实际上与未知的执行环境（即机器硬件（触摸屏、鼠标、GPS））交换信息这些I/O由浏览器的执行引擎连续计算输入被抽象为客户端程序中的事件，客户端程序可以独立地对输入做出作为这些反应的结果的程序输出可以是图形显示的改变以及在应用程序和服务器之间交换的通信。复杂性来自于需要同时根据定义的规则和基于状态来为此，程序员通常必须描述输入和输出之间复杂的依赖关系。JavaScript [25]是Web客户端的事实上的编程语言。它伴随着JavaScript和DOM的规范78第一章引言和最新技术水平这些标准由W3C联盟编写和维护。然而，执行引擎的实现仅取决于浏览器。L’interface deprogrammation DOM propose un modèle这种命令式模式鼓励了边缘效应，即全球状态的突变。当存在并发时，这可能是有问题的，并且通过迫使程序员将用于显示的代码与用于交互的代码和用于计算的代码混合来阻止编写表达性通常，我们希望拆分应用程序，以便每个部分都有一个逻辑任务要完成，但事件模型的布局可能会此外，虽然编程错误很常见，但广泛使用的支持工具在静态分析和类型方面因此，我们不能依赖未经广泛测试的应用程序换句话说，JavaScript和标准工具不是解决与Web应用程序中的因此，Web程序员通过语言及其语义的结构，以及通过他提出的竞争模型，自然地感受到了对并发模型的选择对于程序的良好行为是必不可少的，并且将对程序的编写和维护的复杂性产生很大的影响许多最近的技术正在试图解决这些问题。例如，一些编程平台试图将程序中的计算、显示管理和事件响应之间的责任分开根据可能的变化，我们将这种方法分组为MVC（模型-视图-控制器）或MV*。我们可以将MVC与对象编程中的设计模式联系起来，这些模式不仅仅是改变编程模型，而是试图这些技术中最在编程语言方面，趋势是远离JavaScript，选择具有更安全的语法、语义或并发模型的语言，一些语言是新的，专门用于Web编程，如Elm [24]，其他语言直接受到JavaScript的启发，如TypeScript [ 88 ]，并通过类型化D’autres encore partent d’unlangage de programmation préexistant mais proposent une C’est le cas de Scala [在这些技术中的许多技术中，竞争是组成它的元素被认为是由函数的连续应用构造的值这种用于图形界面编程的功能性方法点击按钮）而不是连续（例如GPS坐标这些编程技术将在后面介绍Web客户端的应用程序是一个并发系统，它以稳定的速率从一组输入值计算一组输出值。从程序的角度来看，这种速度取决于交互循环的迭代，交互循环连续运行，考虑传入事件并按顺序处理它们的反应。因此，我们可以说即使是视频播放也是由一系列包含时间戳的事件连接的，程序可以对这些事件做出循环的迭代所需的时间取决于响应事件而执行的代码。因此，我们可以使用一个状态机，它的执行是以逻辑时间为模型的。在每个新的时刻，机器从所有输入及其先前的状态中提取程序的这种表示非常接近于反应式同步编程模型，其质量不再需要证明。1.1. 为客户端WEB编程应用程序9在本文的框架内，我们建议通过将同步响应模型的实践应用于Web客户端应用程序的开发来满足程序员的需求同步-反应式编程引入了描述程序中并发的高级结构，以及通过信号进行通信的概念，该概念此外，此外，这种类型的编程通过将竞争映射到实时的抽象来使竞争显式化。它简化了程序的组成，并使代码重构更容易。我们的解决方案是一种名为pendulum的编程语言，它基于Esterel语言它专用于同步编程，并作为语法扩展集成到OCaml语言中。它与同步语言的不同之处在于与其运行时上下文（Web客户端）和并发模型（事件）的互操作性这项工作展示了如何将同步语言嵌入到通用语言中，然后嵌入到Web浏览器中，以及如何利用后者基于同步模型的运行时模型来有效地捕获交互。在介绍我们的解决方案之前，我们将更详细地介绍Web应用程序的工作原理、它们所基于的系统以及新编程技术的最新技术水平。1.1Web客户端的应用程序编程目前，Web客户端编程主要由浏览器提供给程序员的界面来定义这些技术包括HTML、CSS和JavaScript等，由W3C指定在找到这种模式的替代方案之前，有必要详细介绍一下它，并一个广泛的领域是混合的，所以我们从介绍有关游戏中的编程模型和技术的术语开始。1.1.1编程模型和技术编程模型编程模型或范例[54]是一种处理算法表达式的方法。例如，在函数模型或命令模型中编写程序的方式不同语言通常是多范式的，但通常命令式编程是一种模型，其中程序是一系列按每一条指令都会产生一个内存修改，从而产生一个新的状态。这种类型的操作被称为与以前的模型不同，函数式编程函数式程序的基本构件是这个模型的名字是由于10第一章引言和最新技术水平事实上，我们认为函数是可以操作的值，可以传递给参数并将其作为计算的结果呈现。像Haskell这样的纯函数式语言拒绝副作用、变量赋值，并使用封装方法来处理输入和输出。D’autres langages fonctionnels tendent à intégrer un certain nombre de fonctionnalités ML和Lisp家族的语言就是其中之一。面向对象编程是一种编程范例，其中概念由对象表示。这些是包含值（称为属性）和函数（称为方法）的数据结构方法描述对象的行为，属性描述对象方法可以隐式访问内部状态并对其进行对象语言有一种用于描述对象类型的语言，称为它们通过继承支持一种形式的子类型，允许一个类成为另一个类的子类型。许多语言都有并发编程允许将有几种类型的竞争。当一个任务被暂停以允许另一个任务执行时，我们可以说是如果一条指令不能C’est le cas en program- mation 有两种情况：优先或竞争模型，其中上下文的改变是在执行程序的系统的调度程序的请求下发生的程序员无法控制这些更改，而且大多数更改都是不可预测的。 在并行编程的情况下，也可以在不中断线程的情况下同时执行所有这些模型的共同点是程序的行为很难预测，并且消除了顺序执行的决定论在协作模型中，即使特别地，通过这种共享，可以在两个任务之间创建隐式依赖关系，如果不知道访问的顺序，则会导致运行时问题。当一个任务在另一个任务读取资源的同时修改资源时，我们称之为竞争情况或竞争条件。这种情况可能会导致很大的不一致性和难以重现的错误。为了当至少两个任务相互等待另一个任务释放资源时，误用的锁可能会导致阻塞，这种类型的行为使得并发编程本质上难以设计和开发。然而，在许多情况下，由于性能原因或阻塞输入/输出管理问题（在通信信道中收听、屏幕上的显示等），它是有用的，甚至是必不可少的1.1. 为客户端WEB编程应用程序11类型和静态要验证程序是否符合其规范，有几种方法。一种常见的方法是 C’est d’autant plus vrai dansles programmes concurrents où il est très difficile de provoquer une exécution des tâches dans un ordre在形式化方法领域，我们倾向于在执行之前证明程序的有效性。从Coq [23]这样的辅助证明工具，到B方法[1]这样的规范细化研讨会，方法是同时证明和编程，并且只有在经过验证的情况下才构建可执行程序。这些方法需要程序员的大量参与，以及理论计算机科学和逻辑方面的高级知识。D’autres approches, permettent d’automatiser partiellement l’analyse statique• 模型检查试图通过遍历程序的所有可能的执行来否认一组错误状态的存在，通常是以与原始源代码不同的表示方式• L’interprétation abstraite se fait par l’exécution partielle, ou sur-approximée du programme, pouren extraire les在这些情况下，我们面对两个独立的实体，即形式规范和程序。虽然它们更容易自动化，但它们也可能无法在合理的时间内找到答案或检测误报。最后，最自动化的静态分析技术类型表示由语言操作的值类型系统是一组规则，它通过描述允许哪些语言构造来应用于此特征，这些构造如果一个语言表达式的类型是正确的，那么从类型系统的角度来看，它就可以毫无错误地执行例如，这些表达式可以是整数、浮点数、列表或字符串如果我们认为successor是一个接受整数并返回整数的函数，我们希望能够将此信息编码到类型系统中，以限制此函数，并在误用时显示编译时错误从ML（SML [49]、OCaml [44]等）或Haskell衍生的语言实现了富类型系统，其中所有类型检查都是静态的，并且通过这些系统可以表示复杂的、可重用的数据结构。例如，Polymor-phism允许然后，可以描述诸如链接列表或哈希表之类的数据结构，并且可以重用相同的结构，而不管列表中包含的类型此外，这些严格的类型系统，如OCaml或Haskell，使用L’expressivité此外，12第一章引言和最新技术水平尽可能自动和务实。尽管如此，编译器中嵌入的静态类型在编程中具有不可否认的优势，无论是在研究还是在工业中。它可以检测简单但非常有害的错误，这些错误在调试时很难检测到。因此，它可以避免一些测试。这也是再制造的优势。在大型项目中，对值表示的最小更改都可能在多个位置产生影响。它还允许在最后，具有富类型系统的语言通常会促使程序员考虑他们编写的代码，这涉及所谓的静态类型，但也可以动态地这种方法是一把双刃剑，因为虽然它给了程序员更大的灵活性，但它也隐藏了只有在运行时才能发现的类型错误Web客户端编程依赖于这些技术，强调快速的软件原型和可注意然后，程序员可以自由语法扩展和专用元编程是一种语言的能力，允许程序将程序操作为值并执行它们。自反性是程序进行内省的能力，也就是说，动态地分析和修改自己的代码。例如，Lisp家族的语言通过宏提供代码转换，通过S表达式提供程序的动态一些静态类型的语言仍然提供某种形式的运行还有一些宏，它们在这些宏将语言表达式作为输入，可以对其应用任意变换，并呈现新表达式。 这种宏模型出现在Lisp语言家族中，但许多本论文基于OCaml语言的PPX宏引擎[44，Chapter 8 Language extensions]，它允许将在类型化步骤之前执行的OCaml中描述的表达式转换程序链接到编译器PPX的约束是生成的代码被表示为OCaml的抽象语法树。因此，您无法在此宏引擎中建立新的语法结构。这些不同的技术有几个优点。首先，然后，通过使用宏，可以自动执行一些重复的编程任务，例如自动生成从已知类型构造的特定类型的也可以将评估上下文与专业知识的某些部分完全分离1.1. 为客户端WEB编程应用程序13克注释[55]。例如，在OCaml Web开发平台Eliom [4]中，语法扩展允许将客户端前者通过Js_of_ocaml编译为JavaScript，后者由字节码或机器码编译器编译并集成到应用程序尽管如此，这些部分都写在同一个文件中，并在键入时相互作用。这种语言扩展方法除了提高生产力之外，自动化还可以生成一致的代码，这些代码在任何地方都是相同的，并限制错误。当然，这些示例并不详尽，静态宏还有许多其他类似的用途我们将提到的最后一个优点解决了一个不同的问题：当编程语言被用来解决从系统软件到移动应用程序再到分布式程序的各种问题时，它被称为通用编程语言。这些语言通常是多范式的：命令式的、函数式的、对象式的、并发式的等等。然而，如果例如，通用语言可以提供对库的访问，以连接到各种数据库，并且程序员可以以字符串格式编写SQL查询。不幸的是，编译器无法检测请求的语法是否正确。它不使用语言的结构，阻止编译器对它进行推理。然后使用专用语言（或DSL，代表域特定语言），有时可以使用显式语法标记将其写入同一代码文件。当宿主语言的编译器遇到此标记时，它会将其交给语法扩展引擎例如，PgOCaml库[81]在OCaml中提供了这种支持。我们还可以提到语法扩展也常用于JavaScript中，它们允许用户使用标记语法（如HTML）构建自定义图形元素，如React.js中的语法1.1.2Web客户端编程浏览器是一个程序，它检索Web上的资源，解释它们， 并将其显示在图形窗口中。资源的位置由传输通过HTTP2协议完成。这里我们将讨论应用程序形式的资源它们通常由一组描述HTML 3页面结构的文档、CSS 4样式表和一组交互式JavaScript脚本组成应用程序的这些不同组件然后，Web应用程序可以在全球IT园区的大多数终端上运行：个人计算机、智能手机、电视、连接对象等。这是向任何用户展示软件和内容的最简单方法描述Web应用程序的客户端部分有多种方法标准解决方案1. 统一资源标识符2. 超文本传输协议3. 超文本标记语言4. 级联样式表14第一章引言和最新技术水平它是上述语言的组合。这些语言的规范在W3C [33]和EcmaScript [25]标准中有明确的描述。L’implémentation du moteur d’exécution et de rendu peutJavaScript是由EcmaScript标准描述的动态类型语言。它是命令性的、功能性的和客体性的。它的语法让人想起C和Java。尽管如此，它还是从函数式语言（如高阶函数）中获得了一些属性值的类型是非常允许的，并且该语言提供了这种语言更多地用于Web的上下文中，大多数现代浏览器的客户端编程，以及使用Node.js对Web服务器进行编程。然而，由于其实现的效率不断提高，它的使用正在变得越来越普遍当前的运行时引擎DOM或文档对象模型[38]是由浏览器提供的编程接口，与编程语言无关，用于操作图形界面和客户端程序的I/O该文档将浏览器窗口表示为图形元素和分层容器的树。应用于此数据结构的更改将直接传播到浏览器视图中。1.1.3Web客户端的执行模型由Web客户端执行的程序本质上具有大量的交互，并且主要由这些交互驱动。大多数代码是响应程序输入而执行的。事件编程和交互循环由浏览器捕获的程序条目（事件）始终由目标触发该目标可以是图形元素，例如按钮或主窗口。它也可以是内存中的对象，表示浏览器接收到的全局输入：地理位置、加速度组件可以是多种类型事件的目标，例如可以是鼠标移动或鼠标单击目标的为了指定由目标组件和事件类型形成的对，我们将讨论事件驱动因此，事件是行为的特定实例，它由由多个相同的行为可能会产生多个不同的程序值。浏览器实现了一个无限循环，反应被推迟到引起反应的行为的发生发生之后。因此，不可能预测将以什么顺序处理。1.1. 为客户端WEB编程应用程序15（a）（b）（c）（d）文件。按Id获取元素（"btern"）。添加事件侦听器（"单击"，f）;如果它们同 时到达，则为不同的 条目提供信息。C’est pourquoi on parle de comportementasynchroneWeb浏览器[39]实现了这种并发编程为了便于L’interface de pro- grammation 在JavaScript中，我们可以通过以下方式声明对事件行为的反应定义在屏幕上显示警报的函数f。我们访问当负责低级接口的浏览器接收到来自硬件的信息时，将在队列中添加一条消息，其中包含与I/O对应的事件。在交互循环的每次迭代中，事件队列都被清空。对于它包含的每个事件，我们都在DOM树中搜索它从根目录中找到的目标元素。如果达到目标， 搜索请记住，避免优先购买，以最大限度地降低竞争情况的风险。图形视图的更新浏览器的主要任务是在图形窗口中显示用户选择的内容。此任务由渲染器执行，在运行中的脚本更改DOM后直接触发我们可以在图1.1中看到，渲染器是在几个通道中应用的。第一种是"镜像"，它构建一个中间树（渲染树），以框的形式描述组件的嵌套及其大小。第二种方法是重绘，它将该树映射到像素表示中。F图1.1当页面上的某个元素被更改时，这两个任务不会一致地某些操作可以直接应用于像素，因为它们对图像的影响很小。16第一章引言和最新技术水平图形视图（如不透明度）。在这种情况下，两个函数都不被调用。同样，可见更改可能会影响我们将此任务称为重绘。可以通过回调函数自愿推迟DOM的修改。如果随后对页面应用了多个更改，浏览器将触发多次更新并强制调用重绘函数。相反，可以 因此，程序将此刷新时间的选择留给浏览器，以避免1.1.4L’orchestration des如引言中所述，应用程序的客户端部分编写客户端程序的困难之一富媒体是一个术语，指的是现代的、以客户为中心的Web应用程序，其中这些应用程序可以混合多个交互渠道仅为了初始化自身，应用程序就已经在网络上执行了这些初始化数据中的一些可能彼此依赖：基于身份验证的本地存储同步、基于地理位置的内容检索只是必须考虑多个事件的几个示例。L’application peut se trouver dans différents états avant de compléter une tâche, donc si l’un de cescomportements 例如，当涉及到移动终端时，这些错误是常见的然而，基于事件的竞争是这些行为的可组合性的障碍程序员被迫通过全局变量来在不同的回调函数之间共享信息，而这种全局环境的一致性根本得不到保证。将系统描述为对独立事件的反应并不会让1.2Web客户端的新编程技术编程对Web客户端的吸引力在于它看起来很简单，程序员可以用几行代码编写一个小应用程序的原型，并将其投入生产。出现这种情况有几个原因，但特别是因为这些技术最初不是出于技术或理论考虑而组合在一起的1.2. 面向Web客户端的新编程技术17他们被最多的人同化HTML似乎对门外汉来说是可访问的，JavaScript非常灵活。这种简单性这种灵活性最初似乎是一种品质，但随着程序中的错误变得越来越难以检测，这种灵活性就变成了一种缺陷。代码重构也成为一种有风险的操作，除非编写许多测试，在图形应用程序的情况下，这些测试很难设置为了克服这一点，已经付出了巨大的努力。 Web、1.1.2. 这些方法同时关注1.2.1为了安全性和静态类型化编程语言L’idéologie 这可能导致两个明显的问题首先，尽管系统尽了最大努力，但仍有可能出现类型错误，并且只能在运行时检测到（例如，第二，如果他不一定花时间阅读语言的确切语义和定义，看到后者的不同版本：EcmaScript 4、5、6，浏览器之间的差异等。因此，我们在编程逻辑中添加了注意。例如，并不是所有的JavaScript程序员都能回答这样一个问题：What is（new Array（3）==，）？».运算符==（弱相等）自动转换两个操作数中的一个，使它们都是相同的类型。这里，数组被转换为字符串。此操作将数组中的每个元素转换为字符串，并用逗号分隔它们。 数组为空，但大小为3，因此字符串中会出现两个分隔符："，，"。因此，此表达式的求值为true。我们不会检测简而言之，缺少静态类型除了允许错误通过之外，还使得语义难以C’est其中包括TypeScript [88]，一个带有类型元素的JavaScript，或者Flow [70]，一个用于同一语言的类型检查工具。其他倡议建议超越JavaScript，将其视为"Web客户端汇编程序"，并设计一个从新的或现有语言到JavaScript的编译器。有很多例子，但我们可以特别提到ScalaJS [85]和Js_of_ocaml [61]，这是一个OCaml字节码到JavaScript的编译器，本文的工作就是基于它的。除了编译器之外，Js_of_ocaml还提供了一个接口，用于以类型化方式使用DOM使用此工具，可以在Web客户端程序中使用所有现有的OCaml代码或编译为字节码的库，前提是还有BuckleScript提供了一个源代码到源代码的编译，以便于阅读和使用。