Async patterns in javascript

Jun 22, 2016Download as pptx, pdf

0 likes425 views

The document discusses various asynchronous patterns in JavaScript, including using events, callbacks with Socket.IO, promises, observables, iterators, generators, and async/await. It provides code examples for promise creation, using the Fetch API, ES2015 iterators, and TypeScript's async/await syntax. The presentation aims to demonstrate asynchronous patterns for event handling, promises, iterators/generators, and async/await in TypeScript and Angular 2.

Fulfill the promise
Async patterns with javascript
Ran Wahle

A little about myself
 Fullstack developer at Global-E
 Enthusiastic front-end developer
 Poor UI designer

What will we see today?
 Using Events and good old XHR
 Callbacks with Socket.IO
 Promise patterns (and standards)
 Observables
 Iterators & generators
 Async / AWAIT
 Angular 2 and async

Socket.IO Events
 .on(‘topic’, hander)
 .emit(‘topic’, args)

Promise patterns
 Used for one time callback
 Has many implementations
jQuery.AJAX , angularJs, backbone & more

Es2015 promise
 One standard (No more “Success”)
 Native javascript implementation
 Native support in new APIs

Generators & Iterrators
 Using array methods asynchronously
 function*
 yield

TS async await
 Writing asynchronously with “synchronous” syntax
 await keyword “turns” a promise to its resolved value

Lets wrap
 Events
 Promise implementation for ES5
 Promises in ES6
 Iterators & Generators
 async & await (TS)

Thanks
Ran Wahle
http://blogs.microsoft.co.il/ranw
Twitter: @ranwahle
Ran.wahle@gmail.com
Linkedin : https://il.linkedin.com/in/ranwahle

The document discusses the features and benefits of AngularJS 2, highlighting its component-based architecture and use of TypeScript. It includes a tutorial on creating a simple task list application using AngularJS 2 and the Angular CLI, demonstrating essential functionalities like task management services and unit testing. Key points emphasize improved performance, easier implementation, and modern development capabilities through TypeScript.

Angular js 2Ran Wahle

AngularJs 2.0 introduces components as the fundamental building blocks, replacing directives. The presentation covers getting started with AngularJs 2.0, including dependencies, configuration, components, data binding, services, routing and migration from Angular 1. It emphasizes that Angular 2 is a rewrite built on newer standards to improve performance and reduce opinionation. Migration involves componentizing the application and using an upgrade adapter to support a hybrid Angular 1 and 2 app.

Angular 2: core conceptsCodemotion

This document provides an overview of core Angular 2 concepts, including: 1) Angular 2 introduces components instead of controllers and uses a one-way data flow instead of $scope. It is also written in TypeScript. 2) Angular 2 has a new dependency injection system, improved performance, better mobile support, and server-side rendering capabilities compared to AngularJS 1.x. 3) Key concepts in Angular 2 include components, communication between components, dependency injection, and the component lifecycle. Change detection and zones are also discussed.

Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016Codemotion

The document provides an overview of Angular 2, focusing on its framework capabilities for web and mobile applications, along with components like TypeScript, change detection, and dependency injection. It includes foundational information on component architecture, stateful and stateless components, property and event binding, and Angular modules. Additionally, best practices for organizing applications and utilizing features such as routing and change detection strategies are discussed.

Introduction to Angular 2Naveen Pete

The document provides an overview of a presentation by Naveen Pete at DevCon 2016 in Bangalore covering Angular 2, its benefits, and essential concepts like TypeScript, modules, components, and services. It discusses Angular's architecture, data binding techniques, and server communication, along with a practical code walkthrough. The event aims to enhance understanding of using Angular to build dynamic web applications.

Introduction to Angular 2Knoldus Inc.

The document provides an introduction to Angular 2, highlighting its improvements over Angular 1.x, such as better performance, mobile readiness, and a new directive strategy. It discusses key features, the transition path from Angular 1 to Angular 2, and provides technical details on directives, dependency injection, and data binding. Finally, it underscores Angular 2's alignment with modern web standards, including web components.

Angular 2 - The Next FrameworkCommit University

Angular 2 is the next version of the AngularJS framework. It was released in 2016 after 2 years of development. Some key features of Angular 2 include optimized performance for both desktop and mobile applications, ahead of time compilation for faster loading, and native support for reactive programming. The document then provides examples of core Angular concepts like components, directives, services, dependency injection and change detection. It explains how Angular 2 applications are bootstrapped and discusses some of the internal workings like the change detection engine.

Angular2 with TypeScript Rohit Bishnoi

The document provides an overview of Angular 2 and TypeScript, detailing the installation, features, architecture, and key components like modules, components, and services. It includes practical exercises for implementing TypeScript functionalities and Angular 2 features such as data binding, routing, and navigation. Additionally, it offers links to resources for further reading and learning about Angular 2.

Tech Webinar: Angular 2, Introduction to a new frameworkCodemotion

The document provides an overview of the core concepts of Angular 2, highlighting significant changes from Angular 1.x, such as the elimination of $scope and controllers, introduction of component-based UI, one-way data flow, and improved performance. It details features like dependency injection, component lifecycle hooks, and change detection strategies for optimizing performance in applications. Additionally, it discusses various Angular functionalities, including template binding, event handling, and the role of Zone.js in managing asynchronous operations.

Angular Dependency InjectionNir Kaufman

The document explores dependency injection in Angular, detailing various injector types such as Node Injector and Module Injector, and the hierarchy control within components. It emphasizes the use of providers, including @Injectable and @NgModule, explaining configurations like providedIn. Additionally, it highlights the importance of using Injection Tokens for abstract types in the code implementation.

Angular 5Bartłomiej Narożnik

