AD109 Navigating the Jungle of Modern Web Development

AD109
Navigating the Jungle of
Modern Web Development
Shean P McManus
Post Consumer Brands

My Background
● IT Professional for 19 years
● Notes & Domino for 17 years
● Developer & Administrator (reluctantly)
● Ni9 and Open NTF Contributor
● spmcmanus.net

My Background - Personal Interests
● Live in Twin Cities
● Golf
● Baseball
● Craft Beer
● My kids sports
Related Session
SA104 | Free Beer 12...Southern Style | Rob Novak | Friday | 3:00 PM

Why this Topic?
● Increasing complexity of modern web development
● More terms/tools/languages to understand and use
● More ways to modernize legacy Notes applications
● Keeping up is tough
○ Developers can face lack of time to innovate and learn
○ Lack of IT leadership focus

What am I talking about?
First Web Site: http://info.cern.ch/hypertext
The first “website”: http://info.cern.ch/hypertext/WWW/TheProject.html. Circa late 1991

The web is much more complex today

Web Usage Growth
Sources: internetworldstats.com, internetlivestats.com
1995
16 Million Users and 23,500 Websites
2015
3+ Billion Users and 968 Million Websites

Growth Results in Lots of Tech

Session Goal
● Overview and organization of the basic components and structure of
modern web development
● Basic explanation of relevant hot topics
● Resulting in a mind map diagram of terms and tech discussed

What This Session is Not
● Technical deep dive on any subject
● No code demos … at least nothing complex
● Not a “complete” overview...there will be things missing

Basic Architecture of Web Applications
Presentation Layer
Web Server
Application Layer
Data Binding
Data Storage Layer

Example: xPages Application
Presentation Layer
Web Server
Application Layer
Data Binding
Data Storage Layer
Google Chrome
IBM HTTP Server
XPages
REST Service
Domino NSF

Presentation Layer
Web Server
Application Layer
Data Binding
Data Storage Layer

Data Storage Layer
Two major formats for data storage
● SQL - relational database model
● NO-SQL - storage other than by using tabular relations
○ Document
○ Column
○ Graph
○ Key-Value
○ Multi-Value
Related Session:
INV103 | Remember DB2NSF? Finally use a true SQL RDBMS with your Notes databases! | Justin Hill | 3:15 Wednesday

Data Storage Layer: Relational vs Document
Image Source: http://www.couchbase.com/nosql-resources/what-is-no-sqle

Data Storage Layer: SQL vs NO-SQL
● SQL
○ Data Integrity
○ Uniqueness of data attributes
○ Superior query options and BI tools integration
● NO-SQL
○ Data not normalized (data duplicated)
○ Performance gains as concurrent access to single memory addresses
is removed
○ More scalable (not Domino)
○ More flexible

Data Storage Layer - Database Examples
● SQL
○ Oracle
○ IBM DB2
○ Microsoft SQL Server
○ PostGreSQL
● NO-SQL
○ IBM Domino
○ CouchDb (open source)
○ MongoDB (open source)
○ FoundationsDB

Application Layer
● Framework for writing and maintaining the application code and business
logic
● May contain server-side code for application processing
● Pass-through between the data and the presentation
● Platforms can be open-source, proprietary and built on many different base
languages

Application Layer
Can be categorized by base language
● Java - Apache Sling, Eclipse RAP, Google Web Toolkit, Hibernate
○ JSF - IBM xPages
● Javascript - Express.js & Node.js
● .Net - ASP.NET MVC
● Python - Django
● PHP - Zend PHP, HipHop VM
● Ruby - Ruby on Rails
● PL/SQL - Oracle Application Express (APEX)

Application Layer - Javascript Frameworks
Express.js & Node.js
● Node.js is a open source, server-side JavaScript execution environment
○ Web apps with real-time, two-way connections (server can initiate communication too)
○ Solves for I/O scalability issues
○ Not best for high CPU intensive applications and with relational data
○ Use cases: chat, stock tickers, application monitoring dashboards
○ Netflix, New York Times, LinkedIn, PayPal
● Express.js is a lightweight web application framework
○ minimalist and fast
○ designed to work on top of Node.js
○ abstracts away some of the more difficult aspects of Node
○ contains front-end templating to build UI
Related Session:
AD110 Node.js for Domino Developers | Matt White | Thursday 4:45pm

Javascript - Most Popular Frameworks 2015
● Angular
○ Open-source, maintained by Google
○ Supports MVC and MVVM architectures
○ Dynamic page content through two-way data binding
■ automatic synchronization of data between model and view components
○ Examples: Youtube on PS3, MSNBC.com, Plunker, Weather Channel
● Backbone
○ RESTful JSON interface
○ MVP architecture
○ Lightweight - only dependency is underscore.js
○ Examples: Airbnb, USA Today, Hulu, Pinterest, Digg
● Ember
○ Open-source, MVCs, two-way data binding
○ Discourse, Vine, Live Nation, Nordstrom, Chipotle

