Thanks for making
Forward JS a success!

Learn about the different parts of the React.js library, how to write clean reusable components, the concepts of the Virtual DOM and JSX syntax, state and events, the Flux pattern, Redux stores, reducers, and actions. React-Redux bindings.

Level: Beginner

Prerequisites: - Good knowledge of the basics of JavaScript

This workshop will give detail information to web developers about the desktop and mobile browser ecosystem in 2016 and how to create successful mobile applications for the browser and for native and fullscreen apps.

We will cover

• Mobile browsers ecosystem today
• Browser vs. web view engines
• Advanced Mobile Web Debugging and Profile
• Pushing the limits with hardware: accelerometer, magnetometer, gyroscope access; performance timing, 3D touch, full-screen APIs, AirPlay API, camera access, audio, battery, speech, bluetooth and more.
• New image formats for Responsive Images
• The Physical Web
• How to create full screen webapps (aka progressive webapps)

The workshop will include labs that can be executed directly on mobile phones easily based on an online coding tool.

Everybody is talking about the new king of the Web: Service Workers. But every sample out there is basically the same one. In this talk we will go through the idea, the Service Worker lifecyle, how to debug them and update them with a new version.

We will separate Service Workers from the Cache Storage API and see what are the current and future abilities of SW, including what browser's APIs are available today inside a SW, the Background Sync API, how to communicate to an active tab, and smart ideas that we can use using Service Workers to increase performance and abilities, such as delta updates or new image formats.

Thanks to Service Workers, the web has also a new ability: to subscribe and send push notifications to the user like a native app. We will go through the W3C Push API to subscribe the user and we will understand the structure we need to store enough information to send messages later and the Web Push spec that let us send Push notification messages to browser's servers using HTTPS.

We will also see the additions that are available on Android, such as custom actions and images inside the notifications as well as what's coming in the near future.

Build a mobile app using react native that you can use on iOS or Android

In this one-day intensive course, we will dive deep into core mechanisms of the JS language, probably more than you ever have before. Our goal is to not merely understand what these things do, but how and why.

We will cover: •nested lexical scope •hoisting •closures •modules •'this' keyword •common oo patterns •object prototypes •delegation vs inheritance

The content of this course tracks roughly to the two "You Don't Know JS" books, "Scope & Closures" and "this & Object Prototypes".

Prerequisites: 1-2 years of solid core JS experience.

React is simple yet very performant and developer friendly. It's used and maintained by Facebook and Instagram as well as vast open source community.

You'll start with the basics, including how React fits in your application, JSX, and handling states and events. Next, you’ll learn about the core topics like components, forms and data. You’ll build a few React apps. You learn how to set up Babel and Webpack for React from scratch.

Learn the fundamentals and design concepts of the React.js library, the benefits of readability, reusability, and composability of React components. How to read from and write to React's Virtual DOM. React synthetic events, DOM access, Controlled components. Mounting/Updating lifecycle methods. Working with data and managing state with Redux.

Level: Intermediate

Prerequisites: - Good knowledge of JavaScript and Modern ECMAScript - Knowledge of the basics of React and Redux

Have you build a simple scatterplot or bar chart using D3, but struggled to move beyond the basics? In this workshop, we'll take a deep dive into D3 (also known as a D5). We'll explore how D3 works internally, master common patterns, and explore many of the helpers that D3 provides to more easily create data visualizations. By the end of the day, you'll have a solid handle on how to create histograms and pie charts, as well as how to create force graphs and create geographic visualizations using map data.

Some prior exposure to D3 is preferred, but we'll start the day with a review of the basics.

Testing Components - Declarative Programming and Higher-Order Components - Performance and Optimization - React’s internals - Integrations with the DOM API - State management and data immutability - Async Redux - Working with APIs - Styling - Production deployment

Level: Advanced

Prerequisites: - Good knowledge of JavaScript and Modern ECMAScript - Practical experience building web apps with React and Redux

Web performance is a must known skill for every developer. In this workshop we will cover the basics of Web Performance Optimization, how to measure performance on desktop and mobile devices, what are the important differences on mobile browsers and practical tips to follow to achieve extreme web performance and improve your conversion.

