Angular Basics for Data Visualization - Introduction

Transcript

1. 99x.io Angular for Data Visualization +
2. Angular for Data Visualization Presenters Software Engineer, 99X NishanW@99x.io Software Engineer, 99X RashanL@99x.io Nishan Wickramarathna Rashan Liyanage
3. Web Servers
4. The term web server can refer to hardware or software, or both of them working together. What is a Web Server • On the hardware side, a web server is a computer that stores web server software and a website's component files. (for example, HTML documents, images, CSS stylesheets, and JavaScript files) A web server connects to the Internet and supports physical data interchange with other devices connected to the web. • On the software side, a web server includes several parts that control how web users access hosted files. At a minimum, this is an HTTP server. An HTTP server is software that understands URLs (web addresses) and HTTP (the protocol your browser uses to view webpages). An HTTP server can be accessed through the domain names of the websites it stores, and it delivers the content of these hosted websites to the end user's device.
5. Examples of web server uses Web servers often come as part of a larger package of internet- and intranet-related programs that are used for: • Sending and receiving emails; • Downloading requests for File Transfer Protocol (FTP) files; and • Building and publishing webpages.
6. Common and top web server software on the market • Apache HTTP Server. Developed by Apache Software Foundation, it is a free and open source web server for Windows, Mac OS X, Unix, Linux, Solaris and other operating systems; it needs the Apache license. • Microsoft Internet Information Services (IIS). Developed by Microsoft for Microsoft platforms; it is not open sourced, but widely used. • Nginx. A popular open source web server for administrators because of its light resource utilization and scalability. It can handle many concurrent sessions due to its event-driven architecture. Nginx also can be used as a proxy server and load balancer.
7. Frontend Frameworks
8. Node.js Introduction • Node.js is an open source server environment • Node.js is free • Node.js runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.) • Node.js uses JavaScript on the server • Node.js can generate dynamic page content • Node.js can create, open, read, write, delete, and close files on the server • Node.js can collect form data • Node.js can add, delete, modify data in your database
9. Webpack is a popular module bundler, a tool for bundling application source code in convenient chunks and for loading that code from a server into a browser. WebPack Introduction
10. JavaScript (also known as ECMAScript) started its life as a simple scripting language for browsers. At the time it was invented, it was expected to be used for short snippets of code embedded in a web page. we have a language that was designed for quick uses, and then grew to a full-fledged tool to write applications with millions of lines. Every language has its own quirks — oddities and surprises, and JavaScript’s humble beginning makes it have many of these. Some examples: Problem with JavaScript
11. Solution: TypeScript Detecting errors in code without running it is referred to as static checking. Determining what’s an error and what’s not based on the kinds of values being operated on is known as static type checking. TypeScript checks a program for errors before execution, and does so based on the kinds of values, it’s a static type checker. For example, the last example above has an error because of the type of obj. Here’s the error TypeScript found:
12. JSON - JavaScript Object Notation JavaScript Object Notation is an open standard file format, and data interchange format, that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and array data types.
13. SCSS/SASS - Syntactically Awesome Style Sheet Syntactically Awesome Style Sheet is the superset of CSS. SCSS is the more advanced version of CSS. Due to its advanced features it is often termed as Sassy CSS. SCSS have file extension of .scss.
14. Which utilizes these technologies Frontend Frameworks
15. Introduction to Angular
16. Introduction to Angular • Angular is a framework for building client application in HTML, CSS and TypeScript(that compiles to JavaScript) • Angular uses the concept of single page application
17. Advantages of single page application • Fast and responsive • Caching capabilities • Client-Side rendering • Easy debugging • Performance
18. Angular Component A component have 3 basic part • Html • Css file • Component file
19. Angular Communicate with back end • To communication with back end angular uses the concept of “services”
20. Angular Life Cycle Hooks
21. Introduction to APIs
22. Introduction to APIs • API stands for application programming interface. This is a concept in software technology that essentially refers to how multiple applications can interact with and obtain data from one another.
23. Introduction to API
24. REST (Representational State Transfer)API • A RESTful API is an architectural style for an application program interface (API) that uses HTTP requests to access and use data • That data can be used to GET, PUT, POST and DELETE data types, which refers to the reading, updating, creating and deleting of operations concerning resources.
25. CRUD Operations
26. CRUD Operations
27. WEB SOCKET • WebSocket is an advanced technology that allows real-time interactive communication between the client browser and a server
28. WEB SOCKETS • Web Sockets on the other hand don’t need you to send a request in order to respond. They allow bidirectional data flow so you just have to listen for any data • You can just listen to the server and it will send you a message when it’s available
29. Web sockets are good for.. • Real-time applications • Chat apps • IoT (internet of things) • Online multiplayer games
30. Thank you 99x.io
31. Resources • What is the difference between CSS and SCSS? • TypeScript for the New Programmer • COVID-19 LK History API • COVID-19 HPB API • Demo Project • JSON2Ts • Loading Animation Library