MEAN Stack
MongoDb - open-source No-SQL database
Express.js - web application framework
Angular.js - front end framework
Node.js - a software platform for scalable server-side and networking applications.
● One language throughout the whole development stack (Javascript)
● Support for MVC architecture
● JSON used for data transfer
● All open source
Related Session
AD110 | Node.js for Domino Developers | Matt White | Thursday 4:45PM

Sidebar: Model-View-Controller Design Pattern
● Developed for desktop software but now recommended for web frameworks
● Clear separation of presentation and application logic
● Model - data and business logic
● View - presentation of data to the users in any supported format
● Controller - receives requests and calls necessary resources to carry them out
● Structured code is easier to maintain
● MVC supported frameworks have this basic structure already prepared
Alternate Diagram - http://www.thegraphicrecorder.com/2012/09/12/sketchnotes-of-the-model-view-controller-paradigm/
Related Session: AD106 | Just a View: An Introduction To Model-View-Controller Pattern | Ulrich Krause | Friday @ 10:15

Application Layer: xPages
XSP Java Runtime Engine
JSF 1.1
Domino Designer
Domino HTTP Server Task
XSP Design
Elements
.NSF Data
Source
Web Browser

IBM Bluemix
“Blue Mix is an open standard, cloud-based platform for building, managing and running applications
of all types ( web, mobile, big data, new smart devices, and so on)”
● Cloud Platform as a service (PaaS) developed by IBM
● Supports multiple programming languages and services
● Based on Cloud Foundry technology and runs on SoftLayer infrastructure
● Run applications in the cloud without worrying about underlying hardware, software and
networking components
● xPages on Bluemix is now live for experimentation
● Source: July 23rd webcast on IBM XPages for Bluemix
Related Session:
AD105 - IBM Bluemix: Expand Your Horizons | Ryan Baxter & Mark Roden | 3:30 Thursday

Other PaaS Providers
● Amazon Web Services
● Microsoft Azure
● Google App Engine
● Salesforce.com

Presentation Layer
How the stuff we code is presented to end-user
● Device → Browser
● Markup (HTML)
● Styling (CSS)
● Scripting (Javascript)
● Security

Browser Usage: Mobile & Tablet
Source: http://gs.statcounter.com/?PHPSESSID=0l0mtmg1ssnrcg52lbj6nrbmk6

Browser Usage: Desktop
Source: http://gs.statcounter.com/?PHPSESSID=0l0mtmg1ssnrcg52lbj6nrbmk6

Markup: HTML & HTML5
● HyperText Markup Language
● Authoring language used to create document for a web page
● Ensures the proper formatting of text and images
● Created by Tim Berners-Lee, first draft in 1991
● Still the basic building block for modern web pages
<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>

Markup: HTML5
● HTML5 released in October 2014
● WC3 Specification plus other related and experimental features
● Improves multi-media support without need for plugin (flash alternative)
● Additional elements and attributes that reflect modern website usage
● No browser supports everything (www.html5test.com)
○ Chrome comes closest

DOM - Document Object Model
Document Object Model (DOM) - a programming interface for HTML, XML and
SVG documents.
● Structured representation of the document in a tree hierarchy
● Web browsers parse the HTML into a DOM using the browser layout engine
● Provides for scripting access to the page content
● DOM Inspector - right-click inspect element
● For more DOM details check out: https://css-tricks.com/dom/

CSS & CSS3
● CSS is Cascading Style Sheets
● Describes look and formatting of markup language pages (such as HTML)
● Styles applied through use of selectors (i.e ID and class)
● Promotes separation of content and presentation

CSS & CSS3 History
● CSS 1 Spec completed in 1996
● First near-full implementation with IE 5.0 in March 2000
● CSS 2.1 published in June 2011
● CSS 3 is separated into modules, not a single specification
● Some browsers parse CSS code differently

CSS - Brief Demo
DEMO: DOM Inspector and CSS on MWLUG.org

CSS Pre-processors
● Languages that extend CSS by adding features common to full
programming languages.
○ nesting syntax
○ variables
○ mixins
○ mathematical functions
○ operational functions
○ joining of multiple files
● Compiles into CSS
● LESS (JavaScript) and SASS (Ruby) are most popular

CSS Pre-processor Variable Example
h1 {
color: #00f;
font: 16px Arial, sans-serif;
}
BECOMES …
@col-blue: #00f;
@font-family: Arial, sans-serif;
@font-l: 16px;
h1 {
color: @col-blue; // color: #0000ff;
font: @font-l @font-family; // font: 16px Arial, sans-serif;
}

