Tweet
Tweet

Slide 1

Slide 1 text

Advanced JavaScript concepts you might need

Slide 2

Slide 2 text

HypeTech Tech education and shaping ideas into hype products hypetech.io | reactweek.dev Marko Arsić Founder and CEO @ HypeTech Founder of HypeTech Education Lecturer @ ReactWeek.dev Independent Tech Consultant Helping companies set up teams and standardize the development process github.com/marsicdev

Slide 3

Slide 3 text

JavaScript is a huge programming language. It runs on the client-side web browser platform where it powers HTML pages to be interactive, dynamic and responsive.

Slide 4

Slide 4 text

JavaScript has evolved enormously over the years into a sophisticated language, bundled with numerous advanced features.

Slide 5

Slide 5 text

Proposal Process (for those who aren’t familiar)

Slide 6

Slide 6 text

The process by which the JavaScript language evolves starts with “champions” (folks who want to add/change something in the language) drafting a proposal document for what they want to add/change

Slide 7

Slide 7 text

Generally these proposals are somewhat boring and are written in a very technical language almost without any formatting with lots of text just like this slide. Sometimes, any only sometimes they make nice slides and add emojis to help explain things. ✌👌💯

Slide 8

Slide 8 text

Chosen proposals will make their way through 5 stages

Slide 9

Slide 9 text

S0 - (Strawperson) Just an idea. Looking for initial feedback. S1 - (Proposal) Looking for initial feedback. Has a “champion(s)” S2 - (Draft) More formalized spec. Likely has a Babel plugin. S3 - (Candidate) Basically done. Getting feedback from real users. S4 - (Finished) Done and is ready for acceptance into the ECMAScript.

Slide 10

Slide 10 text

“Advanced” JavaScript 🤕

Slide 11

Slide 11 text

Promises Generators Iterators Symbols Buffers IntersectionObserver Delegation Recursion Blobs FileReader Abort Controller Geolocation API Storage API Crypto …

Slide 12

Slide 12 text

What are we going to cover here?

Slide 13

Slide 13 text

2 most practical topics Promises (chaining, canceling promises) Intro to Generators

Slide 14

Slide 14 text

Advanced Promises

Slide 15

Slide 15 text

JavaScript is a single-threaded programming language.

Slide 16

Slide 16 text

Depending on the runtime environment, the JavaScript engine offloads asynchronous processes, such as making network requests, file system access, and other time-consuming jobs, to some APIs to achieve asynchrony.

Slide 17

Slide 17 text

We expect the result of an asynchronous operation to succeed or fail. The process can also take more time than anticipated, or you may no longer need the results when you receive them.

Slide 18

Slide 18 text

It is logical to terminate an asynchronous operation that has taken more time than it should or whose result you don’t need.

Slide 19

Slide 19 text

AbortController was introduced to address the above problem. It is for aborting certain asynchronous operations natively.

Slide 20

Slide 20 text

You need to create an instance of the AbortController class

Slide 21

Slide 21 text

Generators

Slide 22

Slide 22 text

In JavaScript, yield is used to pause the execution of a function. When the function is invoked again, the execution continues from the last yield statement.

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

A function that yields values is a generator. A generator in JavaScript consists of a generator function, which returns an iterable Generator object.

Slide 25

Slide 25 text

Generators can maintain state, providing an efficient way to make iterators, and are capable of dealing with infinite data streams, which can be used to implement infinite scroll on the frontend of a web application, to operate on sound wave data, and more…

Slide 26

Slide 26 text

When used with Promises, generators can mimic the async/await functionality, which allows us to deal with asynchronous code in a more straightforward and readable manner.

Slide 27

Slide 27 text

A generator function is a function that returns a Generator object, and is defined by the function keyword followed by an asterisk (*)

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Summary

Slide 30

Slide 30 text

Ordinarily, an asynchronous processes may succeed, fail, take longer than anticipated, or you may not need the results when you receive them. Cancel your promises

Slide 31

Slide 31 text

Generators are processes that can halt and resume execution. They are a powerful, versatile feature of JavaScript, although they are not commonly used.

Slide 32

Slide 32 text

Q & A As everything good in life, knowledge is great only when shared https://discord.gg/94uhCAkFKf

Slide 33

Slide 33 text

As everything good in life, knowledge is great only when shared hypetech.io/education

Slide 34

Slide 34 text

[email protected]