End to End Testing Using Cypress

Testing JavaScript apps is tough. What if I showed you a better way? Cypress is free and open source test runner geared towards developers. It runs directly next to your code giving you an incredible power. In short time you will be testing any app with full confidence and dare I say - pleasure.

Modern JavaScript

Let us look at JavaScript - the language that runs the Internet. We will learn how new features are added to the language, how the modern syntax looks, and the main tools for testing, transpiling and bundling JavaScript applications. Anyone looking to start with JS or upgrade development skills will benefit from this presentation.

I am going to cover the following topics:

- where JavaScript is used today: browser, mobile, server, desktop
- how new features are added to the language
- main tools for testing, linting and bundling code

Cycle.js: get in the loop

An introduction to the Cycle.js: a modern functional reactive framework. Cycle.js breaks with the existing Model-View-Controller approach, instead focusing on making the data flow inside your application as clear as possible. All external interactions: the browser, the server API calls, the real time feeds are modeled as input and output reactive streams, making your own application code pure from side effects. Programming with Cycle is very different from using any other library for web development; attend this presentation to find out what makes Cycle.js so special.

Shown at FrontEnd Camp NYC 2016 https://slides.com/bahmutov/cyclejs-frontendcamp

It's not your parents' HTTP

The Internet of simple textual requests and responses is done. Finished. Obsolete. The modern web is a web of binary, persistent connections like WebSockets, WebRTC, HTTP/2 and QUIC. Today's Internet is a strange place where things are received before they are requested (Server Push) and a web application work without Web (offline support with Service Worker)

I will start with the history of HTTP, and how it changes from 0.9 to 1.0 and to 1.1. I will explain the performance benefit of HTTP/2, the state of support and a very interesting performance feature (Server Push). Then I will talk about real time systems that use Web Sockets for persistent data connection. Then I will talk about data synchronization solutions via in-browser database that can sync automatically. I will talk about offline support and instant web applications using ServiceWorker, and finally I will describe why HTTP/2 is going to be replaced by a protocol named QUIC based on UDP.

Which web framework should I learn next?

Should I learn and use Angular 1, React, Angular 2, Ember or something else? What are the common features they all share? How are they different? Are there "better" frameworks that will be popular next year? I will show a couple of new approaches that should be part of any future-proof framework: reactive streams for managing the data flow, virtual DOM abstractions for speed, testability and performance tools built right into the framework. The presentation might be controversial, but the struggle to pick "the next best thing" is very real.

First, I will talk how unproductive are arguments "framework X vs Y". Then I will talk about features that are only now appearing in the web frameworks:

- DOM abstractions for performance reasons (moving virtual DOM computation into separate thread using WebWorkers)
- Modular design for smaller size (we can start small, or we can cut a large bundle)
- Hydration using ServiceWorker to speed up the startup times
- Offline support
- Universal rendering
- Reactive streams as first class objects
- Functional purity
- Real time support instead of "turn-based" abstraction

Semantic release

Manually releasing new software versions is dangerous. You might forget to test it before releasing, or you might release a platform-specific version, instead of a general one. Moving the release to the CI and automating it is the key to repeatable and robust release process. In this talk I will show how to setup completely automated yet robust release system with semantic versioning for JavaScript using NodeJS.

Every JavaScript project requires 3rd party modules. As soon as you depend on specific versions, your module falls behind. I will show how to keep your software up to date without any effort (as long as there are some tests). I will also show how your NPM package can guarantee NOT breaking its downstream dependencies; and even the major changes can be upgraded automatically by using codemods.

Web application profiling using code snippets

Chrome DevTools code snippets became my favorite tool when investigating performance bottlenecks in web applications. A JavaScript fragment can be stored as a named snippet in the "Sources" DevTools panel and executed in the current page's context, just as if it were a code executed in the browser's console.

Using code snippets we can start CPU, timeline and memory profilers, get very accurate information about any performance measurement, and quickly find the application's bottlenecks. We can even auto update locally stored code snippets using a code snippet!

In this presentation I will go through a typical web application, using different code snippets to measure and locate bottlenecks. Any developer trying to make a page faster would benefit from knowing about code snippets.

