sign in sign up
<<
Home , Apache Velocity, Lift (web framework), Symfony, Web template system

Development of Web Web Applications 7 Development Principles and Practice Frameworks

Vincent Simonet, 2014-2015 Vincent Simonet, 2014-2015 Université Pierre et Marie Curie, Master Informatique, Spécialité STL Université Pierre et Marie Curie, Master Informatique, Spécialité STL

Today’s agenda frameworks

● Programmatic Approaches, There are hundreds of frameworks on the market. See ● Template Approaches, for a (probably non-exhaustive) list. ● Hybrid Approaches, They differ by various aspects: ● Model-View-Controller (MVC) Approaches, ● Scope, ● Approaches with a single programming ● Underlying and language, technologies, ● Structure model for the web application, ● Stratified Languages. ● Development model and license. There are probably some bad choices, but there is no "best" choice. Typical features of a web application framework Programmatic ● , ● Caching, ● Access control (authentication, authorization), Approaches ● access, mapping and configuration, ● Scaffolding, ● URL mapping, ● Form validation, ● , ● i18n and l10n, ● Web services (SOAP) and resources (REST).

Programmatic Approaches Template The source for a page consists mainly of code written in a scripting or high-level programming language (e.g. , Python or ). Approaches The body of the code consists of application logic, while the page formatting (HTML) is produced using output statements. Main limitation: producing HTML using output statements is painful, and cannot be decoupled from programming. Examples: CGI or Java Servlet (alone). Template Approaches SSI

The "inverse" of programmatic approaches: the A simple interpreted server-side scripting source for a page consists mainly of formatting language. Supported in .shtml files by structures, with limited embedded constructs Apache and IIS. containing programming logic. Appealing for web designers, but limited to implement complex logic. Very simple, but not very powerful. Examples: SSI, .

Apache Velocity Apache Velocity: Example

Java-based template engine that provides a ## Velocity Hello World template language to reference objects defined in Java code. #set( $foo = "Velocity" ) ## followed by Used for HTML pages, but also for Hello $foo World! generation, automatic emails, XML transformation. Hybrid Hybrid Approaches In hybrid approaches, scripting elements and template structures are combined in the same Approaches source file, with the same level of importance.

Main limitation: designers and developers must work on the same source objects.

Examples: PHP, ASP.NET, JSP (alone).

PHP PHP: Hypertext PHP: Example

Server-side scripting language. PHP code can be directly embedded into HTML pages. It is interpreted by the server at serving time.

websites on print $title; 2.1M webservers. } else { ?>Default Title PHP is part of the LAMP stack. Many web

application frameworks have also built on top of ... PHP (e.g. ). ASP.NET ASP.NET Extensions

The web development framework from ● ASP.NET AJAX: Server framework + Microsoft, part of the .NET Framework. JavaScript client library for AJAX communication. Similarly to PHP, code (in any .NET supported ● ASP.NET MVC Framework: Model-View- language, typically VB or #) can be inlined Controller framework on top of ASP.NET into HTML pages. ● ASP.NET Web API: HTTP API for exposing web services.

● ASP.NET SignalR: real-time client/server Contrary to PHP, HTML templates are communication framework. compiled.

ASP.NET: Example LAMP

<%@ Page Language="C#" %>

Sample page

... Model-View- Model-View-Controller A software architecture, used by many modern web development frameworks (but not specific to web). Controller ● Model: application data, business rules, logic, and functions. Approaches ● View: any output representation of data.

● Controller: a mediator for input, converting it to commands for the model or view.

Model-View-Controller Model-View-Controller in web applications in web applications

● HTTP requests are directed to the controller, Client / Web Browser ● The controller access required data and Selects instantiates the model, typically a POD datastructure, Controller View ● The controller selects, populates and passes control to the appropriate view, typically a Model Populates Instantiates template page with some programming Server constructs accessing data in the model,

● The view page is rendered and sent as an Database HTTP response. Model 2 / Apache Struts Spring

Client / Web Browser Client / Web Browser

Java Servlet and Filters (Java Controller View A Java class Controller View templating system) JSP annotated with or any other @Controller templating system

Model Model JavaBeans Server The Java Model Server class.

Database Database

Symfony

Client / Web Browser Client / Web Browser

A web templating app_dev.php Controller View A regular- Controller View system with simple *. (a *.php expression based programming templating engine) URL dispatcher and constructs (if, for, Python classes. ...) Model Model

Server Python objects of Server raw types. app/config/routing.yml A relational database Database (MySQL, PostgreSQL, Database SQLite or Oracle) Push- vs pull-based MVC

Client / Web Browser The previous MVC frameworks are said to be push-based: a user action triggers the required processing, and data is then pushed to the view

A ruby file mapping Controller View eRuby (templating layer to render results. URLs to actions. system embedding Ruby code) Pull-based is an alternative approach, where Model the processing starts with the view layer which Server can then pull results from multiple controllers as A Ruby file mapped to a table of the database. needed. Examples: JavaServer Faces, , Database Wicket.

Angular JS Approaches with a A JavaScript framework for developing single- page applications using a MVC approach on single programming the client side. The application is defined in an HTML file with language custom tag attributes, which are read and processed by the framework. The framework binds input and output parts of the page to a model represented by standard JavaScript variables. What's up? GWT

For historical reasons, different (programming) Develop AJAX applications in Java. languages are generally used on server and Main components: ● GWT Java-to-JavaScript Compiler: Translates the Java client sides. programming language to the JavaScript programming This makes the programming of a web language. ● GWT Development Mode: Allows the developers to run and application more complicated, prevents re- execute GWT applications without compiling into JavaScript. using code, etc. ● JRE emulation library: JavaScript implementations of JRE standard library. ● GWT Web UI class library: A set of custom interfaces and classes for creating widgets. Used by Google (Blogger, AdWords, Groups, etc.) and other companies.

Node.js Stratified As we have JavaScript on the client side, let's have JavaScript on the server side! Languages Node.js is an efficient JavaScript (V8) that can run within an HTTP server, or that can run an HTTP server. There are tens of web application frameworks based on Node.js. The most popular are Express and Geddy (MVC). What's up? Hop

Use the same programming language for client A Lisp-like stratified programming language, and server, in a single source code. developed by Manuel Serrano (INRIA Sophia- Antipolis) using Bigloo Scheme. In most cases, the has to explicitely specify what has to be executed on the server and what has to be executed. But one could imagine to delegate this task to the compiler (though this is not easy, e.g. for security or performance reasons).

Hop: Example Ocsigen

(define-service (server-date) OCaml-based web development framework, (current-date)) consisting of: HTML tags are functions $ means that server-date should be evaluated on ● Eliom: a framework for programming web ( ~ means the client server before sending the (