Post on 13-Feb-2017
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
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
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
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
How the stuff we code is presented to end-user
● Device → Browser
● Markup (HTML)
● Styling (CSS)
● Scripting (Javascript)
● 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
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/
DOM - Document Object Model
Presentation Layer
How the stuff we code is presented to end-user
● Device → Browser
● Markup (HTML)
● Styling (CSS)
● Scripting (Javascript)
● 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
How the stuff we code is presented to end-user
● Device → Browser
● Markup (HTML)
● Styling (CSS)
● Scripting (Javascript)
● 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/
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
Presentation Layer
How the stuff we code is presented to end-user
● Device → Browser
● Markup (HTML)
● Styling (CSS)
● Scripting (Javascript)
● 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" ?> <!-- XML Declaration --> <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
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
Other Related Sessions
● IV103 | Remember DB2NSF? Finally use a true SQL RDBMS with your Notes databases! | Justin Hill | Wednesday | 3:15 PM
● AD102 | Break out of the box - Integrate existing Domino data with modern websites | Karl-Henry Martinsson | Wednesday | 4:30 PM
● AD108 | Move your XPages Applications to the Fast Lane | Howard Greenberg | Wednesday | 5:45 PM
● AD116 | The Future of Notes. The Freedom of Choice | Peter Presnell and Nathan Freeman | Thursday | 11:00 AM
● AD101 | App.Next - The Future of Domino Application Development | Peter Janzen | Thursday | 1:00 PM
● AD105 | IBM Bluemix: Expand Your Horizons | Ryan Baxter and Marky Roden | Thursday | 3:30 PM
● AD107 | Maven: An Exhortation and Apology | Jesse Gallagher | Thursday | 3:30 PM
● IV104 | Speed up your development in XPages or Javascript using XFoundations | Tim Clark | Thursday | 3:30 PM
● IV102 | Graphs in Action | Nathan Freeman | Thursday | 4:45 PM
● AD110 | Node.js for Domino Developers | Matt White | Thursday | 4:45 PM
● SA103 | Domino Security - not knowing is not an option | Darren Duke | Friday | 9:00 AM
● AD117 | WebSockets - "Pushing" the web forward | Mark Roden | Friday | 9:00 AM
● AD106 | Just a View: An Introduction To Model-View-Controller Pattern | Ulrich Krause | Friday | 10:15 AM
● AD114 | Take Your XPages Development To the Next Level | Brad Balassaitis and Paul Calhoun | Friday | 11:30 AM
● AD112 | Real World Experience: Integrating DB2 with XPages | Steve Zavocki and Dwain Wuerfel | Friday | 1:30 PM
● SA104 | Free Beer 12...Southern Style | Rob Novak | Friday | 3:00 PM
● AD113 | Speed Up Your Applications With Nginx and PageSpeed | Eric McCormick | Friday | 3:00 PM
● AD115 | Ten Lines Or Less: Interesting Things You Can Do In Java With Minimal Code | Kathy Brown & Julian Robichaux | Friday | 3:00 PM
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
Questions?