Workshop by Foster that helps students to get a glance on how javascript programming is done today in industry taking care of some important industry standards.

1. Javascript programming with Industry
Standards
Workshop

2. Register for Certificates

3. Our Journey
2014 - Android/IOS internship
2015 - Joined SS as Android / IOS developer
2016 - JS & Angular 2+
2017 - NodeJS & Blockchain and Won EY India
`Blockchain Hackathon`
2018-2021 - ReactJS, GoLang,
Team lead and PM
2022 - Sr. Application Architect

4. Index
1. Understand Web application
2. Why Javascript?
3. Javascript Fundamentals
4. Industry programming mindset
5. JS Programming as per Industry standards
6. Q&A

5. Understand Web application
What is Web Application?
● It is an application software that runs in a web browser, unlike software programs that run
locally and natively on the operating system of the device.
● These are delivered on the World Wide Web to users with an active network connection.
Some examples of Web Application?
● Amazon
● Flipkart
● Paytm
● CO-WIN
● And many more…..

6. CO-WIN: Self registration web app

7. CO-WIN: Department web app

8. High level web application architecture

9. High level web application architecture

10. High level web application architecture

11. Why Javascript?
● Front-end developer
(Angular, ReactJS)
● Back-end developer
(NodeJS)
● Mobile app developer
(ReactNative)
● Machine learning engineer
(Tensorflow.js)
● Web3 developer (Blockchain)
(Web3.js)

12. According to the Statista survey report, JavaScript is the
most used programming language among developers
worldwide, as of 2021.
Javascript Statistics

13. Javascript Fundamentals
● Let’s jump to VSCode editor

14. Industry programming mindset
While programming in software industry we :
● Think
○ End user
○ Collaborative Programmer
Outcome of above activity leads to following actions:
● Validating inputs
● Clean coding
● Optimization
● Analyse
○ Problem statement
○ Identify best approaches
○ Storage, Processing Power & Time consumption

15. Think
● Understand the problem/requirement thoroughly before jumping into problem.
● While developing a program always think from below 2 perspectives:
○ As an end user
■ If you are end user then what type of expectation you have & different ways you
would use the program/system
■ This thinking will help you cover most Scenarios.
○ As collaborative programmer
■ Your program must readable so that the other programmers can quickly
understand the implementation.
■ For that you can use meaningful name for the variables and functions used in
programs.
■ In some scenarios if giving meaningful names it not enough to simplify the
understanding then use comments wherever necessary to make it easier.
■ This thinking will help you design a proper Clean Code Structure.

16. Analyse
● Analyse following points before beginning with development:
○ Problem statement
■ Think of different test cases & note them down
■ Think of what needs to be taken into account when solving the problem
■ Clear out all the queries with leads or analyst
■ Conclude & agree on the points that should be covered in the implementation
○ Best approaches
■ Research & Brainstorm with team to identify different approaches that could be
used to solve this problem
■ Choose the best approach
○ Storage, Processing & Time consumption
■ Consumption of storage and processing power & time should as low as possible
with the implemented solution

17. Outcome: Input validation
Input Validation
● You must validate input variables for valid values otherwise your code can behave unexpectedly and
break it can also make debugging time consuming.
● Identify required & optional inputs and validate accordingly so the system always works as expected.

18. Outcome: Clean code
● Maintain uniform coding format
throughout your code
● Use proper indentation, spacing,
empty lines, semicolon etc.
● You can automate this using editor
extensions & packages.

19. Outcome: Clean Code - Naming Convention
● Choose descriptive and unambiguous names.
○ AVOID : let b; //available balance.
○ DO : let availableBalance;
● Use similar vocabulary for same type of functions.
○ AVOID : fetchValue() or getValue() or retrieveValue()
○ DO : fetchValue() // Use use the same concept through then
● Use pronounceable & searchable names.
○ AVOID : let genymdhms; // generation timestamp
○ DO : let generationTimeStamp;
● Replace magic numbers with named constants.
○ AVOID : let totalHours = days * 24
○ DO : const HOURS_PER_DAY = 24; let totalHours = days * HOURS_PER_DAY
● Avoid encodings. Don’t append prefixes or type information.
○ AVOID : let accountList; // Eg: Disinformation ; let nameString; // Eg: Encoding
○ DO : let accounts; let name;

20. Outcome: Optimization
What is Optimization?
● Removing of unnecessary code or refactoring it so that eats up less memory, processing power &
time.
What are some basic things you can do to optimize
your code?
● Remove unnecessary variables.
● Remove dead code.
● Remove duplicate code.

21. Outcome: Optimization
● Create reusable functions that do a single task. This will help to keep the code organized for easy
maintenance, debugging & testing. Also, the code readability will get increased to a greeter extent.
AVOID
DO

22. Outcome: Optimization
● Identify the right control flow statement to be used. Ex:
AVOID
DO

23. Outcome: Optimization
● Remove unnecessary iterations of loop.
AVOID
DO

24. Any Questions?

25. Scan for Feedback