The evolution of Angular 2 @ AngularJS Munich Meetup #5Johannes Weber

Introduction to angular 2Dor Moshe

The document provides an in-depth introduction to Angular 2, detailing its history, architecture, and key features such as component-based development, TypeScript usage, and dependency injection. It highlights improvements over AngularJS, including modularity, performance, and support for mobile development. Furthermore, the document covers directives, lifecycle hooks, and the bootstrapping process while mentioning tools and best practices for building Angular applications.

Angular2 Development for Java developersYakov Fain

The productive developer guide to Angular 2Maurice De Beijer [MVP]

This document provides an overview of Angular 2 and its main building blocks including modules, components, templates, data binding, directives, services, and routing. It discusses how Angular 2 differs from Angular 1 and is more opinionated. It also provides code examples for setting up the main module, creating components and templates, using dependency injection for services, and making HTTP requests from services.

Angular2 - In ActionSebastian Pożoga

The document provides an extensive overview of using Angular 2, including setting up applications, routes, templates, and handling modules with tools like JSPM and Browserify. It details code snippets, component configuration, and application bootstrap procedures, alongside metadata and rendering techniques. Additionally, it discusses debugging issues related to PhantomJS and performance optimization with tools like Varnish.

Commit University - Exploring Angular 2Commit University

The document provides a comprehensive overview of Angular 2, detailing its history, features, and core concepts such as components, directives, services, and change detection. It highlights the importance of TypeScript, observables, and the Angular 2 bootstrapping process while also discussing component lifecycles and lifecycle hooks. Additionally, it compares Angular 2 with AngularJS to illustrate improvements in performance and developer experience.

Angular 2 Essential Training Patrick Schroeder

The document provides a comprehensive overview of Angular and TypeScript, covering topics such as components, data binding, directives, routing, and observables. It discusses Angular's structure, setup, and core principles, emphasizing features like strong typing in TypeScript and reusable components. Additionally, it explains concepts like services, dependency injection, and lifecycle hooks, along with practical examples and code snippets.

Data Flow Patterns in Angular 2 - Sebastian MüllerSebastian Holstein

This document discusses data flow patterns in Angular 2. It begins by explaining the component tree structure and how components communicate with inputs and outputs. It then covers RxJS observables and operators for reactive programming. Observables can be used as inputs to components and with the async pipe. Forms and HTTP requests also return observables. Change detection strategies like OnPush can improve performance. Immutable data structures help avoid unnecessary checks. Overall, Angular 2 provides many options for component communication through RxJS observables and efficient change detection.

An introduction to Angular2 Apptension

This document provides an overview of Angular 2, including: - Angular 2 is a rewrite of AngularJS and introduces many breaking changes. - It uses Typescript as its language and compiles to plain JavaScript. - Key concepts include components, templates, directives, dependency injection, and services. - Components define views using templates, styles, and class logic. They can communicate via inputs and outputs. - Directives add behavior to the existing DOM using selectors like elements, attributes, or classes.

Angular2Gabi Costel Lapusneanu

The document discusses Angular modules, directives, and components. Angular modules help organize an application into blocks of functionality using the @NgModule annotation. There are three types of directives - components, attribute directives, and structural directives. Components are a subset of directives that use the @Component annotation and define templates to specify elements and logic on a page. The metadata definitions for @NgModule, @Directive, and @Component are also described.

Angular 4 for Java DevelopersYakov Fain

This document provides an overview and agenda for a presentation on Angular for Java developers. The presentation will cover: generating an Angular project with Angular CLI; creating a Java REST service with Spring Boot; building an Angular REST client to interact with the Spring Boot backend; and demonstrating a sample Angular app using REST and WebSockets. It also briefly outlines key Angular concepts like components, dependency injection, routing, reactive programming with Observables, and forms.

AngularJs presentation Phan Tuan

AngularJS is a JavaScript framework designed for building dynamic web applications by enhancing HTML with a rich set of features like two-way data binding, dependency injection, and a modular structure that increases code maintainability and readability. It uses a model-view-controller (MVC) pattern and provides directives to extend HTML's capabilities, allowing developers to create interactive and dynamic content. Key concepts include scope inheritance, dirty checking, and the use of services injected via a provider, ensuring efficient management of dependencies and application state.

Exploring Angular 2 - Episode 2Ahmed Moawad

This document provides an overview of key Angular concepts including templates, pipes, directives, forms, and component lifecycle hooks. It explains how templates can transform data using pipes and access properties. It covers structural and attribute directives and how they manipulate DOM elements. The document outlines how forms in Angular track state, validate input, and handle submissions. It details each step of the component lifecycle from constructor to destruction. The document provides examples to illustrate core Angular concepts for templates, pipes, directives, forms and the component lifecycle.

Angular2 workshopNir Kaufman

This document outlines an agenda for an Angular2 workshop. The workshop will introduce Angular2 concepts and components, teach how to build an application using components, and cover routing and business logic. Attendees will build a restaurant ordering application to learn how to compose components, implement routing, create data models and services, and connect to backend servers. The workshop is broken into three parts - components, routing, and business logic. Attendees will work through building pieces of the application, with checkpoints provided to see working examples.

Overview of the AngularJS framework Yakov Fain

This document covers the fundamentals of AngularJS within the context of modern web development for Java programmers. It explains the differences between frameworks and libraries, outlines the structure of single-page applications, and provides practical examples of AngularJS features such as modules, controllers, directives, and routing. Additionally, it discusses essential tools for JavaScript development, including Node.js, npm, Yeoman, Bower, and Grunt, highlighting their roles in managing application dependencies and automating tasks.

Angular 2Nigam Goyal

