CSCI571 Exam 2 Notes.pdf

mongoDB un: gnduka17 pm7VOLe62fsRAKPr Need to score at least 76% for Anothing less than 60% !!!!! For B+ Lecture 14: Web Server Performance Notes ● Secure Web Communication ○ Public Key Cryptography ■ What can happen to the key fob I give to my friend of my car? ● He doesn't make copies ● Somebody s...

mongoDB un: gnduka17 pm7VOLe62fsRAKPr Need to score at least 76% for Anothing less than 60% !!!!! For B+ Lecture 14: Web Server Performance Notes ● Secure Web Communication ○ Public Key Cryptography ■ What can happen to the key fob I give to my friend of my car? ● He doesn't make copies ● Somebody steals the key i give him…somebody steals the key and drive away the car ■ The minute I give away my private key..share my private key, i lose control of the key ■ Private key you keep and public key is for public. ■ For Authentication: sender creates both keys ■ Ensure no body receive ■ For Privacy: receiver creates keys ■ Private Key Encryption: sender/receiver share private key ■ Public Key Encryption: for authentication-> sender creates both keys ■ Receiver has private and public keys: for privacy ○ ○ ■ 3 guys at MIT invented public key encryption ■ The most popular algorithm for public key encryption(for authentication) is the RSA algorithm (Rivest, Shamir Adleman) ■ Professor Adleman coined the term computer virus RSA is one of the first practical public-key cryptosystems and is widely used for secure data transmission ○ ○ ○ ○ ○ A user of RSA creates two large prime numbers and then publishes one of them as his public key – the numbers are typically 1024 digits or more – there are a few more steps involved Determining the private key from the public key involves factoring very large numbers – but there is no efficient algorithm for factoring large numbers Hash Functions - to map a very large object (mp4) to a unique small value.. Bits of source file go through hash function and out put is a small hash…A hash function or hash algorithm is a function that maps a domain of values into a range of numbers. ■ Two well known cryptographic hash functions are MD5 and SHA….Used today MD5 and SHA ■ – H(X) is called the message digest or digital signature of X under the hashing algorithm H. ■ Property of a good hash function: ● Collisions - the probability of collisions is low…probability of 2 files to produce the same hash is low… ● SHA and MD5 have low collisions Super fast hash functions - Bulk cipher methods ■ •public/private key encryption methods are not suitable for general purposes, e.g. ● – the RSA method can only encrypt blocks of data which are 11 bytes less than the key size; and each decryption involves complex mathematical calculations ■ therefore, secure communication on the web uses a combination of public key encryption and conventional one-way ciphers • ■ a bulk cipher is one in which the same keys are used to encrypt and decrypt the data; they are fast and can encrypt files of any size ■ some sample bulk ciphers: RC2, RC4-40, RC4-56, DES40-CBC: The higher the digits the more complex the algorithms Making sure a message has not been altered…Message Digest ■ Generated in the frontend..before encrypting the resource ■ A message digest is the number produced by applying a cryptographic hash function to a message ● – The message digest is included along with the message; here are the steps that are followed: ● 1. Sender produces a message digest using a known hashing algorithm ● 2. Message digest is encrypted and sent with the message ● 3. Receiver decrypts the digest and then computes the message digest from the actual message to make sure they are identical ○ • For greater security, the message can also be encrypted ○ • Systems combining public key cryptography and message digests are called digital signatures ■ If one bit is changed ○ ● Certificate Authority ■ Encryption of data does not solve the entire problem; how do we guarantee that the organizations that we are dealing with are legitimate? ■ A certificate authority (CA) is an organization that both parties involved in a secure communication, trust • ■ the role of the CA is to verify the identity of an entity (client/server) ■ once the CA verifies the entity, it issues a digitally signed electronic certificate – it is signed with the CA’s private key ■ Web browsers are usually pre-configured with a list of CAs that are trusted ■ Proving who you say you are - CA ■ You can become your own CA…using OpenSSL..why would you be your own CA? 1-1 transaction between yourself and no one else ■ A certificate authority dispenses public and private keys ○ Secure Sockets Layer Protocol and HTTPS ■ Given public key encryption, cryptographic hashing, message digests and digital certificates, how are these put together to produce secure electronic commerce? ■ The answer: SSL, is a protocol for establishing an encrypted link between server and client, that uses authentication and encryption of transactional data ■ Netscape was the original designer of SSL ■ SSL is occasionally called TLS, Transport Layer Security protocol ■ SSL is transparent to users, except for the https (rather than http) that appears ■ the SSL protocol fits between the TCP layer and the HTTP layer – ● therefore, SSL can be used to encrypt other application-level protocols such as FTP and NNTP ■ SSL is supported by all major browsers ■ 7 steps that happen before any data is transmitted ■ TLS replaced SSL as a protocol ■ SSLlabs …give thema domain and they run it on a site and give a score to see how secure the site is ■ Introduction to SSL ● Secure Sockets Layer (SSL) provides end-to-end security between client and server ● authentication of both parties is done using digital certificates ● privacy is maintained using encryption • ● message integrity is accomplished using message digests ● SSL for HTTP is referred to as HTTPS and operates on port 443 Web Server Performance ○ Popular platforms ■ Selecting a Web Platform ● ● ● ● ● ■ ■ ■ ■ Capacity – what capacity is needed from the server, databases, applications Cost/investment – what are the initial costs and the continuing costs? Maintenance – who will perform it; how complex Security – a strategy is needed Development support – are there staff to support application development ● Popular platforms ● Microsoft ○ Available on cloud ● Linux ○ Customized by the cloud…gcp, aws..their version of linux ○ redhat ○ Available on cloud ○ opensource ○ Oracle, mysql ○ Java servlets ● UNIX ○ Oracle solaris ○ Oracle weblogic ○ Financial transaction Estimate server performance requirement ● What is the time required to deliver a request to the server? ● What is the time required to obtain the result? ● What is the time to deliver the result? ● E.g., 120 clients connect twice each minute implies 240 connections per minute or 4 per second. If each client sends 1Kbyte of data and receives 15Kbytes back, then the server needs to support 64Kbytes per second or 512 Kbitsps or roughly .5megabits per second. ● General rule: the link should have at least twice the bandwidth as the average above Web server farms the way you are ● Multiple server machines and load balancing hardware that distributes web requests across the servers ● Hot standby: inset of a table…the hot server the one that is live and copies to another table..table that is ready ● if storage is shared across all servers, then there is a single point of failure Why is Load Balancing is needed? ● DNS redirection is good solution to roundrobin(send clients to next server…some servers will be under/over utilizied) ○ ● This form of load balancing (DNS Redirection) has problems because ■ – web browsers will cache the IP address for a given domain ■ – some operating systems cache IP addresses for given domains ○ However, some DNS servers use algorithms other than round robin, e.g. ■ – load-balancing: they check the load on many web servers and send the request to the least loaded ■ – proximity-routing: they send the request to the nearest server, when the servers are geographically distributed ■ – fault-masking: check for down web servers and avoid them ● Load balancing hardware exists to prevent requests going to servers that have failed ○ Web Server Farms ○ Load Balancing ■ • Switches ■ • DNS redirection Web Server as a proxy Server ○ The more traffic, the more RAM is needed by APache..if you don’t have memory then everything goes slow. ○ More connections means more traffic…how many http request can you respond per second…apache ability to respond to request goes down as there are more connections….apache is unable to support high traffic ○ NginX is used by more in the last few years… because its better…doesnt have high memory usage when there is more connections… and be able to respond to requests as more connections ○ Lighttpd..is second to nginx ○ Apache is just terrible ○ Need speed use nginx ○ Improving apache web server performance ■ Additional RAM is the only way…costly ■ Direct modules can help..embedded within binary ■ Use NginX as the reverse proxy…use apache as app server (tier-2)…route traffic to to proxy instead of actual application server ○ Proxy Server - An intermediary server that accepts requests from clients and either forwards them or services the request from its own cache. ■ ​A proxy server acts as a server to the client that makes a request, and it acts as a client to the servers it connects to ■ A proxy server can monitor all client requests to other servers ■ – On client-side, a called a “forward proxy” ● ● ○ Use proxy server on the client side… Why use a forward proxy server: ○ Runs on client side ○ Prevent access to restricted sites..blacklisting ○ Control access to a restricted site.. Proxy server can request name/password ○ • to improve performance by maintaining a cache ○ to enhance security by controlling which application-level protocols are permitted ○ Act as an anonymizer..removing some headers and leaving only what is needed…dont tell anything to the server side. removing identifying information from HTTP messages Caching ■ Get something from cache or server side ■ Through the ■ ■ ■ ■ ■ ■ ■ ■ Validation is used by servers and caches to communicate when an object has changed. ● – caches avoid having to download the entire object when they already have a copy locally, but they're not sure if it's still fresh. • The most common validator is the Last-Modified time. HTTP 1.1 introduced a new kind of validator called the ETag. ● – ETags are unique identifiers that are generated by the server and changed every time the object does. • Almost all caches use Last-Modified times and E-Tags in determining if an object is fresh. • Most modern Web servers will generate both ETag and Last-Modified validators for static content automatically Last modified..header used by server If modified since …header used by client side ● ■ ■ HTTP Headers ● HTTP headers give you a lot of control over how both browser caches and proxies handle your objects. ○ – They can't be seen in the HTML and are usually automatically generated by the Web server. However, you can control them to some degree, depending on the server you use. ● • HTTP headers are sent by the server in front of the HTML, and only seen by the browser and any intermediate caches. Lecture 15: Web Services and REST Notes ● Web Services is the idea of offering the capabilities/information on a web site via a programming interface, so application programs can more readily access the information on the site ● Web Services are APIs for accessing a website’s information across the Internet ● Big Web services uses a level of complex APIs…SOAP(Simple Object Access Protocol) based on XML and definitions …what companies need XML security and XML encryptions in their transactions? Financial companies…anything that involves money need to be protected…xml security and encryption will do that. ● ● ● ● ● Implementation of web services is divided in 3 categories: ○ Big web services ○ REST(Representational State Transfer) Services which use HTTP methods PUT, GET, POST and DELETE. ..server to client communication not server to server ○ Cloud services s which provide cloud storage, application hosting, content delivery, and other hosting services • All three types of Web Services provide access through APIs. REST Services ○ • Many web sites are now offering their facilities through REST Web Services ○ Access is provided using one or both of these methods: ■ – Direct URL, returning a response in one or more formats (XML, JSON, PHP) ■ – Library-based APIs, embedded in JavaScript, Java, C#, Objective-C and other source and binary library formats ○ Many of these services now require or include OAuth user authentication ■ – Oauth is a standard for clients to access server resources on behalf of a resource owner ■ Better to use library based APIs to do the authentication for you ○ Free up to a point….there is a limit for the free number of calls per day…if your site becomes popular…then the services will not be free Cloud Services ○ Application hosting…GCP, Azure, AWS ○ Backup and storage..use cloud for backup ○ Content Delivery…netflix is using AWS ○ Ecommerce - amazon ○ Media hosting ○ DNS Protection services (Cloudflare)...DDOS attacks ○ Access is provided using one or both of these methods: ■ – Dashboard ■ – Library-based APIs, embedded in Java, C#, Objective-C and other binary library formats ○ All these services are commercial services that require monthly payments ○ The consumer cloud services provide limited, free basic storage REST (Representational State Transfer) ○ REST is a style of software architecture for distributed hypermedia systems ■ – Initially proposed by Roy Fielding in a 2000 doctoral dissertation (remember which RFC he was involved with? The HTTP specification. With Tim Berners Lee) ● He co-founded the Apache HTTP Project. ● The world wide web is an example of REST ○ ● ● There are three fundamental aspects of the REST Design Pattern ■ – 1. client, 2. servers and 3. resources ■ – Resources are typically represented as documents ■ – Systems that follow Fielding's REST principles are often referred to as RESTful; ● Every entity is a resource…the name after the / ● Urls uniquely identify the resource ● Simple operations (put, get, post, delete) that invoke the operations you can do on the resource REST vs Other Approaches ○ REST ■ – Software architectural style for distributed hypermedia systems like WWW ■ – Quickly gained popularity through its simplicity ■ Became the norm bc its simple ○ SOAP ■ – Protocol for exchanging XML-based message, normally using HTTP ■ – Much more robust way to make requests, but more robust than most APIs need ■ – More complicated to use ● https://www.w3schools.com/xml/xml_soap.asp ■ It is very complex…requires libraries on both ends ○ • XML-RPC….remote procedure call ■ – RPC protocol with XML as an encoding and HTTP as a transport ■ – More complex than REST but much simpler than SOAP ■ – Supported by Python: ● • https://docs.python.org/3/library/xmlrpc.html ■ This is more of the middle…not as complex as soap but not as simple as REST ■ Running a remote function on server machine ○ • JSON-RPC ■ – RPC protocol encoded in JSON instead of XML ■ – Very simple protocol (and very similar to XML-RPC) REST as Lightweight Web Services ○ Much like Web services, a REST service is: ■ Totally platform independent..you dont care if server is unix or if the client is a mac or anything else ■ Language-independent (C# can talk to Java, etc) ● Standards-based (runs on top of http) ● – Can be used in the presence of firewalls (port 80/443 always open) ○ ● ● ● ● Like Web Services, REST offers no built-in security features, encryption, session management, QoS guarantees, etc. But also as with Web Services, these can be added by building on top of HTTP: ■ – For security, username/password tokens are often used. ■ – For encryption, REST can be used on top of HTTPS (secure sockets). ○ Stateless: Each HTTP request from a client to server must contain all the information needed to understand and complete the request. The server does not store any state about the client session on the server side. More complex REST requests ○ REST can easily handle more complex requests, including multiple parameters. ○ All types of HTTP requests: GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS ○ Rarely used: LINK, UNLINK, PURGE ○ As a rule, ○ 1. GET requests should be for read-only queries; they should not change the state of the server and its data, List Items, for example ○ 2. For creation, updating, use POST requests. POST can also be used for readonly queries, as noted above, when complex params are required.’ ○ 3. PUT, DELETE are also used for updating and deleting items. Amazon Associates web services ○ Amazon offers web services to 3 types of users: ■ – Associates: third-party site owners wishing to build more effective sponsored affiliate links to Amazon products, thus increasing their referral fees ■ – Vendors: sellers on the Amazon platform looking to manage inventory and receive batch product data feeds ■ – Developers: third-party developers building Amazon-driven functionality into their applications ○ Developers can build businesses by creating Web sites and Web applications that use Amazon products, charging and delivery mechanisms Apple Icloud for developers ○ Apple’s iCloud service places all information captured on any Apple device into the cloud, making it immediately available to all other Apple devices ○ 5gb for free REST Best Practices ○ . Provide a URI for each resource that you want exposed. ○ Try not use name value pairs….”id=xxx”...use planes/747 ○ As a corollary to (2) use nouns in the logical URI, not verbs. Resources are "things“ not "actions" ■ Use Nouns not verbs ○ ○ ○ ○ . Make all HTTP GETs side-effect free. The actions are the http actions…. Minimize the use of query strings . For example, prefer http://www.parts-depot.com/parts/00345 Over http://www.parts-depot.com/parts?part-id=00345 Always implement a service using HTTP GET when the purpose of the service is to allow a client to retrieve a resource representation, i.e., don’t use HTTP POST ■ Make sure GET are read only ■ POST is used to add stuff Lecture 16: Ajax Notes ● ChatGPT ○ AJAX, which stands for Asynchronous JavaScript and XML, is a technique used in web development to create interactive and dynamic web applications. ○ AJAX is not a programming language or a tool, but a concept in web development that involves the use of several existing technologies together, including HTML/CSS, JavaScript, and XML. It allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. ○ AJAX allows web applications to send and retrieve data from a server asynchronously, without interfering with the display and behavior of the existing page. ○ ○ Purpose of AJAX: ■ Improve User Experience: AJAX enhances the user experience by updating web pages seamlessly without the need to reload the entire page. ■ Reduce Server Load and Bandwidth: Since only parts of a web page are updated, there is less data traffic between the client and the server, which reduces server load and bandwidth usage. ■ Increase Web Application Speed: AJAX can make web applications feel faster and more responsive to user actions since less data is processed and transferred. ■ Real-time Data Update: AJAX allows for real-time data updates on web pages, which is crucial for applications like chat boxes, live feeds, and real-time data visualization. Properties of AJAX: ■ Asynchronous Requests: AJAX allows the browser to send and receive data from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. ■ Use of XMLHttpRequest Object: AJAX typically uses the XMLHttpRequest object to request data from a server. ■ ■ ■ ■ ■ ● ● ● ● ● ● ● ● ● Support for Various Data Formats: While it originally stood for Asynchronous JavaScript and XML, AJAX can work with other data formats including JSON, HTML, and plain text. JavaScript and DOM Manipulation: AJAX relies heavily on JavaScript to dynamically display and interact with the information fetched from the server. The DOM (Document Object Model) can be updated in response to user interactions without page reloads. Compatibility with Modern Web Technologies: AJAX can be used in conjunction with other web technologies like PHP, ASP.NET, and APIs to fetch data. Cross-Browser Support: Modern browsers support AJAX, though the implementation details may vary. Security: As with any client-server communication, AJAX must be implemented with security considerations in mind to protect data integrity and prevent unauthorized access. ■ MS Windows will be reduced to a poorly debugged set of device drivers running under Netscape Navigator, with desktop-style applications running inside the browser". This did not happen until 10 years later (true/false?) ○ Chromebook was released 2012 Ajax (Asynchronous Javascript + XML) is several technologies in one ○ CSS, XHTML, DOM, XMLHTTPRequest, XML/JSON, Javascript Invented by Jesse James garrett in 2005 In summary, AJAX is a technique that allows web developers to build more dynamic and responsive web applications by making asynchronous requests to servers and updating web page content without requiring a full page reload. XMLHTTPRequest object is the main element ajax programming Microsoft IE 5 was the first Ajax-enabled browser Google Maps implements Ajax behind the scenes Characteristics of Ajax App ○ They are apps/applications not web sites(sites=multiple pages) ○ Allow for smooth, continuous interaction…never see an hourglass ○ “Live” content…data is effective immediate ○ Visual effects and animations/dynamic icons…google maps little guy animation ○ New widgets(selectors, buttons, tabs, lists) ○ Key shortcuts Comparing traditional vs Ajax websites ○ Traditional ■ Interface construction is mainly responsibility of the server ■ User interaction is via form submission ■ Entire page is required for each interaction(bandwith) ■ Application is unavailable while an interaction is processing(browser is blocked…need to wait until server returns what it needs to return) ○ ● ● ● ● ● ● Ajax ■ interface is manipulated by client-side JavaScript manipulations of the Document Object Model(DOM ■ Interaction via http requests occur behind the scenes ■ Communication can be restricted to data only ■ Application is always responsive How to recognize ajax ○ Iframe, ○ jQuery Ajax functions (as jQuery.ajax()) ○ • fetch() ○ Javascript code that invokes:– XMLHttpRequest Ajax introduces an intermediary — an Ajax engine — between the user and the server. ○ Ajax Engine handles: simple data validation, editing data in memory, and navigation Instead of loading a webpage, at the start of the session, the browser loads an Ajax engine — written in JavaScript and usually stored in a hidden frame. In a traditional classic web app model, the browser is locked up when server is processing XMLHttpRequest Object ○ When readyState (property) is complete and status(property) is 200 ok ○ Then you can get the data vis responseXML and responseText ■ JSON is responseText but we need to eval(responseText) ● Eval is not good so we need to do json.parse(responseText) ○ Red is what you need and important..yellow is discarded ■ ■ ■ ● ● In that if statement Security Issues ○ When the XMLHttpRequest object operates within a browser, it adopts the same-domain security policies of typical JavaScript activity (sharing the same "sandbox," as it were). ○ First, on most browsers supporting this functionality, the page that bears scripts accessing the object needs to be retrieved via http: protocol, meaning that you won't be able to test the pages from a local hard disk (file: protocol) without some extra security issues cropping up, especially in Mozilla and IE on Windows. ○ Second, the domain of the URL request destination must be the same as the one that serves up the page containing the script. This means, unfortunately, that client-side scripts cannot fetch web service data from other sources and blend that data into a page. Everything must come from the same domain. Alternative: Fetch api ○ Provides CORS ○ You can use fetch easily for REST calls (put, get, post, delete) ● ○ Is now included in all the browsers CORS was created bc ○ ○ The browser automatically issues the origin header to the domain you are trying to go to…but doesnt mean success just yet…if server doesnt allow the CORs request (doesnt have Access-Control-Allow-Origin), the browser will deliver an error…you will get a false return!! XHR fails…not all services supports CORs CHATGPT: you can use both XMLHttpRequest and the Fetch API for Cross-Origin Resource Sharing (CORS). CORS is a mechanism that allows many resources (e.g., fonts, JavaScript, etc.) on a web page to be requested from another domain outside the domain from which the resource originated. 1: XMLHttpRequest and CORS: To make a cross-origin request using XMLHttpRequest, you don't need to do anything special. The browser automatically handles the CORS protocol. When you make a request to a different domain using XMLHttpRequest, the browser adds an Origin header to the request. The server at this other domain can then decide whether to allow or deny the request based on this Origin. If the server allows the request, it will respond with appropriate CORS headers (Access-Control-Allow-Origin) indicating which origins are permitted. 2: Fetch API and CORS: Similar to XMLHttpRequest, the Fetch API also supports CORS and is handled in much the same way. When using the Fetch API to make a request to a different origin, the browser also adds the Origin header, and the server responds with CORS headers if it permits the request. The Fetch API provides a more modern, promise-based approach to making asynchronous requests and is generally preferred over XMLHttpRequest for new development. It's important to note that CORS is enforced by the web browser. If a server doesn't include the appropriate CORS headers in its response, the browser will block the response from being accessed by your JavaScript code. This is a security measure to prevent malicious websites from reading sensitive data from other sites. In summary, both XMLHttpRequest and Fetch API can be used for making cross-origin requests, and the handling of CORS is primarily the responsibility of the server to which the request is made. Lecture 17: Responsive Website Design Notes ● The Need - Mobile Growth ○ Requires the design team to focus on the most important content, data, and functions. ○ There is no space in a 320 by 480-pixel screen (the original 2007 iPhone) for extraneous, unnecessary elements ○ 70% of users are on mobile devices ○ Mobile Devices Offer: ■ Use of geo-location to optimize the experience. ■ Require Switch layouts depending on the way they're held. ■ Need to support rich, multi-touch interfaces ● input devices that recognize two or more simultaneous touches ○ e.g., two finger tap, two finger scroll, pinch, zoom ● some devices also recognize differences in pressure and temperature (i.e., Apple Watch) ○ Design for the Mobile Web: ■ Create an alternative site…. .mobi site ● 2005 they approved .mobi ● <.01 you can buy a .mobi domain but itll cost you nothing nc no one will be on there ■ Using subdomains… mobile.mycompany.com ■ ● ● ● SELECTED METHOD: Use responsive design techniques ..Configure your current website for mobile display using Responsive Web Design (RWD) techniques ○ Reason for not using mobile.mycompany.com websites: ■ Redirects can hinder/annoy search engines ■ 2. Redirects take lots of time ■ 3. If you offer a mobile.website for iPhone, what about for iPad, ■ Android, etc. ■ 4. Sharing a mobile.website will not work for people on laptops, as they ■ will end up with a site designed for a small screen ■ 5. Philosophical: every web resource should live at one URL! What is Responsive Web Design ○ RWD: ■ concept of developing a website in a way that allows the layout to automatically adjust according to the user’s screen resolution (called its viewport). ■ The viewport meta tag lets you set the width and initial scale of the viewport. ■ For example ● <meta name=“viewport” content=“width=590”> ■ The term "Responsive Web Design" was coined by Ethan Marcotte in an article on May 25, 2010. ○ How to Design Responsively ○ A site designed with RWD adapts the layout to the viewing environment by using ■ 1. fluid, proportion-based grids, ● No pixel based… everything is by percentages ■ 2. flexible/scalable images, and ■ 3. CSS3 media queries (you provide different CSS based upon the viewport size). ○ Major Technology Features ○ – media queries ■ A media query consists of a media type (screen) and the actual query enclosed within parentheses, containing a particular media feature (max-devicewidth) to inspect, followed by the target value (480px). The query can be zero or more expressions that check for the conditions of particular media features ■ Example: @media (min-width:500px) { … } ■ @media only screen and (max-width: 600px) { ● /* Styles for mobile phones */} ■ @media only screen and (min-width: 601px) and (max-width: 1024px) { ■ ● /* Styles for tablets */} @media only screen and (min-width: 1025px) { ● /* Styles for laptops/desktops */} ■ ■ ○ • Many older browsers do not support media queries; ● • css3-mediaqueries.js is not recommended library to use ■ Hiding Content on Smaller Screens ● advisable to hide content on the mobile device that would otherwise be visible on the desktop ○ – this is done so users with small screens can avoid long scrolls ○ – the usual way to handle this is to provide a link to "additional content" ● Display: none [1] vs visibility:hidden [2] ○ [1] takes it out completely as if it doesnt exist….it is better [2] still keeps the white space and shows something was there…. Display:none is better – fluid grids ■ Creating Fluid Grids ● In “adaptive grids”, we define pixel-based dimensions. ○ Hence, we have to adjust the widths and heights manually for certain device viewports. ○ Based on pixels ● • In “fluid grids” we define relative-based dimensions. ○ ○ ○ – Since fluid grids flow naturally within the dimensions of its parent container, limited adjustments will be needed for various screen sizes and devices. Based on percentages So, whenever the device or screen size is changed, elements will adjust their widths and heights by the specified proportions to its parent container. ○ ● Convert pixel to percentage…child pixel/parent pixel or target/context ○ – scalable images ■ To avoid having an image deformed due to the screen size one should avoid specific definitions of width and height and instead use CSS’s max-width property setting it to 100%: ● Img{max-width: 100%} ● If have xl.css, medium.css, small.css files what is different/same ○ IDs and Class name would be common ○ What changes is whats in the curly brackets… ○ Change the content in each ID and each class ● Bootstrap ○ Bootstrap is a powerful front-end framework for faster and easier responsive web development ○ • Bootstrap responsive features make your web pages to appear more appropriately on different devices and screen resolutions without any change in markup ○ Bootstrap 3 provides 4-grid tier : xs, sm, md, lg ○ BS 4 - 5 grid tier ○ BS 5 - 6grid tier : (xs, sm, md, lg, xl, xxl) Lecture 18: JavaScript Frameworks Notes ● CHATGPT notes ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ● JavaScript Runtime: Node.js is not a programming language or a framework; it's a runtime environment that allows you to run JavaScript on the server side. Built on V8 Engine: Node.js is built on Chrome's V8 JavaScript engine, which compiles JavaScript directly to native machine code, allowing for efficient performance. Event-Driven and Asynchronous: Node.js operates on a single-threaded, non-blocking, event-driven architecture, making it efficient for handling concurrent requests without creating multiple threads. NPM (Node Package Manager): Node.js comes with a package manager called NPM, which has a vast repository of libraries and tools. This makes it easy to import and use third-party modules in your Node.js applications. Full-Stack JavaScript: With Node.js, developers can write both the client and server parts of a web application in JavaScript. This is a significant advantage for those who want to specialize in JavaScript. Built for Scalability: Its event-driven architecture makes Node.js a good fit for building scalable network applications, particularly those requiring a lot of concurrent connections (like chat apps or real-time tracking systems). Cross-Platform: Node.js is cross-platform, meaning it can run on various operating systems like Windows, Linux, Unix, Mac OS X, etc. Use Cases: It's widely used for developing web applications, especially backend services like APIs, but it's also suitable for building real-time applications, IoT applications, streaming applications, and more. Performance: While Node.js is known for its high performance in handling asynchronous operations, it might not be the best choice for CPU-intensive operations. Microservices: Node.js is often used in microservices architectures due to its lightweight nature and quick startup time. ○ NodeJs ○ The main purpose of nodejs is building web servers using javascript ○ 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. ○ Node.js allows the creation of Web servers and networking tools using JavaScript and a collection of "modules" that handle various core functionality. ○ Modules handle file system I/O, networking (DNS, HTTP, TCP, TLS/SSL, or UDP), binary data (buffers), cryptography functions, data streams and other core functions. ○ Basic Functionality ■ HTTP ● • To use the HTTP server and client one must require('http'). ■ ■ ● ● File System ● File I/O is provided by simple wrappers around standard POSIX functions. To use this module do require('fs'). All the methods have asynchronous and synchronous forms.. ● Buffer ● The Buffer class is a global within Node.js, making it unlikely that one would need to ever use require('buffer'). Angular ○ AngularJS is a complete JavaScript-based open-source front-end web application framework. ○ It is mainly maintained by Google and some community of individuals. ○ It provides a framework for client-side model–view–controller (MVC) and model– view–viewmodel (MVVM) architectures. ○ AngularJS is the frontend part of the MEAN stack, consisting of MongoDB database, Express.js web application server framework, Angular.js itself, and Node.js runtime environment. ○ Why Angular.js? ■ HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. ■ ​root problem is that HTML was not designed for dynamic views. ■ Single Page Applications (SPAs): Angular was developed with the vision of creating more efficient and smoother experiences for SPAs, where a single HTML page is dynamically updated as the user interacts with the app, rather than loading new pages from the server. ○ Basic Functionality ■ Control of the App ● Data Binding: Data-binding is an automatic way of updating the view whenever the model changes, as well as updating the ○ ○ model whenever the view changes. This is awesome because it eliminates DOM manipulation from the list of things you have to worry about. ● Controller: Controllers are the behavior behind the DOM elements. ■ Wire up a Backend ● Form validation: Client-side form validation is an important part of great user experience. AngularJS lets you declare the validation rules of the form without having to write JavaScript code. ● Server Communication: AngularJS provides built-in services on top of XHR (XMLHttpRequest) as well as various other backends using third party libraries. ■ Create Components ● Directives: Directives is a unique and powerful feature available only in Angular. Directives let you invent new HTML syntax, specific to your application ● Reusable Components: We use directives to create reusable components. A component allows you to hide complex DOM structure, CSS, and behavior. This lets you focus either on what the application does or how the application looks separately. ● Localization: Angular's locale aware filters and stemming directives give you building blocks to make your application available in all locales. Goals of AngularJS: ■ – It decouples DOM manipulation from application logic ■ It decouple the client side of an application from the server side ■ Provides structure for building an application: ● Designing the UI ● Writing the business logic ● Testing ■ Angular JS framework adapts and extends traditional HTML. ■ It supports dynamic content through two-way data-binding. ■ Two-way data-binding allows for the automatic synchronization of models and views. Angular 2+ ■ Angular 2+ stands for the Angular 2 and later, including Angular 2,4,5,6,7 and 8. ■ Angular 2+ is a ground-up rewrite. ○ ■ Typescript ■ Open-source programming language developed and maintained by Microsoft ■ Syntactical superset of JavaScrip Here's how Angular uses AJAX: ​ ​ HttpClient Module: Angular's HttpClient is a modernized version of the older $http service from AngularJS. It provides a more powerful, flexible API for making HTTP requests. Asynchronous Operations: Angular uses RxJS (Reactive Extensions for JavaScript) observables to handle asynchronous operations. When you make an HTTP request with HttpClient, it returns an observable. This observable will emit the data from the response when it arrives, allowing the application to handle it asynchronously. ○ Lecture 19: jQuery Notes ● What is JQuery? ○ A framework for client-side JavaScript. ■ An alternative to common javascript tasks ○ It simplifies ■ – HTML document traversing ■ – Event Handling ■ – Animating ■ – AJAX interactions ● What is available with JQuery? ○ Cross browser support and detection ○ Ajax functions ○ CSS Functions ○ DOM Manipulation ○ DOM Transversal ● ● ● ○ Attribute manipulation ○ Event detection and handling ○ JS animation Instead of: var myButton = document.getElementById("myButton"); ○ JQuery it is: $("#myButton"); Selecting all form elements of a certain type: $(‘:text’) It selects all text fields. Use with :input ( all form elements), :password, :radio, :checkbox, :submit, :image, :reset, :button, :file, :hidden ● ○ ○ ○ ○ ○ 1: $( "input[name*='man']" ).val( "has man in it!" ); 2:$( "input[name~='man']" ).val( "mr. man is in it!" ); …only one has exactly “man” 3: $( "input[name$='letter']" ).val( "a letter" );..ends with letter 4:exact equal jQuery( "[attribute^='value']" )....$( "input[name^='news']" ).val( "news here!" ); ■ Starts with news..Finds all inputs with an attribute name that starts with 'news' and puts text in them. ■ ● ● https://api.jquery.com/category/selectors/ ● ● Is JQuery Worth it? ○ ● FInal Notes ○ Allow you to write Javascript differently…Write less, do more ○ Remember: jQuery is just JavaScript ■ What you can do with jQuery, you can always do without jQuery but with more code. Lecture 20: High Performance Websites Notes ● A study of popular web pages and the time to download them showed that the vast majority of time is spent on the client side; this is true even if the page is cached! ● 80-90% of the end user response time is spent on the front-end ■ Greater potential for improvement ■ Simpler to optimize ● ● ○ ○ ○ ● ● 80/20 performance rule: 20% that affects 80% of the user experience is what you need to optimize……Focus on the 20% that affects 80% of the end-user response time..start at the front end An “empty cache” means the browser bypasses the disk cache and has to request all the components to load the page ■ Empty cache: go into your browser and clear cache A “full cache” means all (or at least most) of the components are found in the disk cache and the corresponding HTTP requests are avoided ■ Full cache: refresh the page Expires: Tue, 1 Mar 2022 20:00:00 GMT (an earlier date than today) Last-Modified: Tue, 22 Mar 2022 12:30:00 GMT (today’s date ■ The Expires makes sure the page is not cached; the Last-Modified makes sure the server will have to check if blank.gif has changed ● set Expires date appropriately an earlier date or none removes the cookie sooner Requests from a browser will produce one of these response status codes: ■ – 200 – the server is sending back the image implying the browser does not have the image in its cache ■ – 304 – the browser has the image in its cache, and the server responds saying it has not been modified ■ Akamai is the largest cdn providers The Initial 14 Rules - to optimize site ■ 1. Make fewer HTTP requests ● To reduce the number of HTTP requests: Combine scripts, Combine style sheets, Combine images into an image map, Combine images using “sprites” ○ An image sprite is a collection of images put into a single image • Using images sprites reduces the number of server requests and saves bandwidth ■ 2. Use a CDN (content distribution network) ● Content Distribution Networks have servers around the world • They distribute your content so downloads can come from a nearby location ■ 3. Add an Expires header ● All caches use a set of rules to determine whether to deliver an object from the cache or request a new version – If the object’s headers tell the cache not to keep the object, it won’t ○ ■ ■ ■ ■ ■ ■ ■ set Expires date appropriately an earlier date or none removes the cookie sooner ○ As part of HTTP protocol there is a Cache-Control header – Cache-Control is an alternative to Expires – When cache-control: max-age is present, the response is stale if its current age is greater than the age value given (in seconds) at the time of a new request for the resource 4. Gzip components…number 1 way to optimize site ● Compress everything ● Img and pdf should not be compressed bc jpeg and png are compression algorithms…compressing something already compressed would result in something bigger…you also will lose some of the quality. ● Use server that supports compression ● Apache doesnt support compression..have to install module ● Scripts are huge! Gotta compress 5. Put stylesheets at the top ● Stylesheets block rendering in IE; IE will examine all stylesheets before starting to render, so its best to – Put stylesheets in the <head> ● Rule 5 doesnt matter bc IE is dead 6. Move scripts to the bottom ● • As the loading of JavaScript can cause the browser to stop rendering the page until the JavaScript is fully loaded, one can avoid the delay by moving scripts to the bottom 7. Avoid CSS expressions - skip 8. Make JS and CSS external ● Making JavaScript and CSS external implies more HTTP requests, but ○ – As HTML documents are not typically cached, so inlining JavaScript code will cause the same bytes to be downloaded on every page view ○ – External JS and CSS can be cached 9. Reduce DNS lookups ● Rule 9: every domain referred on a page..is dns lookup…so limit that ● As a general rule it is best to reduce the number of unique hostnames used in a web page 10. Minify JS - 2nd best way to optimize ● shorten variable and function names…2nd best way to optimize…write ur program in non minify version, then put in a minifier, then deploy it in minify version…also make it difficult to reverse engineer your code… JSMin is a minifier u can use ● ● Minification, or minify, is the process of removing all unnecessary characters from source code, without changing its functionality ■ 11. Avoid redirects ● redirects are bad idea bc u get seconds of delay….search 301 and 302 in logs find them redirects then remove them ■ 12. Remove duplicate scripts ● remove duplicate scripts…if named differently, browser wont search into the file, ● – Extra executions ■ 13. Configure Etags ● Etags are used by clients and servers to verify that a cached resource is valid ● – To check that the resource (image, script, stylesheet, etc.) in the browser’s cache matches the one on the server ● – If there is a match, the server returns a 304 ■ 14. Make AJAX cacheable and small ● The URL of an AJAX request is included inside the HTML; as it is not bookmarked or linked to, the requesting page can be cached by the browser Updated yahoo Best Prax (2011) ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 1.Flush the buffer early 2.Use GET for AJAX requests 3.Post-load components 4.Preload Components 5.Reduce the number of DOM Elements 6.Split Components Across Domains 7.Minimize the number of iframes 8.No 404s 9.Reduce cookie size 10.Use cookie-free domains for components ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 11.Minimize DOM access 12.Develop smart event handlers 13.Avoid filters 14.Optimize images 15.Optimize CSS sprites 16.Don’t scale images in html 17.Make favicon.ico small and cacheable 18.Keep components under 25K 19.Pack components into a multipart document 20.Avoid Empty image src New Rules(2011) ● • Avoid empty src or href ● • Use GET for AJAX requests ● • Reduce the number of DOM elements ● • Avoid HTTP 404 (Not Found) error ● • Reduce cookie size ○ set Expires date appropriately an earlier date or none removes the cookie sooner ● • Use cookie-free domains ● • Do not scale images in HTML ● • Make favicon small and cacheable Lecture 21: React Notes ● No code in exam for react and angular ● React developed in the first place…Why was it developed ○ Existing ones are heavy-weight Frameworks • ○ Need for a light-weight library • ○ Complexity of 2-way data binding • ○ Update to Real DOM is performance intensive • ○ Bad UX from using “cascading updates” of DOM tree ● What is ReactJs ○ Developed by Facebook. And still keeping control of react ○ ReactJS is an open-source JavaScript library which is used for building user interfaces specifically for single page applications. ○ React is a view layer library, not a framework like Backbone, Angular, etc. ○ You can’t use React to build a fully-functional web app. ● Who uses React? ○ Netflix, facebook, instagram, aws, uber, airbnb, ny times, dropbox, etc ○ React is more popular than Angular ● How does react tackle challenges? ○ Uses 1-way data binding (not 2-way like Angular) ○ Virtual DOM ( Efficient for frequent updates ) ○ Easy to understand what a component will render ○ JSX - Easy to mix HTML and JS ○ React dev tools and excellent community ○ Server-side rendering (useful for SEO) ● Core tenets of React ○ Introducing JSX ○ Components ■ Components are building blocks of React Application ■ Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. ■ A component is a function/class that produces HTML to render and handles user events ■ Functional/Stateless Components ● These are simple components that do not maintain their own state. ● Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen ■ Class/Stateful Components ● ○ Class components are ECMAScript 6 (ES6) classes that can maintain a state, independent existence and a lifecycle of its own. States and Props ■ State ● State is a JavaScript Object containing the component data. ● • It represents internal state of the component ● • Accessed via this.state ● • State must be initialized when component is created ● • State can only be updated using setState() method ● • setState() can only add or change the properties and never remove a property. ● • When a component’s state data changes, the rendered markup will be updated by re-invoking render() method of the class. ■ State vs Props ● State is referred to the local state of the component which cannot be accessed and modified outside of the component and can only be used & modified inside the component. ● • Props, on the other hand, make components reusable by giving components the ability to receive data from the parent component in the form of props. ● ○ Lifecycle ● ● ■ React-Bootstrap ○ React doesn't have responsive capabilities so use bootstrap ○ Replaces the Bootstrap JavaScript. ○ Each component has been built from scratch as a true React Component ○ Doesn’t need jquery..use npm install React Native ○ A framework for building native apps with React. ○ Build native apps that can be run on mobile apps using JS and React ○ 5 levels of calls ○ An embedded instance of JavaScriptCore. • React components with bindings to Native UI components. • Manipulating calls into Objective C & java for behavior. • And polyfills for some web APIs. ○ ■ There is no such thing as js engine inside android and inside ios ■ Every app needs to have a full js engine ■ There is no real sharing of js engine….each app has their js engine ○ React vs React Native ■ React (a.k.a. ReactJS or React.js) is is a JavaScript library you use for building dynamic, high performing, responsive UI for your web interfaces. ■ React Native is an entire platform allowing you to build native, cross-platform mobile apps. ■ React.js is the heart of React Native, and it embodies all React’s principles and syntax, so the learning curve is easy. ○ React Native - stylesheet ■ • React Native implements a strict subset of CSS. ● Startups use react native…just know javascript…html, css, ● Cheaper developer!! quicker…react is used by most startups…builds ios, android and web code React vs Angular React ​ ​ ​ ​ ​ ​ ​ Library vs. Framework: React is a JavaScript library developed by Facebook. It's mainly concerned with the view layer of the application. Component-Based Architecture: React is based on components, small, reusable pieces of code that control a part of the user interface. JSX: React uses JSX, a syntax extension for JavaScript, allowing developers to write HTML in React. Virtual DOM: React employs a virtual DOM to improve app performance. It updates the real DOM based on changes in the virtual DOM. State Management: React’s state management is handled through components' state and context API. For more complex scenarios, external libraries like Redux are often used. Unidirectional Data Flow: React follows a unidirectional data flow, making it easier to track and debug. Ecosystem Flexibility: React provides more flexibility in choosing additional libraries or tools for tasks like routing or state management. Angular ​ ​ ​ ​ ​ ​ ​ Framework: Angular is a full-fledged MVC (Model-View-Controller) framework developed by Google. It's more opinionated than React. TypeScript: Angular is built on TypeScript, offering more robust typing and object-oriented programming features. Two-Way Data Binding: Angular supports two-way data binding, synchronizing the model and the view. RxJS: Angular makes use of RxJS for handling asynchronous tasks and event handling. Dependency Injection: Angular has a built-in dependency injection mechanism, making it easier to manage services and components. Integrated Tooling: Angular provides a comprehensive set of tools and features like Angular CLI, routing solutions, forms handling, etc. Structured Framework: Angular is more structured and provides a lot of built-in functionality, which might reduce the need for additional libraries. Similarities ● ● ● ● Popularity: Both are popular in the industry with large communities and extensive resources. Component-Based: Both use a component-based architecture. SPA (Single Page Applications): Ideal for building SPAs. Performance: Focus on high performance for web applications. Differences ● ● ● ● Flexibility vs. Convention: React offers more flexibility but requires more decisions from the developer. Angular is more opinionated with a defined way of doing things. Language: React uses JavaScript (or TypeScript), while Angular is based on TypeScript. Learning Curve: Angular has a steeper learning curve due to its comprehensive nature, whereas React is simpler to pick up due to its focus on UI. Tooling and Ecosystem: Angular comes with more out-of-the-box solutions, whereas React relies more on the community for additional tools. In summary, the choice between React and Angular often depends on the specific needs of the project, the team's familiarity with either technology, and the project's scale and complexity. React offers more flexibility and is often favored for smaller, more lightweight applications, whereas Angular is more suited for large-scale applications requiring a more structured approach. ● Lecture 22: Mobile App Development (Android) Lecture 23: Mobile App Development (iOS) Lecture 24: Serverless Applications (AWS Lambda)/(GCP Functions) Notes ● Need for VMs ○ The Issue ■ Deployment of server applications is getting complicated since software can have many types of requirements. ○ The Solution ■ Run each individual application on a separate virtual machine. (One on NodeJS VM, one on PHP VM, one on Java VM) ○ Virtualization ■ Offers a hardware abstraction layer that can adjust to the specific CPU, memory, storage and network needs of applications on a per server basis. ■ ● While VMs virtualize the hardware, containers virtualize the operating system. This means that containers are more about running the application and its dependencies, while VMs are about running full-fledged operating systems. ○ Vms allowed multiple operating systems to run concurrently on a single physical machine, which was revolutionary because it provided a way to isolate different computing tasks and applications from each other, thus improving the utilization of expensive mainframe hardware. ○ They became a way to maximize server utilization, allowing one server to do the job of multiple servers by sharing its resources across multiple environments. VMs are expensive ○ The Problems with Virtual machines ■ Money – You need to predict the instance size you need. You are charged for every CPU cycle, even when the system is “running its thumbs” ■ Time – Many operations related to virtual machines are typically slow ● VMs can take a significant amount of time to start because they need to boot up the entire operating system. ○ The Solution ■ Serverless Architectures ● No Server Management: With serverless architectures, developers do not need to manage servers or containers at all. The cloud provider dynamically manages the allocation of machine resources. ○ Feature 1: • No compute resource to manage ● Automatic Scaling: Serverless applications automatically scale with the number of requests, from a few requests a day to thousands per second. ○ Provisioning and scaling handled by the service itself ● Cost-Effectiveness: Serverless computing is often billed based on the exact amount of resources consumed by an application, down to the function call level, rather than on pre-purchased units of capacity. ● Event-driven and Instantaneous: Serverless architectures are naturally event-driven, only running code in response to events, which makes them highly efficient for workloads that are intermittent or sporadic. ● Developer Productivity: Developers can focus on writing code rather than managing and operating servers or runtime environments, accelerating the deployment cycle. ○ You write code and the execution environment is provided by the service ● ○ the best known vendor host of which currently is AWS Lambda(announced at re:invest 2014…first of its kind to completely abstracted the execution environment from the code) ● Feature 4: Core functionality (e.g., database, authentication and authorization) is provided by at-scale Web Services ■ Containers ● Efficient Resource Utilization: Containers share the host system’s kernel and only include the application and its dependencies. They are lighter and use fewer resources than VMs. ● Fast Start-up: Containers start almost instantly, allowing for quicker scaling up and down in response to demand. ● Portability: Containers encapsulate everything needed to run an application, so they can easily be moved between different environments, such as from development to production or from on-premises to cloud. ● Reduced Cost: Containers can lead to cost savings because they allow for higher density and utilization of underlying resources, reducing the number of servers needed. ● Key Features ○ Lightweight ■ All containers running on the same host share a single Linux kernel ■ Container images don’t require a full OS install like a virtual machine image ○ Portable ■ – Execution environment abstracts the underlying host from the container ■ – No dependency on a specific virtual machine technology ■ – Container images can be shared using GitHub-like repositories, such as Docker Hub (hub.docker.com) ○ Containers ■ Operating System Level virtualization, a lightweight approach to virtualization that only provides the bare minimum that an application requires to run and function as intended. ■ Containers were designed to provide a lightweight form of virtualization. The idea was to package applications and their dependencies into a single object that could be moved between environments—development, test, and production—without change. This solves the problem of software running on one environment but not another, often summarized as "it works on my machine". ■ ● ● ● ● Unlike VMs, containers don't require a full operating system for each instance. Instead, they share the host system's kernel and isolate the application processes from each other within the user space. This makes containers much more efficient, fast, and lightweight compared to VMs. Docker ○ Docker is 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 : Allows users to package an application with all its dependencies into a standardized unit for software development. ○ Unlike virtual machines, Containers