AD109 Navigating the Jungle of Modern Web Development

AD109Navigating the Jungle of

Modern Web DevelopmentShean 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 SessionSA104 | 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

http://info.cern.ch/hypertext/WWW/TheProject.html

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 LayerWeb Server

Application LayerData Binding

Data Storage Layer

Google ChromeIBM 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

Presentation Layer

Web Server

Application Layer

Data Binding

Data Storage Layer

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 databaseExpress.js - web application frameworkAngular.js - front end frameworkNode.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 SessionAD110 | 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

http://www.thegraphicrecorder.com/2012/09/12/sketchnotes-of-the-model-view-controller-paradigm/

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

Web Server

Application Layer

Data Binding

Data Storage Layer

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

Presentation Layer



● Markup (HTML)

● Styling (CSS)


● Security

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

https://en.wikipedia.org/wiki/HTML_element

https://en.wikipedia.org/wiki/Website

http://www.html5test.com

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/

https://css-tricks.com/dom/

DOM - Document Object Model

Presentation Layer



● Markup (HTML)

● Styling (CSS)


● Security

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

Presentation Layer



● Markup (HTML)

● Styling (CSS)


● Security

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.htmlhttp://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.jsBackbone.jsEmber.jsAlso: Ext JS,Prototype.jsMooTools,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/

https://codegeekz.com/15-javascript-libraries-for-april-2015/

https://codegeekz.com/15-javascript-libraries-for-april-2015/

https://blog.newrelic.com/2015/01/05/javascript-libraries/

https://blog.newrelic.com/2015/01/05/javascript-libraries/

http://webdesigncube.com/2015/useful-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

http://www.w3schools.com/ajax/

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

Presentation Layer



● Markup (HTML)

● Styling (CSS)


● Security

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

Presentation Layer

Web Server

Application Layer

Data Binding

Data Storage Layer

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

https://en.wikipedia.org/wiki/Protocol_(computing)

https://en.wikipedia.org/wiki/Web_service



Presentation Layer

Web Server

Application Layer

Data Binding

Data Storage Layer

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)

● NGINXRelated 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

DEMO: Mind Map

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: [email protected]

● 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

mailto:[email protected]

http://www.spmcmanus.net



Questions?

AD109 Navigating the Jungle of Modern Web Development

Software

Transcript of AD109 Navigating the Jungle of Modern Web Development