Migrating an application from Angular 1 to Angular 2 Ross Dederer

This document discusses migrating from Angular 1 to Angular 2. It provides an overview of Angular 2 including its modular and component-based architecture. It also discusses TypeScript and how it is used with Angular 2. The document then walks through migrating a sample Silverlight application to an equivalent Angular 2 application, covering converting the viewmodel to a component and porting the view. It emphasizes keeping a similar MVVM pattern and discusses new Angular 2 concepts like templates, metadata and bindings.

Javascript async / await Frontend-ILRan Wahle

You promise?IT Weekend

This document discusses the problems with asynchronous JavaScript and callbacks, and introduces promises as a better abstraction. It explains that promises represent asynchronous values, and allow asynchronous code to be written in a more synchronous and readable way using chained .then() calls. It provides examples of how common asynchronous patterns like error handling, parallel operations, and transforming return values can be implemented cleanly with promises. Finally, it discusses popular promise libraries and the upcoming native ES6 Promise implementation.

More Related Content

What's hot (20)

Tech Webinar: Angular 2, Introduction to a new frameworkCodemotion

Angular Dependency InjectionNir Kaufman

Angular 5Bartłomiej Narożnik

The evolution of Angular 2 @ AngularJS Munich Meetup #5Johannes Weber

Introduction to angular 2Dor Moshe

Angular2 Development for Java developersYakov Fain

The productive developer guide to Angular 2Maurice De Beijer [MVP]

Angular2 - In ActionSebastian Pożoga

Commit University - Exploring Angular 2Commit University

Angular 2 Essential Training Patrick Schroeder

Data Flow Patterns in Angular 2 - Sebastian MüllerSebastian Holstein

An introduction to Angular2 Apptension

Angular2Gabi Costel Lapusneanu

Angular 4 for Java DevelopersYakov Fain

AngularJs presentation Phan Tuan

Exploring Angular 2 - Episode 2Ahmed Moawad

Angular2 workshopNir Kaufman

Overview of the AngularJS framework Yakov Fain

Angular 2Nigam Goyal

Migrating an application from Angular 1 to Angular 2 Ross Dederer

Tech Webinar: Angular 2, Introduction to a new frameworkCodemotion

Angular Dependency InjectionNir Kaufman

Angular 5Bartłomiej Narożnik

The evolution of Angular 2 @ AngularJS Munich Meetup #5Johannes Weber

Introduction to angular 2Dor Moshe

Angular2 Development for Java developersYakov Fain

The productive developer guide to Angular 2Maurice De Beijer [MVP]

Angular2 - In ActionSebastian Pożoga

Commit University - Exploring Angular 2Commit University

Angular 2 Essential Training Patrick Schroeder

Data Flow Patterns in Angular 2 - Sebastian MüllerSebastian Holstein

An introduction to Angular2 Apptension

Angular2Gabi Costel Lapusneanu

Angular 4 for Java DevelopersYakov Fain

AngularJs presentation Phan Tuan

Exploring Angular 2 - Episode 2Ahmed Moawad

Angular2 workshopNir Kaufman

Overview of the AngularJS framework Yakov Fain

Angular 2Nigam Goyal

Migrating an application from Angular 1 to Angular 2 Ross Dederer

Similar to Async patterns in javascript (20)

Javascript async / await Frontend-ILRan Wahle

You promise?IT Weekend

Async discussion 9_29_15Cheryl Yaeger

The document discusses asynchronous programming in JavaScript using promises. It begins by explaining how JavaScript executes code synchronously before introducing callbacks and asynchronous code. It then covers promises as a cleaner way to write asynchronous code. Key points include: promises allow asynchronous code to be written similarly to synchronous code; promises can be chained to handle multiple asynchronous operations in sequence; and the async/await keywords allow promises to be written even more cleanly like synchronous code.

Getting Comfortable with JS PromisesAsa Kusuma

1) Promises are objects that represent the eventual completion (or failure) of an asynchronous operation, rather than using callbacks. They provide a cleaner way to handle asynchronous code than callbacks alone. 2) A promise has three possible states: pending, fulfilled, and rejected. Promises allow multiple handlers to be attached to an asynchronous operation via the .then() method. Handlers will be called even if attached after the promise is settled. 3) Common uses of promises include handling data retrieval from external sources, loading assets, and handling animations. Promises are well-suited for any potentially asynchronous operation.

The Promised Land (in Angular)Domenic Denicola

The document discusses the concept of promises in JavaScript, particularly in the context of the Angular framework, highlighting their importance for managing asynchronous operations. It explains how promises work, including creation, chaining, and error handling, along with practical examples demonstrating their usage. The document also addresses strengths and limitations of Angular's promise implementation compared to other libraries.

The Async JS SagaHarshit Juneja

The document discusses various asynchronous patterns in JavaScript including callbacks, promises, generators and iterators, async/await, web workers, and observables. It notes that JavaScript is single-threaded and non-blocking, requiring asynchronous patterns. Callbacks are described as difficult for humans to follow while promises and async/await provide a more readable alternative. Generators and iterators allow breaking the run-to-completion model. Web workers run JavaScript in background threads without blocking the UI. Observables are suited for event streams and avoid memory leaks when implemented through libraries like RxJS.

Asynchronous development in JavaScriptAmitai Barnea

Asynchronous JavaScript development allows long-running operations like network requests or file access to occur without blocking the main thread through an event-driven programming model and callback functions. The browser uses an event loop to queue and execute events. While JavaScript can only execute one task at a time, asynchronous functions expose callbacks to handle completed operations. This can lead to "callback hell" where code becomes nested and difficult to follow. Promises and async/await were introduced to simplify asynchronous code by handling callbacks in a cleaner way similar to synchronous code. Web workers also allow true concurrency by running scripts on a separate thread.

