Ecmascript (Or ES)
Total Page:16
File Type:pdf, Size:1020Kb
Lesson: Web Programming(1) Omid Jafarinezhad Sharif University of Technology Objective Covers 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) ● HTTP, JavaScript, CSS, HTML5, ReactJs, Flow, Progressive Web App ● Golang, NodeJs, MongoDB, PostgreSQL, Redis ● Docker, Git, YUIDoc, Jest, Materials WebPack, Gulp, Browserify, Locust ● (Optional/Research) Kubernetes, InfluxDB, RabbitMQ, gRPC, Ansible Grading Big Picture Internal or external Content Delivery Email/SMS/... services; may be Network (CDN) Service developed in different language Win HTTP, gRPC HTTP Linux WebSocket front-end back-end Data storage Mac JavaScript, Html, NodeJs, mongoDB, CSS, Ajax, GoLang, cache postgreSQL, WebRTC, ReactJs, C#, Java, InfluxDB, ... Mobile AngularJs,... Dart, ... Redis, AMQP, ... Memcached, ... logs queue Logstash, RabitMQ, Fluentd, ... ZeroMQ, ... back-end 1 Load front-end back-end 2 balancing kubernetes cluster, HAProxy, Docker Swarm, ... back-end 3 Git repository Test, Continuous deployment, Code coverage, Merge, Review Build automation, Deployment automation Development Staging Production Bug User feedback, Crash report,... 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 automation Build 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 HTTP The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, and hypermedia information systems A typical HTTP transaction: Response client Web server Request Example of HTTP Request and Response message HTTP/1.1 200 OK Date: Mon, 27 Jul 2009 12:28:53 GMT Server: Apache/2.2.14 (Win32) Last-Modified: Wed, 22 Jul 2009 19:15:56 GMT Content-Length: 88 Content-Type: text/html Connection: Closed client Web server <html> <body> <h1>Hello, World!</h1> GET /hello.htm HTTP/1.1 </body> User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT) </html> Host: www.tutorialspoint.com Accept-Language: en-us Accept-Encoding: gzip, deflate Connection: Keep-Alive 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-polling With 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 Moderate overhead to request/connection 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) JavaScript often 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/ NPM Use 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 AngularJs AngularJS 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 Ajax The 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 Jest Delightful JavaScript Testing Built-in code coverage reports YUIDoc JavaScript Documentation Tool Gulp gulp is a toolkit for automating painful or time-consuming tasks in your development Browserify Browserify 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 Webpack webpack 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 App Progressive 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