CSS Frameworks
CSS Frameworks make development easier and more standards-compliant by
providing a pre-defined set of components often including javascript to add
functionality.
Typical Qualities of Popular Frameworks
● Responsive design (to accommodate different screen sizes)
● Grid structure
● Web typography and icons
● GUI components like tabs, sliders, modal dialogs and accordions
● Add-ons and extensions

CSS Framework Examples
Twitter Bootstrap Foundation
“Bootstrap is the most popular HTML, CSS, and
JS framework for developing responsive, mobile
first projects on the web.”
“Big brands are relying more and more on the
world's most advanced, responsive front-end
framework. Their sites are now built Foundation
tough so customers can connect with them on
any device.”

Demo: Twitter Bootstrap Walkthrough

Javascript
● aka EMCAScript
● 1995 - Brendan Eich (Also co-founder of Mozilla)
● First supported in Netscape Navigator 2.0
● Allowed for client-side scripts to interact with the end users
● Foundation for much of the client-side innovations in modern web design
● Also server-side implementations (including xPages)

Javascript - Base Language
Common Uses in Web Development
● Input Validation, including Regular Expressions
● Animation
● Event Handling
● DOM Manipulation
● Autocomplete fields
● Input Field Enhancements (drop-down, radio buttons, etc..)
● External libraries make much of this easier!

Javascript - Libraries/Frameworks/Toolkits
Definitions and categorization are a generalization only.
http://martinfowler.com/bliki/InversionOfControl.html
http://www.laputan.org/drc/drc.html
Library Toolkit Framework
A set of functions
called to perform a
specific task or set
of related tasks
Integrated libraries
the contain a larger
set of tools. More
flexible but may
require more effort.
An end-to-end solution that controls the
coordination and sequencing of application
activities.
jQuery Dojo Angular.js
Backbone.js
Ember.js
Also: Ext JS,Prototype.js
MooTools,Ruby on Rails

Javascript - jQuery
● jQuery is a cross-platform library that simplifies client-side scripting
● Most widely used JS library
● Shrinks lines of code
● Many other libraries and frameworks use jQuery including
○ jQuery UI
○ jQuery Mobile
○ jQuery plug-ins

Javascript - jQuery - Very Basic Examples
DEMO - Very Basic jQuery Examples

Javascript - Dojo
● Open Source, Modular, and Cross-platform
● 4 main components
○ dojo - core code and most non-visual modules including AJAX support
and DOM manipulation
○ dijit - user-interface modules for widgets and layouts
○ dojox - assorted modules not yet stable enough for dojo or dijit
○ util - utility tools for documentation, style-checking, testing and
optimization
● Dojo installed natively on Domino server - Domino 9.0.1 = Dojo 1.8.3
● Often compared to jQuery

Javascript - Specific Use Libraries
● Main usage is solve a specific problem or make doing so easier
● Examples:
○ Dynatable.js - interactive tables
○ Trumbowyg - lightweight WYSIWYG editor
○ Please.js - color library
○ jQuery Bootgrid - grid control using jQuery and Bootstrap
○ XRegExp - regular expression validation
○ So many more …
■ https://codegeekz.com/15-javascript-libraries-for-april-2015/
■ https://blog.newrelic.com/2015/01/05/javascript-libraries/
■ http://webdesigncube.com/2015/useful-javascript-libraries/

Javascript - AJAX
● AJAX = Asynchronous Javascript and XML
● “AJAX is the art of exchanging data with a server, and updating parts of a web page - without
reloading the whole page.” - http://www.w3schools.com/ajax/
● Data exchange happens in the background
● Includes
○ HTML & CSS for presentation
○ DOM for dynamic display of and interaction with data
○ XML for exchange of data (JSON could be used too)
○ XMLHttpRequest object for asynchronous communication
○ JavaScript to bring it all together
● JavaScript frameworks like jQuery and Angular make this easier with built-in support for AJAX
● Examples include: Google Maps, and Google Suggest

Javascript - Misc
● Other languages are influenced by and compiles into JavaScript
○ CoffeeScript
○ GorillaScript
○ LiveScript
○ TypeScript
○ Opa
○ Dart
○ RapydScript - Python-like Javascript
● Server side javascript implementations
○ IBM xPages SSJS
○ RingoJS
○ Node.js

Browser Security
Key Features in Browser Security
● CORS - Cross-origin resource sharing
○ Define how to safely determine whether or not to allow cross-origin
request
○ More freedom than just allowing same-origin requests
● HTTPS over SSL -
○ Secure Sockets Layer - communication is encrypted
● OAUTH - open standard for website authorization
○ Example - login using Facebook or Google or Twitter