JavaScript Promises Simplified [Free Meetup]Haim Michael

The document provides an overview of JavaScript promises introduced in ECMAScript 2015, highlighting their ability to facilitate asynchronous coding by allowing operations to be executed later with success or failure notifications. It covers key concepts such as the event loop, the promise lifecycle, and how to handle errors with the catch method, as well as introducing async functions for cleaner asynchronous behavior. Overall, the document aims to simplify understanding promise usage and best practices in JavaScript programming.

Do you Promise?jungkees

1) Promises provide a way to write asynchronous code in a more readable sequential style by avoiding deeply nested callbacks. 2) Promises represent the eventual completion (or failure) of an asynchronous operation, and allow consumers to attach callbacks instead of passing callbacks into asynchronous functions. 3) Promises are being adopted in many web standards and browser APIs to provide a consistent approach to asynchronous programming across the web platform.

Async FrontiersDomenic Denicola

The document discusses advancements in asynchronous programming, particularly focusing on promises, iterators, and observables in JavaScript. It outlines concepts such as cancelable promises, async iterators, and the design of readable streams, including their advantages and challenges. Additionally, it emphasizes the complexities of asynchronous operations and encourages exploration in this evolving domain.

Java Script PromiseAlok Guha

Javascript uses an event loop model to perform asynchronous operations even though it is single-threaded. Callbacks are used to handle asynchronous operations but can make code complex. Promises were introduced to simplify asynchronous code. A Promise represents the eventual completion (or failure) of an asynchronous operation, and allows consuming code to define callbacks instead of nesting callbacks. Promises are constructed by calling new Promise(), which takes a resolver function with resolve and reject parameters. The state of a Promise can be pending, fulfilled, or rejected.

I'm Postal for Promises in AngularChristian Lilley

This document discusses the concept of promises in programming, highlighting their purpose of managing uncertainty in asynchronous operations. It contrasts promises with callbacks, illustrating how promises simplify code structure and improve maintainability by enabling a declarative approach to handling asynchronous tasks. The author emphasizes that promises are not just about replacing callbacks but represent a significant shift in how developers compose and manage uncertain operations, especially within frameworks like Angular.

Promises are so passé - Tim Perry - Codemotion Milan 2016Codemotion

The document discusses asynchronous programming in JavaScript and how it has evolved over time. It covers callbacks, promises, generators, and the new async/await syntax. Callbacks were difficult to read and handle errors across steps. Promises provided a better model but still had ceremony and didn't play nicely with other constructs. Generators allowed writing async code that looked synchronous but required wrapping in a promise. Async/await builds on promises and generators by providing syntax that looks like synchronous code while still being asynchronous under the hood. It addresses issues with previous approaches but developers still need to handle errors and can overuse await. Async/await is available in modern browsers and makes asynchronous JavaScript much cleaner.

Asynchronous JavaScript ProgrammingHaim Michael

This document provides an overview of asynchronous JavaScript. It discusses how JavaScript uses a single thread and event queue. It introduces asynchronous functions and loading scripts asynchronously. It covers the requestIdleCallback function for background tasks. The document also provides an in-depth overview of promises in JavaScript for asynchronous code, including the promise lifecycle, then and catch methods, and creating promises using the Promise constructor.

The evolution of asynchronous JavaScriptAlessandro Cinelli (cirpo)

The document summarizes the evolution of asynchronous JavaScript programming. It begins with callbacks being the fundamental way to handle asynchronous code. This led to issues like callback hell and loss of error handling. Promises were introduced to help address these issues by providing a cleaner way to handle asynchronous operations with methods like then() and catch(). However, promises could still result in unreadable code if used improperly for control flow. Generators and async/await were later introduced to allow asynchronous code to be written in a synchronous, blocking-like fashion using keywords like yield and await. Overall, the document traces the progression from callbacks to promises to generators and async/await as ways to improve the handling of asynchronous code in JavaScript.

Async js - Nemetschek Presentaion @ HackBulgariaHackBulgaria

The document discusses asynchronous JavaScript and the use of promises, explaining their lifecycle and importance in managing asynchronous operations. It outlines concepts such as callbacks, error handling, and the differences between synchronous and asynchronous execution. The content includes examples and references to various implementations and libraries for better handling of promises in JavaScript.

Intro to Asynchronous JavascriptGarrett Welson

The document provides an introduction to asynchronous JavaScript. It discusses callbacks and their disadvantages like callback hell. Promises are introduced as a better way to handle asynchronous code by making it easier to write and chain asynchronous operations. Async/await is described as syntactic sugar that allows asynchronous code to be written more readably in a synchronous style using await and try/catch. Key aspects like the event loop, microtask queue, and Promise methods like all and race are explained. Overall the document aims to help understand what makes asynchronous code different and newer methods like promises and async/await that improve handling asynchronous operations in JavaScript.

4 mishchevskii - testing stage18-Ievgenii Katsan

This document discusses asynchronous programming concepts in JavaScript. It begins with an overview of asynchronous programming models using different types of servers like PHP, Java, and Node.js. It then covers callback functions and their issues like callback hell. Promises are introduced as a way to improve on callbacks. Key aspects of promises like chaining, error handling, and settling are explained. Finally, async/await is presented as an advanced way of working with promises that has a cleaner syntax than promises alone. The document ends with a quiz to test understanding of promises and asynchronous concepts.

Event Driven JavascriptFederico Galassi

This document discusses event-driven programming in JavaScript, detailing its historical context and the evolution of its architecture. It highlights interaction models, the shift from sequential to asynchronous execution, and the complexity that arises from the callback structure. Various methods for managing this complexity are explored, alongside the implications of these design choices on performance and control flow.

