Angular Basics for Data Visualization - Introduction

Transcript

1. 99x.io
   Angular for Data
   Visualization
   +
   

   View Slide

2. Angular for Data Visualization
   Presenters
   Software Engineer, 99X
   NishanW@99x.io
   Software Engineer, 99X
   RashanL@99x.io
   Nishan Wickramarathna Rashan Liyanage
   

   View Slide

3. Web Servers
   

   View Slide

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.
   

   View Slide

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.
   

   View Slide

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.
   

   View Slide

7. Frontend Frameworks
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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:
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

14. Which utilizes these technologies
    Frontend Frameworks
    

    View Slide

15. Introduction to Angular
    

    View Slide

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
    

    View Slide

17. Advantages of single page application
    • Fast and responsive
    • Caching capabilities
    • Client-Side rendering
    • Easy debugging
    • Performance
    

    View Slide

18. Angular Component
    A component have 3 basic part
    • Html
    • Css file
    • Component file
    

    View Slide

19. Angular Communicate with back end
    • To communication with back end angular uses
    the concept of “services”
    

    View Slide

20. Angular Life Cycle Hooks
    

    View Slide

21. Introduction to APIs
    

    View Slide

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.
    

    View Slide

23. Introduction to API
    

    View Slide

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.
    

    View Slide

25. CRUD Operations
    

    View Slide

26. CRUD Operations
    

    View Slide

27. WEB SOCKET
    • WebSocket is an advanced technology that
    allows real-time interactive communication
    between the client browser and a server
    

    View Slide

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
    

    View Slide

29. Web sockets are good for..
    • Real-time applications
    • Chat apps
    • IoT (internet of things)
    • Online multiplayer games
    

    View Slide

30. Thank you
    99x.io
    

    View Slide

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
    

    View Slide