Modern Web Development (2018)

Public talk given at Mount Royal University on the state of web development in 2018.

Transcript

1. Modern Web Development
3. WHO AM I? 35% writer of textbooks 25% computer education researcher 20% political science and philosophy 10% computer science 10% ?? something new?
4. 2014 Pearson
5. 2015 Pearson, Global Edition
6. 2017 Pearson, Second Edition
7. Used at 140+ universities with about 4000 copies sold per year.
8. M Y P L A N N E D TO P I C S Where is the Internet? Client-Server Communication Web Dev Today Web Architecture Future Trends
9. LET’S GET STARTED
10. Where is the Internet?
11. While we often connect wirelessly, the internet is still mainly a lot of cable
14. The Internet is a series of overlapping, somewhat hierarchical, network of networks About sixteen different companies are considered to be Tier 1 networks, and include Tata Communications, NTT, AT&T, and Verizon. The most important infrastructure belongs to what are commonly called Tier 1 Networks or Tier 1 ISPs.
15. Tier 1 Networks make use of very fast fibre optic cable, usually 100G with a speed of 100 Gbits/sec or OC- 768 (40 Gbit/sec); some use multiplexing to reach bandwidth of 10 Tbit/sec.
17. CLIENT-SERVER COMMUNICATION
18. This diagram, while simple and easily understandable, hides too much. Let’s add in more detail so that we have a better picture… The client-server model is one in which a computer client, such as a browser, makes requests of another computer called a server, which is normally continually active, listening for requests from clients.
19. A given request may trigger additional requests. But this is still too simple, so let’s add in more detail so that we have a better picture…
20. Most web site content is actually the output generated from programs. This illustrates the basic flow of server-side web pages.
21. Front End Back End DevOps
22. Server-Side / Back-End Environments Node.js CGI/Perl Java Servlets ASP JSP ASP.NET ColdFusion Ruby on Rails PHP Django(Python) Flask(Python) Go/Golang ASP.NET MVC Scala Erlang Rust Clojure TypeScript
23. Why are programs necessary?
24. Servers A typical real-world web site makes use of a significant amount of server replication. That is, a site is typically served by numerous identical server machines (called a web farm). Why? Because a typical single web server can only comfortably handle several hundred simultaneous requests and to provide failover-redundancy.
25. A typical web farm is hosted within a data center …
27. All those computers will generate a great deal of heat, and so a key component of a data center will be its heat generation counter-measures. These include reliable air conditioning, forced air recirculation, and using chilled water directly within the server racks.
30. Reliable and even power is the other key component of any data center.
33. Data centers are often mirrored across the globe. Redundancy + Performance WHY?
34. Instead of having mirror data centers (hugely expensive), companies often instead use edge services provided by Content Delivery Networks. Latency (time for bytes to travel the globe) WHY?
37. Web Development Today
38. JavaScript JavaScript JavaScript JavaScript JavaScript JavaScript JavaScript JavaScript JavaScript JavaScript JavaScript JavaScript JavaScript JavaScript JavaScript JavaScript JavaScript JavaScript JavaScript JavaScript JavaScript JavaScript JavaScript JavaScript JavaScript JavaScript JavaScript JavaScript
39. Recall this illustrates the basic flow of server-side web pages. Back End Front End
40. We can add in client-side interaction with JavaScript to this diagram.
41. In fact, server-side scripting is often quite “thin” or even displaced entirely by Web APIs. Front End Back End
42. Front-End Frameworks As more and more application logic moved into the front-end, JavaScript development became more complicated. Front-end frameworks try to mitigate this complexity … but learning these frameworks entails its own complexity. JQuery Ember Angular React Vue
43. Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud Cloud
44. Servers to handle average request volume
45. Q1 What happens when request volume is much greater than average? Q2 What happens when request volume is much lower than average? Q3 Who is going to setup and support all these machines?
46. Cloud Computing Develops as a response to these questions/problems by using virtualization technology. Four Physical Servers Four Virtual Servers One Physical Server
47. Cloud Computing Cloud computing originally referred to what is known as IaaS (Infrastructure as a Service) Instead of spending too much on infrastructure to handle peak loads, or spending too little to handle peak loads, IaaS has elastic provisioning of virtual servers that scales costs and hardware to the demand. Still need to know how to configure and maintain operating system, servers, etc. Amazon Web Services (AWS) Google Cloud Platform Microsoft Azure
48. Cloud Computing Cloud computing grew to include what is known as PaaS (Platform as a Service). What if you want the benefits of IaaS but as a developer, you don’t want the hassle of configuration of hardware/software on virtualized cloud machines ? Benefits of IaaS but with pre- configured machines and software allow developers to focus on development. Heroku AWS Elastic Beanstalk Google App Engine
49. Cloud Computing Cloud computing grew to include what is known as SaaS (Software as a Service) Instead of implementing all the functionality needed in an application, purchase what you need and invoke it using an API. What if you don’t want (or can’t afford) to re-invent the wheel, and instead wish to make use of existing solutions to essential web services such as file storage, databases, authentication, machine learning, etc. AWS Google S3, DynamoDB, etc FireBase, BigQuery, etc
50. Web Architecture
51. Web architecture used to be pretty clear. You had the front-end up where the user interface resided … …and down below was the back-end where the application logic and data stores were located… … and the machinery working it all was pretty clear as well.
52. Now however web architecture is much more complicated and opaque. Front-ends can contain data and logic. Back-ends are simultaneously much simpler and way more complicated than ever before. And the machinery is both more hidden and more complex.
53. Uploading file in 2005
54. Uploading file in 2013
55. Uploading file in 2018
58. 2005 2018
59. Three Interesting Future Developments
61. Progressive Web Apps (PWAs) Web applications that offer functionality similar to native mobile apps, via …
62. 1. Work Offline PWAs download content+data to browser’s web storage (HTML5) only when internet connectivity is available.
63. 2. Service Workers JavaScript that runs independently in the background and assists in offline-first web application development.
64. 3. Hardware APIs Browsers now provide programmatic access to hardware context such as orientation, location, tilt, etc.
66. Micro-Services A way to construct web applications out of autonomous services, each of which does one thing, handles its own data, and can be deployed independently.
67. Once upon a time … web applications used to be designed and deployed much like desktop applications.
68. Different functionality was implemented, tested, and packaged together and shipped as one monolithic application
69. Problem was that these different large-scale functionalities had to be coordinated together, so difficult to implement changes of direction, testing, deployment, etc!
70. In reality, a web application is typically composed of many smaller levels of functionality, some tightly coupled with the rest of the application, others not so much.
72. Instead of tightly coordinated functionality, why not set some basic rules and communication lines, and then let each function figure out their own way to work?
73. This architectural model is now known as microservices.
74. In reality, the functions shown here would be decomposed into numerous smaller microservices. Each microservice team is free to select its own development language, data storage, build and testing suites, and even their own implementation environment.
75. Large web systems can now contain 100s or even 1000s of microservices.
76. How is this chaos manageable? Through the use of containers, a new implementation technology.
77. Containers Provide a light-weight mechanism for hosting an execution environment.
78. Remember our old monolith web app? It might have consisted of hundreds of PHP and JavaScript source files, SQL scripts, configuration files, etc. These needed to be uploaded and configured on each server …
79. … Which got pretty crazy when it was pushed out to dozens and dozens of servers, not to mention testing machines and development machines.
80. To simplify deployment (and more efficiently use server resources), containers provide an easier mechanism for creating an execution environment and deploying it on multiple machines.
81. Containers especially shine as a mechanism for deploying microservices
83. QUESTIONS?