Avoiding callback hell with promisesTorontoNodeJS

This document introduces JavaScript promises as a way to manage asynchronous code and avoid "callback hell". It explains that promises represent the eventual result of an asynchronous operation and allow restoring functional composition and error handling to asynchronous code. Code examples are provided to demonstrate how promises work by having asynchronous functions return promise objects instead of relying on callbacks. The differences between callbacks and promises are outlined, such as promises being objects that are returned rather than functions passed as arguments. It also addresses how to handle functions that don't natively return promises by wrapping them to return a promise instead. Finally, a callback hell example is provided and solved using promises to flatten the nested callbacks.

Javascript async / await Frontend-ILRan Wahle

You promise?IT Weekend

Async discussion 9_29_15Cheryl Yaeger

Getting Comfortable with JS PromisesAsa Kusuma

The Promised Land (in Angular)Domenic Denicola

The Async JS SagaHarshit Juneja

Asynchronous development in JavaScriptAmitai Barnea

JavaScript Promises Simplified [Free Meetup]Haim Michael

Do you Promise?jungkees

Async FrontiersDomenic Denicola

Java Script PromiseAlok Guha

I'm Postal for Promises in AngularChristian Lilley

Promises are so passé - Tim Perry - Codemotion Milan 2016Codemotion

Asynchronous JavaScript ProgrammingHaim Michael

The evolution of asynchronous JavaScriptAlessandro Cinelli (cirpo)

Async js - Nemetschek Presentaion @ HackBulgariaHackBulgaria

Intro to Asynchronous JavascriptGarrett Welson

4 mishchevskii - testing stage18-Ievgenii Katsan

Event Driven JavascriptFederico Galassi

Avoiding callback hell with promisesTorontoNodeJS

More from Ran Wahle (20)

Implementing promises with typescripts, step by stepRan Wahle

HTML dialog element demonstration sessionRan Wahle

MicroFrontend With Iframes, dirty laundry that can be cleanedRan Wahle

The document discusses the concept of micro frontends, focusing on the architecture where a single application consists of multiple modules developed by different teams, potentially utilizing various tech stacks. It highlights the use of iframes for remote imports, outlining how they enable communication and navigation between different parts of the application while addressing challenges related to isolation and browser limitations. Additionally, it provides a code demonstration and references a GitHub repository for further exploration.

Into React-DOM.pptxRan Wahle

The document provides an overview of React component development, discussing the importance of a declarative approach, scalability, and the overhead associated with traditional methods. It details the rendering lifecycle, including processes like begin work, diffing algorithms, and how to manage state and events within components. The author emphasizes mapping props and events effectively to streamline component performance and updates.

Lets go to the backgroundRan Wahle

This document discusses background operations in web applications including background sync, periodic background sync, and background fetch. Background sync allows sending data whenever the network is available, periodic background sync gives the feeling of constant connection to the server even when offline, and background fetch allows downloading content from the network without stopping when the network throttles or stops. These background operations help make the user experience less dependent on the network status.

Permissions apiRan Wahle

The document discusses the new Permission API which provides a unified way for websites to query, request, and revoke user permissions and handle changes. It allows developers to know the permission status without asking, and be notified of changes. Some permissions like camera and accelerometer may not work the same way yet as it is still an experimental API. Links are provided for the specification, MDN documentation, a polyfill, and demo code.

Lets go vanillaRan Wahle

The presentation discusses the evolution of browsers, JavaScript, and frameworks. It argues that while frameworks provide useful features like data binding and routing, they can also lock developers into certain approaches. Reinventing the wheel with vanilla JavaScript is possible using browser APIs and standards like custom elements, attributes, events, and the History API. Programming directly with vanilla JavaScript ensures familiarity with underlying capabilities and flexibility to choose the best tools.

Custom elements Ran Wahle

The document discusses custom elements as part of web components standards, focusing on their lifecycle, attributes, and events, along with frameworks like Stencil.js and Angular Elements for building reusable components. It highlights the ease of writing custom elements in vanilla JavaScript, though it can also be challenging, and provides links to resources and a demo code repository. Additionally, the author, Ran Wahle, is a front-end developer at Tikal and shares insights on custom elements and integration with various libraries.

Web workers Ran Wahle

Web workers allow JavaScript to run in background threads to optimize performance. A worker runs in a separate global context and can communicate with the main thread via messaging. A shared worker can serve multiple browsing contexts and uses ports to send and receive messages between contexts. Workers parallelize work to speed up tasks while shared workers facilitate sharing state across contexts by using a single worker instance.

Using legacy code with micro frontendsRan Wahle

Ran Wahle discusses using micro frontends to integrate legacy code into a modern single page application (SPA) in a peaceful way. A demo is shown integrating three sample applications - one using jQuery, one using Angular 6, and one using Angular 5 and Firebase. Micro frontends allow each application to have its own URL routing and inner routing while reusing backend services. Wrapping applications as custom elements is also discussed as an alternative to iframes for less isolation while still maintaining independence. The talk concludes that micro frontends can help extend legacy code and blend applications together to achieve "world peace" between new and old approaches.

Ngrx one-effectRan Wahle

The document discusses a fullstack developer's approach to using one effect to manage data fetching in Angular applications with NgRx. It outlines a pattern for creating actions and effects to streamline API calls, emphasizing the use of a single effect to handle multiple data fetch attempts to reduce code complexity. The author shares resources and code examples to illustrate the implementation of this pattern.

Angular migrationRan Wahle

