Embed Size (px)
Citation preview
Lesson: Web Programming(1)Omid Jafarinezhad
Sharif University of Technology
ObjectiveCovers languages, tools, and techniques for developing interactive and dynamic web pages. Topics include page styling, design, and layout; client and server side scripting; web security; and interacting with data sources such as databases
Web development can range from developing the simplest static single page of plain text to the most complex web apps (such as electronic businesses, and social network services)
Materials
● HTTP, JavaScript, CSS, HTML5, ReactJs, Flow, Progressive Web App
● Golang, NodeJs, MongoDB, PostgreSQL, Redis
● Docker, Git, YUIDoc, Jest, WebPack, Gulp, Browserify, Locust
● (Optional/Research) Kubernetes, InfluxDB, RabbitMQ, gRPC, Ansible
Grading
Big Picture
front-end back-end Data storage
cache
queuelogs
Content Delivery Network (CDN)
Email/SMS/... Service
HTTP, gRPC
HTTPWebSocket
mongoDB, postgreSQL, InfluxDB, ...
Redis, Memcached, ...
Internal or external services; may be developed in different language
RabitMQ, ZeroMQ, ...
AMQP, ...
NodeJs, GoLang, C#, Java, Dart, ...
Win
Linux
Mac
Mobile
Logstash, Fluentd, ...
JavaScript, Html, CSS, Ajax, WebRTC, ReactJs, AngularJs,...
front-end
back-end 1
back-end 2
back-end 3
Load balancing
kubernetes cluster, HAProxy,Docker Swarm, ...
Git repository
Development Staging Production
Continuous deployment,Merge,
Build automation,Deployment automation
Test, Code coverage,
Review
User feedback, Crash report,...
Bug
Continuous ...Continuous Integration basically just means that the developer's working copies are synchronized with a shared mainline several times a day.
Continuous Delivery is described as the logical evolution of continuous integration: Always be able to put a product into production!
Continuous Deployment is described as the logical next step after continuous delivery: Automatically deploy the product into production whenever it passes QA!
Build and deployment automationBuild automation is the process of automating the creation of a software build and the associated processes including: compiling computer source code into binary code, packaging binary code, and running automated tests
● Ant, make, cmake, Gradle, Gulp, ...
Deployment automation is taking your built software and deploying or installing it on a test or production system
● Ansible is a configuration management and provisioning tool, similar to Chef, Puppet or Salt
DevOps● a clipped compound of
"development" and "operations" ● is a software development and
delivery process that emphasizes communication and collaboration between product management, software development, operations professionals and close alignment with business objectives
HTTPThe Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, and hypermedia information systems
A typical HTTP transaction:
client Web server
Request
Response
Example of HTTP Request and Response message
client Web server
GET /hello.htm HTTP/1.1User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT)Host: www.tutorialspoint.comAccept-Language: en-usAccept-Encoding: gzip, deflateConnection: Keep-Alive
HTTP/1.1 200 OKDate: Mon, 27 Jul 2009 12:28:53 GMTServer: Apache/2.2.14 (Win32)Last-Modified: Wed, 22 Jul 2009 19:15:56 GMTContent-Length: 88Content-Type: text/htmlConnection: Closed
<html><body><h1>Hello, World!</h1></body></html>
WebSocket● enables real-time bidirectional
communication
● The client establishes a WebSocket connection through a process known as the WebSocket handshake
ws://example.com:8000/wss://example.com:8000/
long-pollingWith long polling, the client requests information from the server exactly as in normal polling, but with the expectation the server may not respond immediately. If the server has no new information for the client when the poll is received, instead of sending an empty response, the server holds the request open and waits for response information to become available. Once it does have new information, the server immediately sends an HTTP/S response to the client, completing the open HTTP/S Request. Upon receipt of the server response, the client often immediately issues another server request
Long-polling (2)The problem is that they carry the overhead of HTTP
● Every time you make an HTTP request a bunch of headers and cookie data are transferred to the server
● This can add up to a reasonably large amount of data that needs to be transferred, which in turn increases latency
○ browser-based game
WebSocket vs HTTP
HTTP Socket.io
Message pattern Request-Response Bidirectional
Overhead Moderate overhead per request/connection
Moderate overhead to establish & maintain
connection, then minimal overhead per message
Web Real-Time Communication (WebRTC)● WebRTC is an open source project to enable real-time peer to peer
communication of audio, video and data in Web and native apps
● The discovery and negotiation process of WebRTC peers is called signaling. For two devices in different networks to find each other they need to use a central service called a signaling server. Using the signaling server two devices can discover each other and exchange negotiation messages. WebRTC does not specify signaling; different technologies such as Websockets can be employed for it
● Looking for more information? https://webrtc.ventures/2017/07/webrtc-tutorials/
Hypertext Markup Language (HTML)standard markup language for creating web pages and web applications
-- ch01.html
Cascading Style Sheets (CSS)● CSS handles the look and feel part of a web page● powerful control over the presentation of an HTML document● Write once and reuse (CSS saves time)● Pages load faster: do not need to write HTML tag attributes every time ->
reduce page size -> page loading time
-- ch03.html
-- ch04.html (CSS-animations)
JavaScriptoften abbreviated as JS, is a high-level, dynamic (run-time evaluation), weakly typed, object-based, multi-paradigm, and interpreted programming language.
As a multi-paradigm language, JavaScript supports event-driven, functional, and imperative (including object-oriented and prototype-based) programming styles
Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production
JavaScript (2)-- ch02.html
ECMAScript (or ES)● ECMAScript is a Standard for a scripting languages
● ECMAScript 5 (ES5): The 5th edition of ECMAScript, standardized in 2009. This standard has been implemented fairly completely in all modern browsers
● ECMAScript 6 (ES6)/ ECMAScript 2015 (ES2015): The 6th edition of ECMAScript, standardized in 2015. This standard has been partially implemented in most modern browsers
○ adds significant new syntax for writing complex applications, including classes and modules, but defines them semantically in the same terms as ECMAScript 5 strict mode
Babel● is a JavaScript compiler (Use next generation JavaScript, today)
● Babel has support for the latest version of JavaScript through syntax transformers
● https://babeljs.io/
NPMUse npm to install, share, and distribute code
Manage dependencies in your projects
$ npm install <package_name>
FLOW● Is a static type checking for javascript● Making you code faster, smarter, more confidently, and to a bigger scale
https://flow.org/
React (React.js or ReactJS)● Declarative: makes it painless to create interactive UIs. Design simple
views for each state in your application, and React will efficiently update and render just the right components when your data changes. it make your code more predictable and easier to debug
● Component-Based: build encapsulated components that manage their own state, then compose them to make complex UIs
● React can also render on the server using Node and power mobile apps using React Native
React (2)XML-like syntax called JSX
AngularJsAngularJS is a very powerful JavaScript Framework. It is used in Single Page Application (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions
JQuery, JQueryUI, JQuery Mobile jQuery is just a JavaScript library
Javascript
JQuery
AjaxThe XMLHttpRequest object is part of a technology called Ajax (Asynchronous JavaScript and XML)
Using Ajax, data could then be passed between the browser and the server, using the XMLHttpRequest API, without having to reload the web page
● Google Maps, and Gmail that used XMLHttpRequest to get new map tiles, or new email without having to reload the entire page
JestDelightful JavaScript Testing
Built-in code coverage reports
YUIDocJavaScript Documentation Tool
Gulpgulp is a toolkit for automating painful or time-consuming tasks in your development
BrowserifyBrowserify seeks to extend the Node ecosystem into to the browser
● With Browserify you can write code that uses require in the same way that you would use it in Node
All of the modules that main.js needs are included in the bundle.js from a recursive walk of the require() graph
Webpackwebpack is used to compile JavaScript modules
webpack is a module bundler for modern JavaScript applications
When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles - often only one - to be loaded by the browser
Progressive Web AppProgressive Web App (PWA), in general, is a term used to denote web apps that use the latest web technologies
● Progressive Web Apps are experiences that combine the best of the web and the best of apps
What is a Progressive Web App? ● Progressive - Works for every user, regardless of browser choice because
it's built with progressive enhancement as a core tenet
● Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next
● Connectivity independent - Enhanced with service workers to work offline or on low-quality networks
● App-like - Feels like an app, because the app shell model separates the application functionality from application content
● Fresh - Always up-to-date thanks to the service worker update process
What is a Progressive Web App? (2) ● Safe - Served via HTTPS to prevent snooping and to ensure content hasn't
been tampered with
● Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it.Re-engageable - Makes re-engagement easy through features like push notifications
● Installable - Allows users to add apps they find most useful to their home screen without the hassle of an app store
● Linkable - Easily share the application via URL, does not require complex installation.
GolangGo (often referred to as golang) is a free and open source programming language created at Google in 2007 by Robert Griesemer, Rob Pike, and Ken Thompson (He also invented the B programming language, the direct predecessor to the C programming language)
Node.JsNode.js is an open-source, cross-platform JavaScript run-time environment for executing JavaScript code server-side
Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine
Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient
● operates on a single thread, using non-blocking I/O calls ● without incurring the cost of thread context switching
MongoDBa free and open-source cross-platform document-oriented database program
Classified as a NoSQL database program
uses JSON-like documents with schemas
RDBMS MongoDB
Database Database
Table Collection
Tuple/Row Document
column Field
Table Join Embedded Documents
Primary Key Primary Key (Default key _id provided by mongodb
itself)
PostgreSQLPostgreSQL, often simply Postgres, is an object-relational database management system (ORDBMS) with an emphasis on extensibility and standards compliance
Support JSON (since version 9.2), and a faster binary JSONB (since version 9.4; not the same as BSON)
RedisRedis is an open-source in-memory database project implementing a networked, in-memory key-value store with optional durability
Redis supports different kinds of abstract data structures, such as strings, lists, maps, sets, sorted sets, hyperloglogs, bitmaps and spatial indexes
LocustAn open source load testing tool
Define user behaviour with Python code and swarm your system with millions of simultaneous users
DockerDocker is a container management service
a tool that allows developers, sys-admins etc. to easily deploy their applications in a sandbox (called containers) to run on the host operating system i.e. Linux
key benefit of Docker is that it allows users to package an application with all of its dependencies into a standardized unit for software development. Unlike virtual machines, containers do not have the high overhead and hence enable more efficient usage of the underlying system and resources
KuberneteKubernetes (commonly referred to as "K8s") is an open-source system for automating deployment, scaling and management of containerized applications that was originally designed by Google and donated to the Cloud Native Computing Foundation
A Pod is a Kubernetes abstraction that represents a group of one or more application containers (such as Docker or rkt), and some shared resources for those containers
Kubernete (2)A Pod always runs on a Node. A Node is a worker machine in Kubernetes and may be either a virtual or a physical machine, depending on the cluster
InfluxDBInfluxDB is an open-source time series database developed by InfluxData
It is written in Go and optimized for fast, high-availability storage and retrieval of time series data in fields such as operations monitoring, application metrics, Internet of Things sensor data, and real-time analytics
RabbitMQRabbitMQ is an open source message broker software (sometimes called message-oriented middleware) that implements the Advanced Message Queuing Protocol (AMQP)
The RabbitMQ server is written in the Erlang programming language
gRPCA high performance, open-source universal RPC framework
Define your service using Protocol Buffers,
● powerful binary serialization toolset and language
Works across languages and platforms
AnsibleAnsible is an open-source automation engine that automates software provisioning, configuration management, and application deployment
It uses SSH to connect to servers and run the configured Tasks
how to become a web developer● front-end
○ Learn JavaScript (ES5, ES6)■ HTML, CSS
○ ReactJs
● Back-end○ NodeJs & Golang○ Mongodb and postgres○ Redis○ Security and scalability issues
● Protocols, Environment and Tools
○ HTTP○ Web app creator○ Gulp, Locust, ...
thanks for your attention any questions?