Data Binding
The method by which you move data back and forth from the data storage layer
to the presentation layer
● Platform Specific - xPages data binding of an xPage to a form or view
● Platform Independent Binding Using...
○ JSON / JSONP - JavaScript Object Notation
○ XML - Extensible Markup Language
○ REST - Representational State Transfer
○ SOAP - Simple Object Access Protocol

Data Binding - XML
XML = Extensible Markup Language
● W3C Recommendation in February 1998
● Represents the structure of data before it is transported from one system
to another
● Ideal for Highly Structured Information
● Uses schema to determine how XML document needs to be structured

Data Binding - XML Example
<?xml version="1.0" encoding="UTF-8" ?> 
<firstName>John</firstName>
<lastName>Smith</lastName>
<isAlive>true</isAlive>
<age>25</age>
<address>
<streetAddress>21 2nd Street</streetAddress>
<city>New York</city>
<state>NY</state>
<postalCode>10021-3100</postalCode>
</address>
<phoneNumbers>
<type>home</type>
<number>212 555-1234</number>
</phoneNumbers>
<phoneNumbers>
<type>office</type>
<number>646 555-4567</number>
</phoneNumbers>

Javascript - JSON
● JSON = JavaScript Object Notation
● Open standard
● Uses text to serialize and transmit data objects
● An alternative to XML, uses attribute-value pairs
● Objects can be nested
● Support in JavaScript and many of it’s libraries, frameworks and toolkits...
including jQuery and Angular among others
● Classic Notes view support JSON using ouputformat=JSON
○ For example: /database.nsf/viewname?
readviewentries&outputformat=JSON

Javascript - JSON Example
{
"firstName": "John",
"lastName": "Smith",
"isAlive": true,
"age": 25,
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": "10021-3100"
},
"phoneNumbers": [
{
"type": "home",
"number": "212 555-1234"
},
{
"type": "office",
"number": "646 555-4567"
}
],
"children": [],
"spouse": null
}

Data Binding - JSON vs XML
JSON XML
● Efficient structure
● No formatting
● Few data types (text and numbers)
● Easier to read
● Readable by JavaScript frameworks
and libraries without translation
● Verbose
● Can mark or tag text documents
(formatting)
● Extensible to other data types
● Schema allows for validation
● Better for document sharing

Data Binding - REST
● REST
○ REresentation State Transfer
○ Architecture style or design concept for data communication
○ Used in the building of web services
○ Simpler alternative to SOAP
○ Uses HTTP and it’s GET,POST,PUT,DELETE methods
○ Is stateless (no client context stored on the server between requests)
● RESTful
○ A platform and language independent service is RESTful if it conforms to all of the REST
architectural properties.

Data Binding - SOAP
SOAP = Simple Object Access Protocol
● Protocol specification for exchanging structured information in the implementation of web
services - Wikipedia
● Uses XML
● Can use HTTP but also FTP, SMTP and other protocols
● Can be RESTful
● Very wide tool support for SOAP components
● XML Can support wider range of datatypes and formatting so for non-text data SOAP can be
preferred...but at a cost of more bandwidth usage

Web Server Layer
Role - to server up the application and data to the end user’s web browser
Examples:
● IBM HTTP
● IIS (Microsoft)
● Apache HTTP
● Oracle HTTP
● GWS (Google)
● NGINX
Related Session
AD113 | Speed Up Your Applications With Nginx and PageSpeed | Eric McCormick | Friday @ 3pm

Other Stuff - Tools and Services
● Code Repositories / Source Code Hosting
○ Offer revision control and source code management
○ Examples
■ GitHub
■ BitBucket
■ OSDN
● CDN - Content Delivery Networks
○ Serve up high availability and high performance
○ resources stored on their network and pulled into your application

Put It All Together
Mind Map / Taxonomy of This Session

Conclusion
● Modern Web Development is becoming increasingly more
complicated but …
● Skills transfer across platforms more easily than before
● Each generation of tools is designed to make some things easier
● Having a broad knowledge helps future decisions

Contact Information
● Twitter: @sheanpmcmanus
● Gmail: shean.mcmanus@gmail.com
● Website: www.spmcmanus.net
● Skype: Shean McManus
● Links and Resources for this Presentation
http://spmcmanus.net/A55E17/links.nsf/pocket.html
Filter on tag MWLUG-AD109

AD109 Navigating the Jungle of Modern Web Development

Recommended

Recommended

More Related Content

Similar to AD109 Navigating the Jungle of Modern Web Development

Similar to AD109 Navigating the Jungle of Modern Web Development (20)

Recently uploaded

Recently uploaded (20)

AD109 Navigating the Jungle of Modern Web Development