Web Landscape - updated in Jan 2016


Published on

An overview of the web field and recent trends in my advanced web courses (IT 4203 and IT 6753).

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Landscape - updated in Jan 2016

  1. 1. Web Technologies, Applications, Design and Development an Overview of the Landscape and Trends IT 4203: http://it4203.jackzheng.net IT 6753: http://it6753.blogspot.com Jack G. Zheng Spring 2016 http://jackzheng.net/teaching
  2. 2. Overview • Quick review – Fundamental technology components of WWW – The evolution stages of WWW • What’s happening now – Summary of recent advancements and trends in web technologies and application development 2
  4. 4. Key Web Application Components • Architecture: Client/Server • Client: browser • Server: web server • Presentation/UI/content: HTML/CSS • Communication protocol: HTTP • Addressing: DNS, URL • Processing – Processing capabilities at the server or client side 4
  5. 5. Stages Pre-web (before 1990) Early/simple web (1990s) Dynamic web (since second-half 1990s) Web as a platform (21st century) Web 2.0 (since about 2006) Modern (Mobile) Web (since about 2010) 5 * Note that each stage has not ended at this time. They only signal the beginning of drastically new developments, and their applications are still widely used today.
  6. 6. Pre-Web • Before there was the Web, there was the Internet – TCP/IP (Transmission Control Protocol/Internet Protocol) architecture • Internet Applications – Usenet, BBS, Telnet – Email, FTP – Web – P2P – Video streaming – Instant messaging, VoIP – Gaming • Which one generates the most traffic volume on the Internet? – Cisco: http://www.cisco.com/c/en/us/solutions/collateral/service- provider/visual-networking-index-vni/VNI_Hyperconnectivity_WP.html – Sandvine: https://www.sandvine.com/trends/global-internet-phenomena/ 6
  7. 7. Early Web, Simple Web • Invented by Sir Tim Berners-Lee, 1989 • It is a client/server application for information and other services • Fundamental elements of the simple web – Web server – Browser – HTTP – (File-based) URL – Static HTML 7
  8. 8. The Internet Fundamental Technologies in a Simple Web Architecture 8 Web server HTML Files HTTP - Response URL http://spsu.edu/index.html Web client: browser HTTP - Request DNS server(s) Communication medium Server side Client side • https://docs.webplatform.org/wiki/tutorials/How_does_the_Internet_work • https://msdn.microsoft.com/library/bb330932.aspx
  9. 9. Content/Presentation • HTML/CSS is the standard to present web content and UI to end users – HTML describes a web document/page using tags (markups) – CSS takes the styling role from the original HTML • Other UI formats – XHTML: http://www.w3schools.com/html/html_xhtml.asp – WML: http://en.wikipedia.org/wiki/Wireless_Markup_Language – XUL: http://en.wikipedia.org/wiki/Xul – More: http://en.wikipedia.org/wiki/User_interface_markup_language • Data format – Data format is not necessarily used for UI, but for data representation and exchange/transfer purposes: XML, JSON. 9 Are all HTML pages web pages? Not necessarily, examples: • Local .htm/.html documents • .mht - MIME HTML, a web page archive format, which is used offline • .chm - Microsoft Compiled HTML Help
  10. 10. Servers/Clients • Major web server products (Apache, IIS, Nginx) and their market share – http://w3techs.com/technologies/overview/web_server/all – http://news.netcraft.com/ – http://www.w3cook.com/webserver/nginx • Web browser products and market share – http://en.wikipedia.org/wiki/Usage_share_of_web_browsers – http://www.w3counter.com/globalstats.php – http://gs.statcounter.com/ – http://www.netmarketshare.com • A basic web server does not have additional processing capabilities – Complemented by web server extensions or modules (e.g. PHP) which add programming capabilities to handle advanced processing – More specialized servers used in multi-tier web applications • Application servers enrich and scale web applications, with features like session, transaction, security, etc. • Database servers for data and content management • Others: LDAP, Email, etc. • Browser/rendering engine: the core part that handles the markups, scripts, and other client processing – can be integrated into other programs – http://en.wikipedia.org/wiki/Web_browser_engine 10
  11. 11. HTTP and Addressing • HTTP (Hypertext Transfer Protocol) is the feature communication protocol for the web – An application layer protocol typically running on top of TCP/IP – A request-response cycle protocol – Stateless - http://en.wikipedia.org/wiki/Stateless_protocol • HTTP status codes – http://en.wikipedia.org/wiki/List_of_HTTP_status_codes • The World Wide Web’s naming scheme had the goal of uniquely identifying all objects stored on the computers on the Internet. This addressing has two parts – Server address: identified by IP addresses or domain names – File/resource local address: identified by local address pointer • URL (Uniform Resource Locator) is used to locate a resource on a web server – A standard in IETF RFC 1630. – http://en.wikipedia.org/wiki/Uniform_resource_locator • URL encoding http://en.wikipedia.org/wiki/Percent-encoding • Domain Name System (DNS) – A system that provides the conversion between IP addresses and domain names – Top level domains are managed by ICANN (http://www.icann.org) and IANA (http://www.iana.org) – Check IP and domain name online http://cqcounter.com/whois/ 11
  12. 12. Dynamic Web • Dynamic web is enabled by advanced processing capabilities at both client side and server side (especially the server side) 12 Simple/Static Dynamic Overview Usually document (HTML files) based web applications with limited client scripting Advanced processing is utilized at many levels Technologies Client side: HTML, CSS Client side: CSS, JavaScript Server side: PHP, Java, .Net, Database Advantages Simple, small and fast Functional, versatile Web content Static HTML files A mixture of HTML, scripts, programming codes, executable programs, etc. Web page construction Web pages are authored at design time Web pages are "assembled" at run time (on the fly) Content source Single source: HTML file Multiple sources: HTML files, XML files, other files, databases, other websites, etc. Web navigation and interaction mode Click and read Rich interaction: write/type, choose, move, slide, drag and drop, expand, draw, listen, speak, etc.
  13. 13. Server Side Complications 13 Web Server Extension, Module, or Application Server Web Server Client (Browser) Request Response Database Server Other Servers: Email, LDAP, Video streaming, other web servers, etc. Static Content Delegation Adding programming capabilities: ASP.Net, JSP, JSF, Servlet, PHP, ColdFusion, etc. Generated Content (HTML, CSS, JavaScript, XML, etc.)
  14. 14. Processing • Processing capabilities enhance the web from an application aspect • At the server side – CGI: http://en.wikipedia.org/wiki/Common_Gateway_Interface – Web server extensions or application servers – Major platforms: .Net (IIS, ASP.Net, Mono), Java EE (Servlets, JSP, EJB, WebLogic, WebSphere), PHP(Zend), ColdFusion, etc. • At the client side – DHTML: http://en.wikipedia.org/wiki/Dynamic_HTML – CSS, JavaScript and various components and libraries: XMLHttpRequest (AJAX), JQuery, etc. – Browser plug-ins: Flash, Sliverlight, Java Applets, ActiveX, embedded objects, etc. 14
  15. 15. Major Server Side Platforms • Who uses what and market share – https://wappalyzer.com/ – http://en.wikipedia.org/wiki/Programming_languages_used_in_most_popula r_websites – http://cubicle-h.blogspot.com/2010/07/who-uses-aspnet.html – http://w3techs.com/technologies/overview/programming_language/all 15 .Net Java Other Framework ASP.Net Servlet, JSP, JSF, etc. CGI, Perl, PHP, Python, ColdFusion Example sites atlanta-airport.com www.mariettaga.gov newegg.com monster.com godaddy.com atpworldtour.com bankofamerica.com ratemyprofessors.com cnn.com delta.com dealsea.com www.wikipedia.org kennesaw.edu
  16. 16. Web as a Platform • Mainly driven by the server side advancement, the web has become a fundamental platform for all kinds of information systems and applications • From independent and separate site to a platform supporting and integrating various applications – Web technologies are commonly and intensively used, not just for websites, but for all kinds of application and services. – Web applications are no longer separate systems, but are integrated with many other applications. • Enabling technologies – Matured web application servers and frameworks: .Net, JBoss, SharePoint, DotNetNuke, Drupal, Structs, etc. – Standard data exchange format and protocols – Service Oriented Architecture and web services – Cloud computing infrastructure – Security infrastructure: SSL, PKI 16
  17. 17. Multi-Tier/Layer Web Applications • Two tier • Three tier • Four tier 17 http://msdn.microsoft.com/en-us/library/ee658109.aspx
  18. 18. Web 2.0 • Web 2.0 does not refer to a specific version of the Web, but rather a series of technology and application improvements. – http://techterms.com/definition/web20 • Web 2.0 greatly advanced the usage of web. • Behavior aspect of Web 2.0: – Massive user participation and contribution – Social: connection, networking, interaction, sharing – Collective intelligence: content aggregation, crowdsourcing, wisdom of the crowd • Technical aspect of Web 2.0 – Rich user experience: more responsive and interactive; brings desktop experience to the web • Flash, Silverlight, AJAX, HTML 5 – Openness and mash-up • Content and service aggregation and integration with structured data: XML vs. JSON • Web services and (light weight) Web APIs – Development of application frameworks at different levels • Programming frameworks, application frameworks (CMS, portal, etc.), UI frameworks 18 Paul Anderson
  19. 19. (Mordern) Mobile Web • The popularity of smart phone and tablets pushed the changes of web design on small screens and touch based interfaces, and eventually the application architecture. • Mobile web refers to the access and use of websites and web applications using smart mobile devices (and optimized for these devices) through computer networks • It's mainly about user experience, particularly with a focus on user interfaces and interactions. – Web sites: focus on the display of information adapted to the mobile device – Web applications: focus on functional features, with UI specifically designed for mobile devices • It has begun to impact the architecture as well. • Overview of mobile web development – http://www.slideshare.net/jgzheng/mobile-web-development-32003703 19
  20. 20. Summary Stage Time periods Features Pre-web Before 1990 All kinds of protocols and interfaces Early/simple web 1990s Document based information retrieval Dynamic web Since second-half 1990s Advanced dynamic processing on both server and client side Web as a platform 21st century A fundamental platform to support and integrate multiple systems Web 2.0 Since about 2006 Emerging of services and redefining client/server communication style. Modern (Mobile) Web Since about 2010 Major renovation of user experience design. Major client-side advancement. 20
  21. 21. RECENT WEB TRENDS 21
  22. 22. Trends Summary • Web technologies and applications have been advanced a lot in the Web 2.0 era, especially in the past 5 years. The change is happening in many areas and many new are emerging. • Here we are trying to have a peek of the major trend from the following aspects – Web content and data – User interface and interaction – Architecture and processing model – Frameworks – Web client – Web server – Web protocol – Web URL 22
  23. 23. Web Trend: Content and Data • HTML 5 is growing and being adopted faster even before its final publication in 2014 – http://en.wikipedia.org/wiki/HTML5 • More descriptive languages are understood and directly used by web clients – Many are XML based: XUL, SVG, SOAP, etc. – Light-weight data exchange formats are used more and more often: JSON http://www.json.org/xml.html • Content is growing beyond just simple content – WebGL, SVG, Canvas • Contents are coming from multiple sources to create mashups – http://en.wikipedia.org/wiki/Mashup_(web_application_hybrid) – http://science.howstuffworks.com/innovation/repurposed- inventions/5-web-mashups.htm 23
  24. 24. Web Trend: Interface and Interaction • Rich user experience or interaction offers desktop like experiences – JavaScript and libraries has been developed fast to return to the fat client mode – AJAX model revolutionizes the way of web application interactions – HTML 5 and APIs provides rich set of client side functionalities http://lifehacker.com/5416100/how-html5-will-change-the-way-you-use-the- web – Single-page web application is gaining popularity: the web page acts as an application holder - http://en.wikipedia.org/wiki/Single-page_application – Micro-interactions • Multiple device experience – Mobile is the trend: touch based interactions – Responsive design is widely accepted http://mashable.com/2012/12/11/responsive-web-design/ – Cross-screen experience is bring promoted https://speakerdeck.com/cameronmoll/the-cross-screen-experience-pitfalls- and-triumphs – Hybrid applications are developed using web technologies but deployed as native applications. 24
  25. 25. Proliferation of Modern UI Designs • Microsoft Design (metro/modern) https://www.microsoft.com/en- us/stories/design/ • Google Material Design https://www.google.com/design/spec/material- design/introduction.html • SAP Fiori https://experience.sap.com/fiori/ • Oracle Alta http://www.oracle.com/webfolder/ux/middleware/alta/index.html • Zurb Motion UI http://zurb.com/playground/motion-ui • Flat design • http://thenextweb.com/dd/2015/07/24/6-design-trends-taking- over-the-web/ 25
  26. 26. Web Trend: Architecture • The traditional request/response cycle based processing models are become asynchronized. The typical server oriented architectures are shifting increasingly to integrating rich JavaScript front-ends with server template systems. – AJAX • http://en.wikipedia.org/wiki/Ajax_(programming) • http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications/ – It leads to more efficient and faster communications over the Internet. A web application becomes less dependent on navigations between web pages. A web page becomes more like an application holder that many tasks can be completed within the page (thus called the single-page web application). • http://blog.startifact.com/posts/modern-client-side-times.html • http://mobidev.biz/blog/3_types_of_web_application_architecture • http://www.sencha.com/files/misc/Sencha-WP-Web-Applications-Come-of-Age.pdf – Frameworks to enable traditional server side patterns to the client side • AngularJS: http://en.wikipedia.org/wiki/AngularJS • Service oriented architecture enables application oriented web client (consumer) – XML Web services and RESTful web services: https://www.ibm.com/developerworks/webservices/library/ws-restful/ – Micro-service: https://www.nginx.com/blog/introduction-to-microservices/ • Distributed web components with UI – http://www.polymer-project.org • New web application architectures and models rise especially for the mobile environment – Backend as a service http://en.wikipedia.org/wiki/Backend_as_a_service – Four tier by forester: http://nginx.com/blog/time-to-move-to-a-four-tier-application-architecture/ 26
  27. 27. Web Trend: Frameworks, Libraries, APIs • The web is growing into a world of APIs and frameworks – Promote consistency and standard – Promote knowledge transfer – Provide utility or productivity tools – Embodies best practices: design patterns, security, coding efficiency, etc. – Provide a structured/organized environment • New technologies enable increasing use of Web APIs – http://www.programmableweb.com/apis • Rich client side programming frameworks enable the shifting to client side development – A large base of JavaScript based libraries: jQuery, Ext_Js, Backbone, etc. http://en.wikipedia.org/wiki/JavaScript_library – UI frameworks: jQuery UI, Sencha, Bootstrap, D3, etc. • Plethora of application level frameworks and servers to support web application development – CMS (WordPress, SharePoint, Drupal), portal, etc. 27 http://w3techs.com/technologies/history_overview/ content_management/all/y
  28. 28. Web Trend: Client • Web browser is growing beyond just a browser to a personal portal and even an application holder – http://cubicle-h.blogspot.com/2013/11/web-browser-development-trend.html • Web application client is growing beyond browser – http://www.pcmag.com/encyclopedia/term/54272/web-application – Other types of web client: any application that can process HTTP as an client can be view as a web client. Examples: • Embedded browser in a native desktop or mobile application: Visual Studio • Web service consumer • Hybrid applications which has a component to communicate with the web server • Specific programs without UI: cURL, wget, etc. – Hybrid mobile web application is growing fast: http://www.idownloadblog.com/2013/02/04/gartner-mobile-apps-2016/ – Being mobile greatly expanded the form of web client and its capabilities to interact with the real world • Web client is growing beyond user oriented client in the context of service oriented computing 28
  29. 29. Web Trend: Server • Web servers are deeply integrated with application servers – One server handles all  multiple distributed and specialized servers – http://en.wikipedia.org/wiki/Application_server • Application servers are growing – App market will be $36 trillion by 2019 http://www.researchandmarkets.com/research/79f9k7/application – Global Application Server market to grow at a CAGR of 21.95 percent over the period 2013-2018 http://www.researchmoz.us/global-application-server-market-2014- 2018-report.html • Application servers are moving into cloud – Server as a service, backend as a service • Rising of the event-driven server for real time web applications – Node.js http://en.wikipedia.org/wiki/Node.js 29
  30. 30. Web Trend: Protocol • HTTP is supporting or working with other protocols • SPDY is the starting point of HTTP 2.0 – http://en.wikipedia.org/wiki/SPDY • More application level protocols on top of HTTP – SOAP http://en.wikipedia.org/wiki/SOAP – SAML http://en.wikipedia.org/wiki/Security_Assertion_Mark up_Language • WebSocket provides full-duplex communication channel – http://en.wikipedia.org/wiki/WebSocket 30
  31. 31. Web Trend: URL • URL types – File based URL: the URL directly corresponds to a file (either static or dynamic) – Resource identifier based URL: the URL is only an representation (an access point) of resource (typically used in REST) • URL is becoming more virtual – Like an entry point for dynamic resources – The interpretation of URL is done by web servers or application servers – It can leads to a file, a generated web page, a script, a service, or a command – http://en.wikipedia.org/wiki/Rewrite_engine – http://coding.smashingmagazine.com/2011/11/02/introduction-to-url- rewriting/ • Short URL – http://en.wikipedia.org/wiki/URL_shortening 31
  32. 32. Emerging Web Application Types • The definition of web application is expanding. New emerging applications may not rely on some traditional web technology components any more. • Offline web application – http://alistapart.com/article/offline-first • Hybrid web (mobile) application – https://developer.salesforce.com/page/Native,_HTML5,_or_H ybrid:_Understanding_Your_Mobile_Application_Developmen t_Options • Progressive web application – https://infrequently.org/2015/06/progressive-apps-escaping- tabs-without-losing-our-soul/ – http://arc.applause.com/2015/11/30/application-shell- architecture/ 32
  33. 33. Summary • This lecture notes provides a summary of the fundamental technologies and the evolution of the web. – If you find some gaps in understanding of the fundamentals, please follow the readings and additional references in the lecture notes to refresh your knowledge. • It also surveys the trends of web and some related topics. The survey covers a wide range of concepts, technologies and applications. – You should now know all those terms, but you do not need to get a deep understanding of each topic at this time. – Find you interest and continue to explore. 33
  34. 34. Relevant Knowledge and Skill Areas • Web application development – Server side programming, ASP.Net, PHP, Java – Database – XML – DHTML, JavaScript, jQuery, HTML5 – AJAX, JSON – Web services, APIs, REST – Architecture, MVC – IDE • Application frameworks – JavaScript libraries – CMS – Web portal • Mobile web development – UI Design – Mobile frameworks – Hybrids • Web design (frontend design) and multimedia processing – HTML/CSS – Image/video processing – Presentation and layout design – Usability and accessibility – Information architecture, navigation – Frameworks 34  We security  PKI  Encryption  Authentication  OWASP Top 10  Web engineering  Methodology  Analysis  Modeling  Testing, Debugging  Design patterns  Information architecture  Version control  Web admin and management  Website performance  DNS  Web server admin  Web analytics  SEO  Business applications  Intranet portal  Content management  Social media  Advertising and marketing
  35. 35. Recommended General Resources • https://www.webplatform.org • http://www.w3.org • http://w3techs.com • http://thenextweb.com • http://webtrends.about.com • http://www.sitepoint.com/web/ • http://www.smashingmagazine.com • http://webprofessionals.org 35