Web Application Frameworks - Web Technologies (1019888BNR)

  • Published on
    14-Apr-2017

  • View
    564

  • Download
    2

Transcript

  • 2 December 2005

    Web TechnologiesWeb Application Frameworks

    Prof. Beat Signer

    Department of Computer Science

    Vrije Universiteit Brussel

    http://www.beatsigner.com

    http://www.beatsigner.com/

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2October 21, 2016

    Web Application Frameworks

    There exist dozens of web application frameworks!

    A web application framework is a software framework that

    is designed to support the development of dynamic web-

    sites, web applications, web services and web resources.

    The framework aims to alleviate the overhead associated

    with common activities performed in web development.

    For example, many frameworks provide libraries for

    database access, templating frameworks and session

    management, and they often promote code reuse.[http://en.wikipedia.org/wiki/Web_application_framework]

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3October 21, 2016

    Web Application Frameworks ...

    A web application framework offers libraries and

    tools to deal with web application issues template libraries, session management, database access

    libraries etc.

    Some frameworks also offer an abstraction from the

    underlying enabling technologies e.g. automatic creation of Java Servlets

    Many frameworks follow the Model-View-Controller (MVC)

    design pattern no mix of application logic and view (e.g. not like in JSP)

    increases modularity and reusability

    Lead to a faster and more robust development process

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4October 21, 2016

    Model-View-Controller (MVC)

    Model data (state) and business logic

    multiple views can be defined for a single model

    when the state of a model changes, its views are notified

    View renders the data of the model

    notifies the controller about changes

    Controller processes interactions with the view

    transforms view interactions intooperations on the model (statemodification)

    Model

    Controller

    View

    notifies

    modifies

    state

    selects view

    notifies

    gets

    state

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 5October 21, 2016

    All-Inclusive MVC Frameworks

    Java Apache Struts 2

    Spring

    PHP Yii

    Zend

    CakePHP

    Ruby Ruby on Rails

    Python Django

    JavaScript Node.js + Express.js

    .NET (C#, Visual Basic) ASP.NET MVC

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 6October 21, 2016

    Apache Struts 2

    Free open source framework for creating enterprise-

    ready Java-based web applications

    Action-based MVC Model 2 (Pull MVC) framework

    combining Java Servlets and JSP technology model

    - action (basic building blocks) from which the view can pull information via the

    ValueStack

    - action represented by POJO (Plain Old Java Object) following the JavaBean

    paradigm and optional helper classes

    view

    - template-based approach often based on JavaServer Pages (JSP) in

    combination with tag libraries (collection of custom tags)

    controller

    - based on Java Servlet filter in combination with interceptors

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7October 21, 2016

    MVC Model 2 (MVC 2) in Struts 2

    Model

    POJOs

    Database

    Controller

    Servlet

    View

    e.g. JSP

    Browser

    1

    2

    3

    4

    5

    6

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8October 21, 2016

    Apache Struts 2 Architecture

    Receive request

    filter chain

    - interception of requests and

    responses, e.g. XSLT

    transformation

    Execute relevant Action invoke interceptors

    read/update data (model)

    Build response (view)

    often based on JSP template

    interceptors in reverse order

    Send response

    again through filter chain[http://struts.apache.org/2.1.6/docs/big-picture.html]

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9October 21, 2016

    DEMO: Struts 2 Form Validation

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10October 21, 2016

    Spring Framework

    Java application framework

    Various extensions for web applications

    Modules model-view-controller

    data access

    inversion of control container

    convention-over-configuration

    remote access framework

    transaction management

    authentication and authorisation

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11October 21, 2016

    Yii Framework

    PHP framework for the development of Web 2.0

    applications that offers a rich set of features AJAX-enabled widgets

    web service integration

    authentication and authorisation

    flexible presentation via skins and themes

    Data Access Objects (DAO) interface to transparently access different database management systems

    integration with the jQuery JavaScript library

    layered caching

    ...

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12October 21, 2016

    Zend

    Open source PHP framework offering various features MVC architectural pattern

    loosely coupled components

    object orientation

    flexible caching

    Simple Cloud API

    features to deal with emails (POP3, IMAP4, )

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13October 21, 2016

    CakePHP

    Open source PHP web application framework MVC architectural pattern

    rapid prototyping via scaffolding

    authentication

    localisation

    session management

    caching

    validation

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14October 21, 2016

    DEMO: CakePHP

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15October 21, 2016

    Ruby on Rails (RoR)

    Open source web application framework

    Combination of dynamic, reflective, object-oriented programming language Ruby

    - combination of Perl-inspired syntax with "Smalltalk features"

    web application framework Rails

    Based on MVC architectural pattern structure of a webpage separated from its functionality via the

    unobtrusive JavaScript technique

    The scaffolding feature offered by Rails can

    automatically generate some of the models and views

    that are required for a website developer has to run an external command to generate the code

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16October 21, 2016

    Ruby on Rails (RoR) ...

    Ruby on Rails Philosophy Don't Repeat Yourself (DRY)

    - information should not be stored redundantly (e.g. do not store information in

    configuration files if the data can be automatically derived by the system)

    Convention over Configuration (CoC)

    - programmer only has to specify unconventional application settings

    - naming conventions to automatically map classes to database tables (e.g. by

    default a 'Sale' model class is mapped to the 'sales' database table)

    High modularity plug-ins can be added for desired server-side functionality

    use RubyGems package manager to easily add plug-ins (gems)

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17October 21, 2016

    DEMO: Ruby on Rails

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18October 21, 2016

    Django

    Open source Python web application framework MVC architectural pattern

    don't repeat yourself (DRY)

    object-relational mapper

    - mapping between model (Python classes) and a relational database

    integrated lightweight web server

    localisation

    caching

    ...

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19October 21, 2016

    Node.js

    Server-side JavaScript low-level, comparable to functionality offered by Servlets

    handling post/get requests, database, sessions,

    Write your entire app in one language however, server-side and client-side code still separated

    Built-in web server (no need for Apache, Tomcat, etc.)

    High modularity packages can be added for additional functionality (via npm)

    Other more powerful frameworks such as Express.js build

    on top of Node.js HTTP utility methods (routing, sessions, ...)

    template engines (Jade or EJS)

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20October 21, 2016

    ASP.NET MVC

    Web framework for .NET languages (C#, VB) MVC architectural pattern

    inversion of control container

    extensible and pluggable framework

    - can use any existing .NET libraries in the form of DLL files

    - core components such as view engine or URL routing modules can be

    replaced

    can generate some of the client-side JavaScript for you

    - form validation

    - dynamic updates using Ajax

    localisation

    session management

    caching

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21October 21, 2016

    Specialised Frameworks and Toolkits

    Client-side web frameworks Backbone.js

    Ember.js

    Angular.js

    Creating browser-based RIAs Microsoft Silverlight

    Creating cross-platform RIAs Apache Flex

    Creating desktop applications NW.js

    Electron

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22October 21, 2016

    Backbone.js

    Cleanly separate data (Model) and user interface (View) you provide server-side interface to read/write models

    Backbone.js does the rest on the client side

    Model load and save models from server

    emit events when data changes

    View display models, capture user input and interactions

    listens for changes and update view if needed

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23October 21, 2016

    Ember.js

    Client-side MVC

    Built for single-page web applications information is refreshed dynamically on demand

    no page refreshes required

    Comes with Ember Data, a data persistence library provides facilities for object-relational mapping (ORM)

    maps client-side models to server-side data

    usage is optional, you can also provide your own interface to the server-side data

    Users can create custom HTML tags ("components") can also include logic relevant to the new tags function

    - e.g. handle user input or deal with child elements placed in between the

    custom tags

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24October 21, 2016

    Angular.js

    Client-side "MVC"

    Two-way data binding between models and views

    Plain HTML as templates HTML is extended (e.g. via attributes) to map models to the

    template, remains valid HTML

    Users can create custom HTML tags ("directives") can also include logic relevant to the new tags function

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25October 21, 2016

    Microsoft Silverlight

    Microsoft's platform for Rich Internet Applications competitor to Adobe Flash

    Runtime requires a browser plug-in Internet Explorer, Firefox, Safari and Google Chrome

    Silverlight Core Common Language Runtime (CoreCLR)

    A Silverlight application consists of CreateSilverlight.js and Silverlight.js

    - initialise the browser plug-in

    user interface described in the Extensible Application Markup Language (XAML)

    - XAML files are not compiled indexable by search engines

    code-behind file containing the program logic

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26October 21, 2016

    Microsoft Silverlight ...

    Programming based on a subset of the .NET Framework

    Silverlight introduces a set of features including LocalConnection API

    - asynchronous messaging between multiple applications on the same machine

    out-of-browser experiences

    - locally installed application that runs out-of-the-browser (OOB apps)

    - cross-platform with Windows/Mac

    microphone and Web cam support

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27October 21, 2016

    Apache Flex

    Software development kit for cross-platform

    Rich Internet Applications (RIAs) based on Adobe Flash

    Main components Adobe Flash Player runtime environment

    Flex SDK (free)

    - compiler and debugger, the Flex framework and user interface components

    Adobe Flash Builder (commercial)

    - Eclipse plug-in with MXML compiler and debugger

    Separation of user interface and data user interface described in MXML markup language in

    combination with ActionScript

    - compiled into flash executable (SWF flash movie)

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28October 21, 2016

    Apache Flex ...

    Flex applications can also be deployed as mobile and

    desktop applications via Adobe AIR (Adobe Integrated

    Runtime)

    private function sayHello():void { Alert.show("Hello " + user.text);} ]]>

    HelloWorld.mxml

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29October 21, 2016

    NW.js

    Formerly node-webkit project

    Bundles your app for usage as desktop application Webkit + Node.js + Application Files (HTML, JS, CSS, )

    Lets you call Node.js modules directly from DOM e.g. use filesystem module to read and write files

    Included API provides access to native UI features right-click context menu

    system tray icon

    notifications

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30October 21, 2016

    DEMO: NW.js

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31October 21, 2016

    Electron

    Similar to NW.js

    Developed for GitHub's Atom editor, now widely used

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32October 21, 2016

    Web Content Management Systems

    Content management systems that focus on web content

    Main functionality data storage and publishing, user management (including access

    rights), versioning, workflows

    Offline (create static webpages), online (create

    webpages on the fly) and hybrid systems

    Graphical interface for creating and managing content

    Suited for non-technical users since the underlying

    technology is normally completely hidden

    Web CMS Examples Joomla, Drupal, Wordpress, ...

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33October 21, 2016

    Exercise 4

    Java Servlets and Modern Web Application

    Frameworks

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 34October 21, 2016

    References

    Struts 2 Quick Guide http://www.tutorialspoint.com/struts_2/struts_quick_guide.htm

    Apache Struts 2 http://struts.apache.org

    Ian Roughley, Struts 2 http://refcardz.dzone.com/refcardz/struts2

    Spring Framework http://www.springsource.org

    Yii Framework http://www.yiiframework.com

    http://www.tutorialspoint.com/struts_2/struts_quick_guide.htmhttp://struts.apache.org/http://refcardz.dzone.com/refcardz/struts2http://www.springsource.org/http://www.yiiframework.com/

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 35October 21, 2016

    References ...

    Zend Framework http://framework.zend.com

    CakePHP http://cakephp.org

    Ruby on Rails http://rubyonrails.org

    Django https://www.djangoproject.com

    Node.js http://nodejs.org

    http://expressjs.com

    http://framework.zend.com/http://cakephp.org/http://rubyonrails.org/https://www.djangoproject.com/https://www.djangoproject.com/http://expressjs.com/

  • Beat Signer - Department of Computer Science - bsigner@vub.ac.be 36October 21, 2016

    References ...

    ASP.NET MVC http://www.asp.net/mvc

    Backbone.js http://backbonejs.org

    Ember.js http://emberjs.com

    Angular.js https://angularjs.org

    Microsoft Silverlight http://www.microsoft.com/silverlight/

    http://silverlight.net/learn/videos/silverlight-videos/net-ria-services-intro/

    http://www.asp.net/mvchttp://backbonejs.org/http://emberjs.com/https://angularjs.org/http://www.microsoft.com/silverlight/http://silverlight.net/learn/videos/silverlight-videos/net-ria-services-intro/

  • Beat S...