The document discusses the challenges and considerations of migrating a large project to an Angular fullstack environment as a service, emphasizing that this process is essentially a rewrite rather than a straightforward migration. While there are long-term benefits such as improved performance and user experience, short-term impacts may include increased bugs and poor delivery. It outlines the need for careful planning, refactoring, and maintaining a balance between old and new code during the transition.

Boost js state managementRan Wahle

The document discusses state management in web applications using Redux and MobX. It presents a call center management app to demonstrate both approaches. Redux uses actions, reducers, and middleware for state management with a defined data flow. MobX uses decorators to automatically manage state with less code but less testability. Best practices include connecting only smart components to the store and using the store for reusable data. While Redux is more complex and testable, MobX is more automatic but "magical".

Angular 2.0 change detectionRan Wahle

The document discusses Angular 2.0 change detection. It describes how Angular 2.0 change detection is more efficient and predictable compared to Angular 1.x by using a component-based approach rather than a graph. Each component has its own change detector that is generated at compile time. Change detection occurs top-down via the change detection tree. The document also discusses strategies like OnPush, immutable objects, observables, and manually controlling change detection.

Code migration from Angular 1.x to Angular 2.0Ran Wahle

The document discusses the migration process from Angular 1.x to Angular 2.0, highlighting the need to gradually update applications while enjoying the capabilities of Angular 2.0. It outlines steps such as restructuring modules, switching to TypeScript, and using Angular 1.5 components for a smoother transition. The author emphasizes that code from Angular 1.x can be adapted to resemble Angular 2.0, facilitating a dual-operation environment during the migration.

Asyncawait in typescriptRan Wahle

The document summarizes a presentation about using async/await to write asynchronous JavaScript code in a synchronous style. It begins with an introduction to promises as the standard pattern for asynchronous programming. It then demonstrates how async/await allows writing asynchronous code that looks synchronous using async functions and the await keyword. Under the hood, async/await uses generators produced by the TypeScript compiler. The presentation includes code examples and demos of geolocation and reverse geocoding using promises and async/await. It concludes with additional resources for learning more about iterators, generators, and async/await.

Angular%201%20to%20angular%202Ran Wahle

Angular 2.0 introduces significant changes from Angular 1.x including a new component-based architecture, use of TypeScript for static typing, and improved performance. The document discusses how to prepare Angular 1.x applications for migration by refactoring into components and using TypeScript. It also provides an overview of key differences in Angular 2.0 like bootstrapping, data binding, dependency injection and services.

What’s new in angular 2 - From FrontEnd IL MeetupRan Wahle

This document provides an overview of the key differences between Angular 1.x and Angular 2.0. Angular 2.0 introduces components, new data binding, and dependency injection based on newer standards like ES6. Components are classes with templates and metadata, replacing directives. Data binding uses property and event binding instead of two-way binding. Change detection is enhanced for performance. Angular 2.0 apps are bootstrapped differently by creating and bootstrapping components instead of modules.

angularJs WorkshopRan Wahle

AngularJS is an open-source JavaScript framework for building dynamic web applications. It uses HTML as the template language and allows extending HTML vocabulary for the application. The key concepts covered in the document include modules and dependency injection, data binding using controllers and scopes, services, filters, form validation, directives, and routing. Various AngularJS features like modules, controllers, services, directives etc. are demonstrated via code examples. The document provides an introduction to core AngularJS concepts through explanations, code samples and a demo.

What’s new in angular 2Ran Wahle

Angular 2.0 introduces several major changes from Angular 1.x including a component-based architecture, new data binding syntax, and improved change detection. Components are the fundamental building blocks and define a template and class. Data binding in Angular 2.0 no longer uses two-way binding and instead relies on property, event, and local variable binding. Change detection is also enhanced with faster performance for immutable objects. While Angular 2.0 introduces breaking changes, Angular 1.x will continue to be supported, so there is no rush to migrate existing applications.

Implementing promises with typescripts, step by stepRan Wahle

HTML dialog element demonstration sessionRan Wahle

MicroFrontend With Iframes, dirty laundry that can be cleanedRan Wahle

Into React-DOM.pptxRan Wahle

Lets go to the backgroundRan Wahle

Permissions apiRan Wahle

Lets go vanillaRan Wahle

Custom elements Ran Wahle

Web workers Ran Wahle

Using legacy code with micro frontendsRan Wahle

Ngrx one-effectRan Wahle

Angular migrationRan Wahle

Boost js state managementRan Wahle

Angular 2.0 change detectionRan Wahle

Code migration from Angular 1.x to Angular 2.0Ran Wahle

Asyncawait in typescriptRan Wahle

Angular%201%20to%20angular%202Ran Wahle

What’s new in angular 2 - From FrontEnd IL MeetupRan Wahle

angularJs WorkshopRan Wahle

What’s new in angular 2Ran Wahle

Recently uploaded (20)

What is data visualization and how data visualization tool can help.pdfVarsha Nayak

An open source data visualization tool enhances this process by providing flexible, cost-effective solutions that allow users to customize and scale their visualizations according to their needs. These tools enable organizations to make data-driven decisions with complete freedom from proprietary software limitations. Whether you're a data scientist, marketer, or business leader, understanding how to utilize an open source data visualization tool can significantly improve your ability to communicate insights effectively.

Agentic Techniques in Retrieval-Augmented Generation with Azure AI SearchMaxim Salnikov