We will have time to make real live analysis on websites and understand how to separate Above-the-Fold content from the rest and when to do it.

Attendees will understand new concepts, such as Speed Index, RAIL goals and new tools to profile, measure, analyze and improve websites' performance. We will also analyze the usage of AMP - Accelerated Mobile Pages - and PWA - Progressive Web Apps -.

Setting up a development environment for client-side JavaScript applications once required combining disparate tools together. Configuring Grunt/Gulp scrips, Browserify, Bower/NPM, etc, required learning all those tools and context switching. Now we have Webpack which can do all the things those tools do and a lot more. This workshop covers basic and advanced Webpack techniques to modularize your JavaScript/CSS/Sass/images/*, implementing hot module replacement, testing, Babel/ES2016, and more.

Use redux and firebase in your mobile app

Unlike quite a few other languages, JavaScript does not have any built in support for Object Oriented Programming, so in this workshop we'll see how to use functions and objects to mimic the behavior of a traditional object oriented language. We'll start with an overview of the keyword this, call,apply and bind, and then focus on the new keyword which is the foundation for writing object oriented JavaScript. We'll see a few inheritance patterns and their drawbacks and discuss composition as well. There will be a few exercises to practice on and we'll even re-implement some of the built in functionality to JavaScript!

If you’ve got a grasp of JavaScript basics including functions and objects, you can get something out of this workshop.

In one-day intensive course, we will dive deeply into the topic of asynchrony. First, we'll look at callbacks and see why they are functional but insufficient for managing async flow control in our complex modern applications. We'll identify the two major problems that make up "callback hell" (no, nothing to do with nesting/indentation!).

Then, to clean up this mess, we'll look at two different ES6 mechanisms which each solve a different aspect of callback hell: generators and promises. We'll see that generators are about solving sync-looking async, while promises are about restoring trust to our continuations. And then we'll see how to compose promises with generators for solid async.

After gaining a firm grasp over these reinvented async methodologies, then we'll look some at higher-order async patterns, and learn ways of identifying when and where to apply them:

iterable sequences streams (reactive) CSP (channel-based concurrency) etc. To wrangle all these different async abstractions, we'll practice the exercises with the "asynquence" library.

Prerequisites: "Advanced JavaScript: Foundations" course, and/or 2-3 years of solid core JS experience.

(Part 1 of 2 ) Functional programming is a powerful pattern for organizing code, but it’s traditionally steeped in lots of academic terminology and rigor. This can be very intimidating and keeps a lot of developers away.

I practice what I call “Functional-Light Programming”, which is to try to find simple take-aways from overall FP patterns and apply them to my normal programming. This approach de-emphasizes terminology and formality and instead focuses on patterns we can learn to instinctually recognize and the tools we can use to address them.

Specifically, we’ll look at the basics of closure, pure (side-effect free) functions, immutable (unchangeable) data, and list-processing tools like map, reduce, and filter.

For many years, NodeJS developers' choice of web framework is ExpressJS.

After taking this course, you can start mastering ExpressJS by building RESTful APIs for your single-page applications (powered by AngularJS, ReactJS, BackboneJS or any other front-end framework). With ExpressJS, developers can easily organize their code (middleware pattern), add more functionality (npm modules) and configure the server (configuration over convention).

Moreover, Express is mature and very stable so that it's a default choice for small companies and large enterprises. Even more advanced frameworks, like Sails or Loopback, extend ExpressJS (i.e., they depend on Express). Therefore, learning ExpressJS first is a valuable investment, because you can apply the same skills and existing ExpressJS middleware to more advanced frameworks. You’ll learn how to use Docker for Node/Express deployment.

We will step through each tab of the developer tools and learn all the great things it can do. After learning about each tab, we will pause for a quick assignment where we’ll have to use the tools we just covered to diagnose problems on real websites.

Learn core Node.js concepts and API modules. The Node runtime modules. V8 and other dependencies. Concurrency Model. Libuv event-loop. Event Emitters. TCP/UDP Networking. HTTP and HTTPS support. Readable, Writable, and Transform Streams. Clusters and Child Processes

Level: Intermediate

Prerequisites: - Good knowledge of JavaScript and Modern ECMAScript - Basic knowledge of the Node.js runtime

React basically won the debate for how to build user interfaces in the DOM. Now async is the new driving force of innovation in modern JavaScript. Figuring out how to build an async architecture on React/Redux is still an open question. Learn the pros and cons of different async approaches in Redux including thunks, promises, generators / sagas, RxJS, and more.

In this workshop we will get into practical examples of how to create a Progressive Web App -an offline capable app-like web application- using the latest specs. Google, Mozilla, Samsung, Opera and Microsoft are all supporting the new Progressive Web Apps world.

We will cover desktop and mobile webapps, using Service Workers and other specs, debugging techniques and tools available. We will learn how to detect connection status and how to create a successful offline experience. We will cover how to use Push Notifications for the Web, how to setup notifications server-side using Google Firebase.

We will finally see how to use Web App Manifest to convert the website into a native-like webapp and how to serve similar solutions for Safari and iOS and other non-compatible browsers.

After this workshop you will have a fully functional PWA that you can serve to your users.

What? Is that even possible? We're sure as hell going to try! Since many of us are self taught and/or dropouts (myself included) we lack the advantages that a formal CS education can give. This additional theory can give us useful context to make tradeoffs in implementations and architectures.

We're going to cover:

Algorithms and Big O Analysis Recursion Sorting! Bubble Insertion Merge Quick Data Structures! Stacks, Queues and Priority Queues Maps and Sets Hash Tables Array Lists Linked Lists Binary Search Trees AVL Trees Functional Programming 101 in 30 mins Map Reduce Filter Who this class is for?

Anyone who wishes they had a better understanding of computer science concepts. This includes self-taught developers, designers who learned to code, or devs just starting down the path of learning to be a good coder.

You need to know JavaScript. We won't be going over syntax and we will be going fast. The focus will be on the concepts and not on the language.

Who this class is not for?

If you look at the list of concepts we're going over and say "I know most or all of those" then this class won't be for you. You're welcome to still come but this class will focus on getting everyone up on the same understanding.

(Part 2 of 2) Functional programming is a powerful pattern for organizing code, but it’s traditionally steeped in lots of academic terminology and rigor. This can be very intimidating and keeps a lot of developers away.

I practice what I call “Functional-Light Programming”, which is to try to find simple take-aways from overall FP patterns and apply them to my normal programming. This approach de-emphasizes terminology and formality and instead focuses on patterns we can learn to instinctually recognize and the tools we can use to address them.

Specifically, we’ll look at the basics of closure, pure (side-effect free) functions, immutable (unchangeable) data, and list-processing tools like map, reduce, and filter.

Learn to explore and visualize data with JavaScript and D3

In this one-day workshop, we’ll dig into a bunch of new changes to JavaScript as of ES6 and even get a glimpse of a few things on the horizon. The most important takeaway is that ES6 is not about new capabilities, but rather new expressivity. If our goal is to write cleaner, clearer, more understandable code—and it should be—ES6 offers a myriad of improvements that make our efforts so much more effective. We’ll cover block scoping, rest/spread operators, defaults, destructuring, template literals, iterators, generators, and more.

Learn how to work with a GraphQL server, and how to write a GraphQL server. The operations of query and mutation, the arguments, variables, fragments, directives, and other features of GraphQL, and how to use them with React. Learn about optimizing GraphQL queries with DataLoader

Level: Intermediate

Prerequisites: - Good knowledge of JavaScript and Modern ECMAScript - Good understanding of the basics of React.js

By now you almost certainly have heard of React and Redux: two libraries that took frontend development by storm. Many large companies like Netflix, Reddit, Facebook, Khan Academy, Airbnb, and more are shipping React. It's become ingrained in the frontend development community.

In this workshop, we'll go from knowing about using React to coding a whole app in it, start-to-finish. After we finish it, we'll refactor to include Redux as part of the app, so you can see how to code an app without Redux and with Redux so you can make an informed decision if you want to include it. We'll also talk about debugging techniques, best practices, and discuss other topics related to the React ecosystem. We'll even do a bit of universal rendering at the end.

This workshop assumes you have a working knowledge of ES5-era JavaScript. ES6 will be used but it will also be explained as it is used.