See blog post http://glebbahmutov.com/blog/performance-profiling-using-devtools-code-snippets/ where I walk through a typical web application step through step, finding bottlenecks using code snippets and then fixing them one by one.

The web performance is certainly an important topic these days. The code snippets allow accurate and quick profiling. My github repo with code snippets https://github.com/bahmutov/code-snippets has become my most starred project overnight.

Securing the front end, from a Node server

A simple technique to disable the script injection attacks on your web pages is to disable the inline JavaScript. This means that most popular ways to inject variables and code fragments into your pages will have to change. I will show the JavaScript to JavaScript rendering engine for Express that allows you to set very strict and safe Content-Security-Policy on your website. Not only my approach is much safer, but it will be very testable as well.

As a bonus I will show another project that can prevent sensitive information leaking to GitHub and NPM.

https://glebbahmutov.com/blog/disable-inline-javascript-for-security/ - The explanation of Content Security Policy standard, how it works, its benefits, and examples
How bad things can happen when the server-side rendering or injection is combined with web application templating, see these slides for the full example.
https://glebbahmutov.com/blog/javascript-to-javascript-template-engine/ - The tiny middleware for Express server that removes the need to use the extremely unsafe inline JavaScript code to inject variables and code fragments
ban-sensitive-files

Everything I know about writing quality software

In this presentation I will show all the tools I use to write software that does not break but keeps the users happy. Static types, exception monitoring, unit tests with snapshots, randomized testing, code and data coverage, code complexity metrics and awesome end to end testing tools - the list is long and keeps on growing! The techniques I plan to show are applicable to every framework and environment.

Examples of this talk I gave:
- CycleConf 2017 https://slides.com/bahmutov/cycleconf-2017 https://vimeo.com/album/4578937/video/216829554
- MIT 6.148 class https://slides.com/bahmutov/working-software https://www.youtube.com/watch?v=MHNB6CGENKo

Shapes of development

A geometric shape is simple to remember and visualize concept, familiar to any child. In software development we have a few concepts with associated shapes: agile is shown as a spiral curve, waterfall as, well, a waterfall, etc. In this presentation I will show the shapes that describe other modern development approaches and architectural styles.

In this presentation I will go through a list of concepts, each concept closely matching a geometric shape. While the list is long, here are the main shapes:

- Artifact repositories decouple software development steps, and can be visualized like large warehouses storing versioned code, ready to be "shipped" to be assembled into a new application.
- Software isolation using Docker can be drawn as a box. Multiple boxes can be stacked and deployed together in a cluster. Closely related to are immutable deploys that always build a new set of boxes, rather than modifying the existing one.
- A reactive system useful for modeling modern user interfaces can be described as a directed acyclical graph (the user is the missing link that would close the cycle)
- Functional programming concepts usually deal with functions, but also with "boxed" types like Monads. Visualizing these helps to understand the modern JavaScript, Elm and Haskell languages.
- A typical developer's expertise is a T-shaped figure, and often a little investment in related vertical "bars" can be extremely beneficial. In particular, the knowledge to install a library or an application can be modeled as a pyramid. By making the pyramid's layers thinner we can achieve reusable software.
- A right abstraction goes a long way in making a concept simple to understand.

This presentation shows the shapes that helped me be more productive and explain my work to others.

Browser is the new server

We see the great technology unification, with the boundary between the server and the client (browser) becoming blurrier every day. Who has time and budget to write separate code bases? In this presentation I will show the ultimate combination of NPM's two most popular packages: Browserify and Express; and their product that allows to move the complete server to run inside the browser's ServiceWorker. It is like server-side rendering but inside your browser, and even runs when JavaScript is disabled!

I have implemented several unusual hybrids of server and browser in these projects

- Run Express server in your browser using "express-service"
- Transpile missing features in the browser using "babel-service"

Versions of this presentation were given at:
- NodeFest Tokyo https://slides.com/bahmutov/browser-is-the-new-server-nodefest
- NodeConf.eu https://slides.com/bahmutov/browser-is-the-new-server https://www.youtube.com/watch?v=5zOaN_FYXwk