Discover how Agentic Retrieval in Azure AI Search takes Retrieval-Augmented Generation (RAG) to the next level by intelligently breaking down complex queries, leveraging full conversation history, and executing parallel searches through a new LLM-powered query planner. This session introduces a cutting-edge approach that delivers significantly more accurate, relevant, and grounded answers—unlocking new capabilities for building smarter, more responsive generative AI applications. Traditional Retrieval-Augmented Generation (RAG) pipelines work well for simple queries—but when users ask complex, multi-part questions or refer to previous conversation history, they often fall short. That’s where Agentic Retrieval comes in: a game-changing advancement in Azure AI Search that brings LLM-powered reasoning directly into the retrieval layer. This session unveils how agentic techniques elevate your RAG-based applications by introducing intelligent query planning, subquery decomposition, parallel execution, and result merging—all orchestrated by a new Knowledge Agent. You’ll learn how this approach significantly boosts relevance, groundedness, and answer quality, especially for sophisticated enterprise use cases. Key takeaways: - Understand the evolution from keyword and vector search to agentic query orchestration - See how full conversation context improves retrieval accuracy - Explore measurable improvements in answer relevance and completeness (up to 40% gains!) - Get hands-on guidance on integrating Agentic Retrieval with Azure AI Foundry and SDKs - Discover how to build scalable, AI-first applications powered by this new paradigm Whether you're building intelligent copilots, enterprise Q&A bots, or AI-driven search solutions, this session will equip you with the tools and patterns to push beyond traditional RAG.

How the US Navy Approaches DevSecOps with Raise 2.0Anchore

Join us as Anchore's solutions architect reveals how the U.S. Navy successfully approaches the shift left philosophy to DevSecOps with the RAISE 2.0 Implementation Guide to support its Cyber Ready initiative. This session will showcase practical strategies for defense application teams to pivot from a time-intensive compliance checklist and mindset to continuous cyber-readiness with real-time visibility. Learn how to break down organizational silos through RAISE 2.0 principles and build efficient, secure pipeline automation that produces the critical security artifacts needed for Authorization to Operate (ATO) approval across military environments.

Reimagining Software Development and DevOps with Agentic AIMaxim Salnikov

Making significant Software Architecture decisionsBert Jan Schrijver

Async-ronizing Success at Wix - Patterns for Seamless Microservices - Devoxx ...Natan Silnitsky

In a world where speed, resilience, and fault tolerance define success, Wix leverages Kafka to power asynchronous programming across 4,000 microservices. This talk explores four key patterns that boost developer velocity while solving common challenges with scalable, efficient, and reliable solutions: 1. Integration Events: Shift from synchronous calls to pre-fetching to reduce query latency and improve user experience. 2. Task Queue: Offload non-critical tasks like notifications to streamline request flows. 3. Task Scheduler: Enable precise, fault-tolerant delayed or recurring workflows with robust scheduling. 4. Iterator for Long-running Jobs: Process extensive workloads via chunked execution, optimizing scalability and resilience. For each pattern, we’ll discuss benefits, challenges, and how we mitigate drawbacks to create practical solutions This session offers actionable insights for developers and architects tackling distributed systems, helping refine microservices and adopting Kafka-driven async excellence.

Software Engineering Process, Notation & Tools Introduction - Part 3Gaurav Sharma

dp-700 exam questions sample docume .pdfpravkumarbiz

Advanced Token Development - Decentralized Innovationarohisinghas720

Artificial Intelligence Applications Across IndustriesSandeepKS52

Artificial Intelligence is a rapidly growing field that influences many aspects of modern life, including transportation, healthcare, and finance. Understanding the basics of AI provides insight into how machines can learn and make decisions, which is essential for grasping its applications in various industries. In the automotive sector, AI enhances vehicle safety and efficiency through advanced technologies like self-driving systems and predictive maintenance. Similarly, in healthcare, AI plays a crucial role in diagnosing diseases and personalizing treatment plans, while in financial services, it helps in fraud detection and risk management. By exploring these themes, a clearer picture of AI's transformative impact on society emerges, highlighting both its potential benefits and challenges.

Generative Artificial Intelligence and its ApplicationsSandeepKS52

The exploration of generative AI begins with an overview of its fundamental concepts, highlighting how these technologies create new content and ideas by learning from existing data. Following this, the focus shifts to the processes involved in training and fine-tuning models, which are essential for enhancing their performance and ensuring they meet specific needs. Finally, the importance of responsible AI practices is emphasized, addressing ethical considerations and the impact of AI on society, which are crucial for developing systems that are not only effective but also beneficial and fair.

Porting Qt 5 QML Modules to Qt 6 WebinarICS

Have you upgraded your application from Qt 5 to Qt 6? If so, your QML modules might still be stuck in the old Qt 5 style—technically compatible, but far from optimal. Qt 6 introduces a modernized approach to QML modules that offers better integration with CMake, enhanced maintainability, and significant productivity gains. In this webinar, we’ll walk you through the benefits of adopting Qt 6 style QML modules and show you how to make the transition. You'll learn how to leverage the new module system to reduce boilerplate, simplify builds, and modernize your application architecture. Whether you're planning a full migration or just exploring what's new, this session will help you get the most out of your move to Qt 6.

Milwaukee Marketo User Group June 2025 - Optimize and Enhance Efficiency - Sm...BradBedford3

Inspired by the Adobe Summit hands-on lab, Optimize Your Marketo Instance Performance, review the recording from June 5th to learn best practices that can optimize your smart campaign and smart list processing time, inefficient practices to try to avoid, and tips and tricks for keeping your instance running smooth! You will learn: How smart campaign queueing works, how flow steps are prioritized, and configurations that slow down smart campaign processing. Best practices for smart list and smart campaign configurations that yield greater reliability and processing efficiencies. Generally recommended timelines for reviewing instance performance: walk away from this session with a guideline of what to review in Marketo and how often to review it. This session will be helpful for any Marketo administrator looking for opportunities to improve and streamline their instance performance. Be sure to watch to learn best practices and connect with your local Marketo peers!

