Progressive web applications development workshop at Universiti Teknologi MARA (UiTM) Cawangan Perlis

1. PROGRESSIVE WEB
APPLICATIONS DEVELOPMENT
DR. KHAIRUL ANWAR SEDEK

2. INTRODUCTION
• The next big thing on the web, Progressive Web Applications, aims to combine
the features of mobile apps with the accessibility, discoverability, and ease
of use that have been the foundation of the modern Internet.

3. HTML CSS JAVASCRIPT DOM

4. INTRODUCTION REACT
• eact is a JavaScript library - one of the most
popular ones, with over 100,000 stars on GitHub.
• React is not a framework (unlike Angular, which is
more opinionated).
• React is an open-source project created by
Facebook.
• React is used to build user interfaces (UI) on the
front end.
• React is the view layer of an MVC application
(Model View Controller)
• One of the most important aspects of React is the
fact that you can create components, which are
like custom, reusable HTML elements, to quickly and
efficiently build user interfaces. React also
streamlines how data is stored and handled,
using state and props.
• https://www.taniarascia.com/getting-started-with-
react/

5. REACT HISTORY

6. HTML DOM • With the object model, JavaScript gets all the power it
needs to create dynamic HTML:
• JavaScript can change all the HTML elements in the
page
• JavaScript can change all the HTML attributes in the
page
• JavaScript can change all the CSS styles in the page
• JavaScript can remove existing HTML elements and
attributes
• JavaScript can add new HTML elements and attributes
• JavaScript can react to all existing HTML events in the
page
• JavaScript can create new HTML events in the page
https://www.w3schools.com/js/js_htmldom.asp

7. CREATE REACT APP
https://reactjs.org/docs/create-a-new-react-app.html#create-react-app

8. EASY START CREATING REACT APP
• https://medium.freecodecamp.org/learn-react-js-in-5-minutes-
526472d292f4

9. PROGRESSIVE WEB
APPLICATION

10. PROGRESS WEB
APP: HOW ITS
WORK
• http://webagility.com/posts/how-
progressive-web-apps-make-the-
web-great-again

11. BUILD A
REALTIME PWA
WITH REACT
• https://medium.com/front-end-
weekly/build-a-realtime-pwa-
with-react-99e7b0fd3270

12. PROGRESSIVE
WEB APPS: A
CRASH
COURSE
• https://www.sitepoint.com/progre
ssive-web-apps-a-crash-course/