A web application framework is software designed to support development of dynamic websites and web applications. Frameworks aim to reduce overhead of common web development tasks like database access and templating. Many frameworks follow the model-view-controller (MVC) pattern to separate application logic from views. Popular frameworks include Struts, Spring, Ruby on Rails, Django, and ASP.NET MVC, each providing libraries and tools for web application development in languages like Java, PHP, Python, and .NET.
There is a polarity formed among mobile app developers for two of these amazing languages. While both have their pros and cons, let's see which one wins.
There is a polarity formed among mobile app developers for two of these amazing languages. While both have their pros and cons, let's see which one wins.
In any web application, typically used to have user interaction. When user interacts the events start functioning like mouse clicks, mouse hover, and change event and so on. Application must handle the event and execute the necessary code. Know more about event handling create functional component file or functional component using snippet like RFCE. Don’t add parenthesis after event handler function like “clickHandler” because it is a function not function call.
https://www.ducatindia.com/javatraining/
Python/Flask is one of the most popular choices for Developers when it comes to creating a Web Application. Learn how you can get started with making your Web Application using Python and Flask in this presentation.
Here are Github links for Sample Application that we Demonstrated -
https://github.com/mohanrohit/reading-list-api
https://github.com/mohanrohit/reading-list-web
(Powered by www.DeepDiveEducation.com)
Jenkins is the leading open source continuous integration tool. It builds and tests our software continuously and monitors the execution and status of remote jobs, making it easier for team members and users to regularly obtain the latest stable code.
Web development using javaScript, React js, Node js, HTML, CSS and SQLJayant Surana
A presentation of Web development describing the use of various languages required. The languages covered are javaScript, React js, Node js, HTML, CSS and SQL.
This is a ppt for understanding basic web development. In this, you can learn about
What is web development?
Front-end development
Front-end development technologies
Back-end development
Back-end development technologies
CMS (Content management system)
WordPress
Project
Tutorial Videos: https://www.youtube.com/playlist?list=PLD8nQCAhR3tQ7KXnvIk_v_SLK-Fb2y_k_
Day 1 : Introduction to React, Babel and Webpack
Prerequisites of starting the workshop ( Basic understanding of Node & Express )
What is Virtual DOM?
What is React and why should we use it?
Install and set up React:
a-Using create-react-app
b-From scratch using Babel and Webpack. We will use Webpack Dev Server.
Day 2 : React Basic Concepts
Types of Components: Class-based and Functional based Components
Use of JSX
Parent, Child, and Nested Components
Difference between State and Props
Create and Handle Routes
Component Lifecycle Methods
Create a form and handling form inputs
Use of arrow functions and Spread Operator
Day 3: Advanced Concepts in React
Use of Refs
What are Higher Order Components( HOC )?
How to use HOC
Understanding Context in React
KBK Business Solutions is a passionate web appication development Company. Our expert developers create PHP and custom web application development services and convert them with standardized codes
PHP Web application development company, Web Application Development Company, Web Application Development Company in Hyderabad, Web Application Development Services in India
In any web application, typically used to have user interaction. When user interacts the events start functioning like mouse clicks, mouse hover, and change event and so on. Application must handle the event and execute the necessary code. Know more about event handling create functional component file or functional component using snippet like RFCE. Don’t add parenthesis after event handler function like “clickHandler” because it is a function not function call.
https://www.ducatindia.com/javatraining/
Python/Flask is one of the most popular choices for Developers when it comes to creating a Web Application. Learn how you can get started with making your Web Application using Python and Flask in this presentation.
Here are Github links for Sample Application that we Demonstrated -
https://github.com/mohanrohit/reading-list-api
https://github.com/mohanrohit/reading-list-web
(Powered by www.DeepDiveEducation.com)
Jenkins is the leading open source continuous integration tool. It builds and tests our software continuously and monitors the execution and status of remote jobs, making it easier for team members and users to regularly obtain the latest stable code.
Web development using javaScript, React js, Node js, HTML, CSS and SQLJayant Surana
A presentation of Web development describing the use of various languages required. The languages covered are javaScript, React js, Node js, HTML, CSS and SQL.
This is a ppt for understanding basic web development. In this, you can learn about
What is web development?
Front-end development
Front-end development technologies
Back-end development
Back-end development technologies
CMS (Content management system)
WordPress
Project
Tutorial Videos: https://www.youtube.com/playlist?list=PLD8nQCAhR3tQ7KXnvIk_v_SLK-Fb2y_k_
Day 1 : Introduction to React, Babel and Webpack
Prerequisites of starting the workshop ( Basic understanding of Node & Express )
What is Virtual DOM?
What is React and why should we use it?
Install and set up React:
a-Using create-react-app
b-From scratch using Babel and Webpack. We will use Webpack Dev Server.
Day 2 : React Basic Concepts
Types of Components: Class-based and Functional based Components
Use of JSX
Parent, Child, and Nested Components
Difference between State and Props
Create and Handle Routes
Component Lifecycle Methods
Create a form and handling form inputs
Use of arrow functions and Spread Operator
Day 3: Advanced Concepts in React
Use of Refs
What are Higher Order Components( HOC )?
How to use HOC
Understanding Context in React
KBK Business Solutions is a passionate web appication development Company. Our expert developers create PHP and custom web application development services and convert them with standardized codes
PHP Web application development company, Web Application Development Company, Web Application Development Company in Hyderabad, Web Application Development Services in India
The professionals who just want to know about the topmost web application development frameworks must go through this blog. For the top 10 development Framework introduction, positive and negative aspects are clearly mentioned.
Here is the blog: http://www.aurorasolutions.io/architecture-workflow-of-modern-web-apps/
In the IT industry the biggest problem we regularly face is the abundance of choice. We have tons of frameworks, languages, tools, platforms, etc. Although for competition purposes; multiple choices are ultimately very good but we usually find ourselves in paralysis when we have to choose among them for our next project.
People usually still consider that (frontend) of web applications are created by mixing together HTML, CSS & JavaScript without giving any thoughts about the frontend architecture, workflow and testing; but things have definitely changed now since last couple of years and in this presentation I try to explain that how JavaScript and it’s related stuff has become first class citizen and how the new workflow looks like. And I will also explain that how the architecture of modern web applications is migrating from thick server-side applications to smart clients and services on their journey North to pure Microservices.
Here is the list of different tools and frameworks that have been discussed in this presentation:
* Yeoman: (http://yeoman.io/) Yeoman is the web’s scaffolding tool for modern webapps. Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive.
* Bower: (http://bower.io/) Bower is used for dependency management, so that you no longer have to manually download and manage your scripts. Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.
* Grunt: (http://gruntjs.com/) Grunt is a task-based command line build tool for JavaScript projects. When you work on large projects you have couple of things that you do regularly and you would like them to be automated; Grunt is the tool to solve that problem!
* HTML5 Boilerplate: (https://html5boilerplate.com/) HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.
* Twitter Bootstrap: (http://getbootstrap.com/2.3.2/) Sleek, intuitive, and powerful front-end framework for faster and easier web development.
* Jasmine: (https://github.com/jasmine/jasmine) Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.
* Karma: (https://github.com/karma-runner/karma/) A simple tool that allows you to execute JavaScript code in multiple real browsers.
* PhantomJS: (https://github.com/ariya/phantomjs/) PhantomJS is a headless WebKit scriptable with JavaScript.
* Protractor: (https://github.com/angular/protractor) Protractor is an end-to-end test framework for AngularJS applications.
That special presentation in an event "Multimedia Symposium for New Technologies - MSN 2016" in the Islamic University of Gaza "Faculty of Information Technology".
I was speaker.
One of the most difficult things to do (in Java web development) today is pick which web framework to use when development an application. The Apache Software foundation hosts most of the popular Java web frameworks: Struts, MyFaces, Tapestry and Wicket. This session will compare these different web frameworks, as well as Spring MVC and Stripes. It will briefly explain how each works and the strengths and weaknesses of each. Tips, tricks and gotcha's will be plentiful. Lastly, it will provide attendees with a sample application that utilizes all 6 frameworks, so they can compare line-by-line how the frameworks are different. This sample application will include the following features: sortable/pageable list, client and server-side validation, success and error messages as well as some Ajax functionality. The frameworks will be rated on how easy they make it to implement these features.
Here are the top responsible & cross-platform compatible HTML5 frameworks 2016 that may help developers to develop responsive web applications in all possible categories.
Introduction to Google's Cloud TechnologiesChris Schalk
An overview of the different Cloud technologies available from Google including App Engine, Google Storage, Google Prediction API, and BigQuery.
This presentation was given to the San Diego GTUG on Aug 26th, 2011.
iFour Technolab is a custom software development and software consulting firm in India which has experienced developers of ASP.Net development to increase their business growth and sustainability for small and large enterprises across the globe. We stand as a technology partner which accelerates client growth by means of providing key technology solutions, based on a variety of industry or domain experiences & operations.
Websphere sMash is a new, development paradigm and execution platform for quickly building agile,
web-based application. It harness on the flexibility of Web 2.0 technology and uses dynamic scripting to
build simple situational apps.
Building Components and Services for the Programmable Webgoodfriday
Want to learn how to expose components and services like Windows Live Local and Virtual Earth, but not sure where to begin? This session introduces real-world design patterns and best practices for constructing reusable Web components and Web-based services for the programmable Web.
Spring Framework combines all the industry standard framework approaches (e.g. Struts and Hibernate) into one bundle. Spring provides Dependency Injection, Aspect Oriented Programming and support for unit testing. This gives the developer time to work on main business logic rather than worrying about non-application code.
Large-Scale Web Development with JavaScriptNavid Ahmadi
This presentations discusses the critical technologies to build large-scale Web applications, including MVC architectures such as Backbone.js, Asynchronous Module Definition with require.js, and TypeScript.
Indoor Positioning Using the OpenHPS FrameworkBeat Signer
Research paper presentation given at IPIN 2021, Lloret de Mar, Spain.
Hybrid positioning frameworks use various sensors and algorithms to enhance positioning through different types of fusion. The optimisation of the fusion process requires the testing of different algorithm parameters and optimal lowas well as high-level sensor fusion techniques. The presented OpenHPS open source hybrid positioning system is a modular framework managing individual nodes in a process network, which can be configured to support concrete positioning use cases or to adapt to specific technologies. This modularity allows developers to rapidly develop and optimise their positioning system while still providing them the flexibility to add their own algorithms. In this paper we discuss how a process network developed with OpenHPS can be used to realise a customisable indoor positioning solution with an offline and online stage, and how it can be adapted for high accuracy or low latency. For the demonstration and validation of our indoor positioning solution, we further compiled a publicly available dataset containing data from WLAN access points, BLE beacons as well as several trajectories that include IMU data.
Research paper: https://beatsigner.com/publications/indoor-positioning-using-the-openhps-framework.pdf
Personalised Learning Environments Based on Knowledge Graphs and the Zone of ...Beat Signer
Presentation given at CSEDU 2022, Virtual Event.
The learning of new knowledge and skills often requires previous knowledge, which can lead to some frustration if a teacher does not know a learner's exact knowledge and skills and therefore confronts them with exercises that are too difficult to solve. We present a solution to address this issue when teaching techniques and skills in the domain of table tennis, based on the concrete needs of trainers that we have investigated in a survey. We present a conceptual model for the representation of knowledge graphs as well as the level at which individual players already master parts of this knowledge graph. Our fine-grained model enables the automatic suggestion of optimal exercises in a player's so-called zone of proximal development, and our domain-specific application allows table tennis trainers to schedule their training sessions and exercises based on this rich information. In an initial evaluation of the resulting solution for personalised learning environments, we received positive and promising feedback from trainers. We are currently investigating how our approach and conceptual model can be generalised to some more traditional educational settings and how the personalised learning environment might be further improved based on the expressive concepts of the presented model.
Research paper: https://beatsigner.com/publications/personalised-learning-environments-based-on-knowledge-graphs-and-the-zone-of-proximal-development.pdf
Cross-Media Technologies and Applications - Future Directions for Personal In...Beat Signer
Webinar given at icity Lab Talks - The Digital Value Chain
In this talk, I will first provide an overview of the lab’s research on a general data-driven approach for cross-media information system and architectures based on the resource-selector-link (RSL) hypermedia metamodel. We will then have a look at several cross-media applications for personal information management and next-generation presentation solutions (MindXpres). Finally, I will outline the lab’s most recent research on tangible interaction and dynamic data physicalisation.
Codeschool in a Box: A Low-Barrier Approach to Packaging Programming CurriculaBeat Signer
Presentation given at CSEDU 2023, Prague, Czech Republic.
The tech industry is a fast-growing field, with many companies facing issues in finding skilled workers to fill their open vacancies. At the same time, many people have limited access to the quality education necessary to enter this job market. To address this issue, various small and often volunteer-run non-profit organisations have emerged to up-skill capable learners. However, these organisations face tight constraints and many challenges while trying to design and deliver high-quality education to their learners. In this position paper, we discuss some of these challenges and present a preliminary version of a curriculum packager addressing some of these issues. Our proposed solution, inspired by first-hand experience in these organisations as well as computing education research (CER), is based on a combination of micromaterials, study lenses and a companion mobile application. While our solution is designed for the specific context of small organisations providing vocational ICT training, it can also be applied to the broader domain of learning environments facing similar constraints.
Research paper: https://beatsigner.com/publications/codeschool-in-a-box-a-low-barrier-approach-to-packaging-programming-curricula.pdf
Towards a Framework for Dynamic Data PhysicalisationBeat Signer
Presentation given at the International Workshop Toward a Design Language for Data Physicalization, Berlin, Germany, October 2018
ABSTRACT: Advanced data visualisation techniques enable the exploration and analysis of large datasets. Recently, there is the emerging field of data physicalisation, where data is represented in physical space (e.g. via physical models) and can no longer only be explored visually, but also by making use of other senses such as touch. Most existing data physicalisation solutions are static and cannot be dynamically updated based on a user's interaction. Our goal is to develop a framework for new forms of dynamic data physicalisation in order to support an interactive exploration and analysis of datasets. Based on a study of the design space for dynamic data physicalisation, we are therefore working on a grammar for representing the fundamental physical operations and interactions that can be applied to the underlying data. Our envisioned extensible data physicalisation framework will enable the rapid prototyping of dynamic data physicalisations and thereby support researchers who want to experiment with new combinations of physical variables or output devices for dynamic data physicalisation as well as designers and application developers who are interested in the development of innovative dynamic data physicalisation solutions.
Paper: https://www.academia.edu/37336859/Towards_a_Framework_for_Dynamic_Data_Physicalisation
How to Create Map Views in the Odoo 17 ERPCeline George
The map views are useful for providing a geographical representation of data. They allow users to visualize and analyze the data in a more intuitive manner.
Synthetic Fiber Construction in lab .pptxPavel ( NSTU)
Synthetic fiber production is a fascinating and complex field that blends chemistry, engineering, and environmental science. By understanding these aspects, students can gain a comprehensive view of synthetic fiber production, its impact on society and the environment, and the potential for future innovations. Synthetic fibers play a crucial role in modern society, impacting various aspects of daily life, industry, and the environment. ynthetic fibers are integral to modern life, offering a range of benefits from cost-effectiveness and versatility to innovative applications and performance characteristics. While they pose environmental challenges, ongoing research and development aim to create more sustainable and eco-friendly alternatives. Understanding the importance of synthetic fibers helps in appreciating their role in the economy, industry, and daily life, while also emphasizing the need for sustainable practices and innovation.
Instructions for Submissions thorugh G- Classroom.pptxJheel Barad
This presentation provides a briefing on how to upload submissions and documents in Google Classroom. It was prepared as part of an orientation for new Sainik School in-service teacher trainees. As a training officer, my goal is to ensure that you are comfortable and proficient with this essential tool for managing assignments and fostering student engagement.
Palestine last event orientationfvgnh .pptxRaedMohamed3
An EFL lesson about the current events in Palestine. It is intended to be for intermediate students who wish to increase their listening skills through a short lesson in power point.
The Art Pastor's Guide to Sabbath | Steve ThomasonSteve Thomason
What is the purpose of the Sabbath Law in the Torah. It is interesting to compare how the context of the law shifts from Exodus to Deuteronomy. Who gets to rest, and why?
2024.06.01 Introducing a competency framework for languag learning materials ...Sandy Millin
http://sandymillin.wordpress.com/iateflwebinar2024
Published classroom materials form the basis of syllabuses, drive teacher professional development, and have a potentially huge influence on learners, teachers and education systems. All teachers also create their own materials, whether a few sentences on a blackboard, a highly-structured fully-realised online course, or anything in between. Despite this, the knowledge and skills needed to create effective language learning materials are rarely part of teacher training, and are mostly learnt by trial and error.
Knowledge and skills frameworks, generally called competency frameworks, for ELT teachers, trainers and managers have existed for a few years now. However, until I created one for my MA dissertation, there wasn’t one drawing together what we need to know and do to be able to effectively produce language learning materials.
This webinar will introduce you to my framework, highlighting the key competencies I identified from my research. It will also show how anybody involved in language teaching (any language, not just English!), teacher training, managing schools or developing language learning materials can benefit from using the framework.
How to Split Bills in the Odoo 17 POS ModuleCeline George
Bills have a main role in point of sale procedure. It will help to track sales, handling payments and giving receipts to customers. Bill splitting also has an important role in POS. For example, If some friends come together for dinner and if they want to divide the bill then it is possible by POS bill splitting. This slide will show how to split bills in odoo 17 POS.
Model Attribute Check Company Auto PropertyCeline George
In Odoo, the multi-company feature allows you to manage multiple companies within a single Odoo database instance. Each company can have its own configurations while still sharing common resources such as products, customers, and suppliers.
We all have good and bad thoughts from time to time and situation to situation. We are bombarded daily with spiraling thoughts(both negative and positive) creating all-consuming feel , making us difficult to manage with associated suffering. Good thoughts are like our Mob Signal (Positive thought) amidst noise(negative thought) in the atmosphere. Negative thoughts like noise outweigh positive thoughts. These thoughts often create unwanted confusion, trouble, stress and frustration in our mind as well as chaos in our physical world. Negative thoughts are also known as “distorted thinking”.
Web Application Frameworks - Web Technologies (1019888BNR)
1. 2 December 2005
Web Technologies
Web Application Frameworks
Prof. Beat Signer
Department of Computer Science
Vrije Universiteit Brussel
http://www.beatsigner.com
2. 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]
3. 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
4. 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 into
operations on the model (state
modification)
Model
Controller
View
notifies
modifies
state
selects view
notifies
gets
state
6. 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
7. 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
8. 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]
9. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9October 21, 2016
DEMO: Struts 2 Form Validation
10. 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
…
11. 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
...
12. 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, …)
…
13. 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
…
14. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14October 21, 2016
DEMO: CakePHP
15. 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
16. 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”)
17. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17October 21, 2016
DEMO: Ruby on Rails
18. 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
...
19. 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)
20. 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
…
21. 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
22. 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
23. 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 tag’s function
- e.g. handle user input or deal with child elements placed in between the
custom tags
24. 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 tag’s function
<div ng-controller="AlbumCtrl">
<ul>
<li ng-repeat="image in images">
<img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
</li>
</ul>
</div>
25. 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
26. 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
27. 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)
28. 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)
<?xml version="1.0" encoding="UTF-8" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function sayHello():void {
Alert.show("Hello " + user.text);
}
]]>
</mx:Script>
<mx:Label fontSize="12" text="Name: " />
<mx:TextInput id="user" />
<mx:Button label="Go" click="sayHello()" />
</mx:Application>
HelloWorld.mxml
29. 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
…
30. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30October 21, 2016
DEMO: NW.js
31. 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
32. 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, ...
33. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33October 21, 2016
Exercise 4
Java Servlets and Modern Web Application
Frameworks