Application Modernization with Choreo - The AI-Native Internal Developer Plat...WSO2

Microsoft Business-230T01A-ENU-PowerPoint_01.pptxsoulamaabdoulaye128

OpenTelemetry 101 Cloud Native BarcelonaImma Valls Bernaus

AI and Deep Learning with NVIDIA TechnologiesSandeepKS52

Artificial intelligence and deep learning are transforming various fields by enabling machines to learn from data and make decisions. Understanding how to prepare data effectively is crucial, as it lays the foundation for training models that can recognize patterns and improve over time. Once models are trained, the focus shifts to deployment, where these intelligent systems are integrated into real-world applications, allowing them to perform tasks and provide insights based on new information. This exploration of AI encompasses the entire process from initial concepts to practical implementation, highlighting the importance of each stage in creating effective and reliable AI solutions.

DevOps for AI: running LLMs in production with Kubernetes and KubeFlowAarno Aukia

Plooma is a writing platform to plan, write, and shape books your wayPlooma

Plooma is your all in one writing companion, designed to support authors at every twist and turn of the book creation journey. Whether you're sketching out your story's blueprint, breathing life into characters, or crafting chapters, Plooma provides a seamless space to organize all your ideas and materials without the overwhelm. Its intuitive interface makes building rich narratives and immersive worlds feel effortless. Packed with powerful story and character organization tools, Plooma lets you track character development and manage world building details with ease. When it’s time to write, the distraction-free mode offers a clean, minimal environment to help you dive deep and write consistently. Plus, built-in editing tools catch grammar slips and style quirks in real-time, polishing your story so you don’t have to juggle multiple apps. What really sets Plooma apart is its smart AI assistant - analyzing chapters for continuity, helping you generate character portraits, and flagging inconsistencies to keep your story tight and cohesive. This clever support saves you time and builds confidence, especially during those complex, detail packed projects. Getting started is simple: outline your story’s structure and key characters with Plooma’s user-friendly planning tools, then write your chapters in the focused editor, using analytics to shape your words. Throughout your journey, Plooma’s AI offers helpful feedback and suggestions, guiding you toward a polished, well-crafted book ready to share with the world. With Plooma by your side, you get a powerful toolkit that simplifies the creative process, boosts your productivity, and elevates your writing - making the path from idea to finished book smoother, more fun, and totally doable. Get Started here: https://www.plooma.ink/

How Insurance Policy Management Software Streamlines OperationsInsurance Tech Services

What is data visualization and how data visualization tool can help.pdfVarsha Nayak

Agentic Techniques in Retrieval-Augmented Generation with Azure AI SearchMaxim Salnikov

How the US Navy Approaches DevSecOps with Raise 2.0Anchore

Reimagining Software Development and DevOps with Agentic AIMaxim Salnikov

Making significant Software Architecture decisionsBert Jan Schrijver

Async-ronizing Success at Wix - Patterns for Seamless Microservices - Devoxx ...Natan Silnitsky

Software Engineering Process, Notation & Tools Introduction - Part 3Gaurav Sharma

dp-700 exam questions sample docume .pdfpravkumarbiz

Advanced Token Development - Decentralized Innovationarohisinghas720

Artificial Intelligence Applications Across IndustriesSandeepKS52

Generative Artificial Intelligence and its ApplicationsSandeepKS52

Porting Qt 5 QML Modules to Qt 6 WebinarICS

Milwaukee Marketo User Group June 2025 - Optimize and Enhance Efficiency - Sm...BradBedford3

Application Modernization with Choreo - The AI-Native Internal Developer Plat...WSO2

Microsoft Business-230T01A-ENU-PowerPoint_01.pptxsoulamaabdoulaye128

OpenTelemetry 101 Cloud Native BarcelonaImma Valls Bernaus

AI and Deep Learning with NVIDIA TechnologiesSandeepKS52

DevOps for AI: running LLMs in production with Kubernetes and KubeFlowAarno Aukia

Plooma is a writing platform to plan, write, and shape books your wayPlooma

How Insurance Policy Management Software Streamlines OperationsInsurance Tech Services

Async patterns in javascript

1. Fulfill the promise Async patterns with javascript Ran Wahle

2. A little about myself  Fullstack developer at Global-E  Enthusiastic front-end developer  Poor UI designer

3. What will we see today?  Using Events and good old XHR  Callbacks with Socket.IO  Promise patterns (and standards)  Observables  Iterators & generators  Async / AWAIT  Angular 2 and async

4. Using Events • Trigger • Handle

5. Socket.IO Events  .on(‘topic’, hander)  .emit(‘topic’, args)

6. Promise patterns  Used for one time callback  Has many implementations jQuery.AJAX , angularJs, backbone & more

7. Promise creation demo

8. Es2015 promise  One standard (No more “Success”)  Native javascript implementation  Native support in new APIs

9. Using Fetch API

10. Generators & Iterrators  Using array methods asynchronously  function*  yield

11. ES2015 iterators

12. TS async await  Writing asynchronously with “synchronous” syntax  await keyword “turns” a promise to its resolved value

13. TS Async / Await

14. Lets wrap  Events  Promise implementation for ES5  Promises in ES6  Iterators & Generators  async & await (TS)

15. Thanks Ran Wahle http://blogs.microsoft.co.il/ranw Twitter: @ranwahle [email protected] Linkedin : https://il.linkedin.com/in/ranwahle

Async patterns in javascript

Recommended

More Related Content

What's hot (20)

Similar to Async patterns in javascript (20)

More from Ran Wahle (20)

Recently uploaded (20)

Async patterns in javascript