Are too many design and product considerations bringing you down? Learn how to simplify the conversations around feature developments with performance budgets! In this talk, you’ll hear why performance budgets are useful, as well as how to set them up, track them, and use them to keep your site performance under control!
Monorepos allow to subdivide huge enterprise applications into tiny and maintainable libraries. However, this is only one side of the coin: Prior to this, we need to find criteria for slicing our application into individual parts. Also, we must establish rules for the communication between them.
To provide a solution, this session looks into Strategic Domain-driven Design. Using an Angular-based case study, we investigate the idea of the ubiquitous language and the bounded context, sub domains and context mapping. After this, you learn how to implement those ideas for Angular using a monorepo. Along the way, we also discuss approaches for reducing coupling between the specific parts of our monorepo.
At the end, you'll have both a technical solution as well as an appropriate methodology to build sustainable Angular solutions.
In the past few years, the approach to application state in React has been constantly shifting. Local component state has been complemented with global state management solutions like 'react-redux' or 'mobx-react'. The introduction of GraphQL libraries like Apollo brought new approaches to API caching (at least for GraphQL). With the release of React 16.3, the reworked Context API has been finally declared stable, adding a viable option for small and simple global states.
As a part of the forthcoming React 16.7, hooks will allow for easier use of local state as well as context in function components. Existing libraries are already discussing new hook-compatible APIs that will change the way we are using them. Furthermore, the upcoming 'suspense' mechanism is bound to spawn the birth of at least a few new libraries with focus on "perceived local" data fetching and caching.
Unfortunately, there is no "one size fits all" solution when evaluating these approaches. This talk will highlight the different types of state occurring in modern React applications and give recommendations on how to approach them with the tools currently available, with an outlook on the near future.
RxJS has become almost a standard in the emerging reactive Front-End world. If you're not using it right now, you probably played with a few operators. In this talk we're going to rewrite RxJS from scratch and take a look behind the curtains at the core components and the ideas behind this library. You'll learn how to build Observables, Subscriptions and Operator, then we'll introduce Schedulers and how they're used in RxJS. If you fancy Reactive Programming, live coding or simply learning something new then... this talk is for you!
Blockchain has been hyped constantly over the last two years. It has blown up with thousands of applications, many of which require a client. But what does it takes to integrate your front-end app with a blockchain? How is it different from "classic" back-ends like RESTful and RPC services? In this session, we'll explore this topic and find out how we can connect a single page (Angular or React) application with the Ethereum blockchain.
In this presentation, I will share the company’s story and lessons learned including:
what metrics and questions need to be considered to increase the chances that architectural decisions made today will not require re-write of the whole solution
how to balance the need to follow standards with the goal to provide a comprehensive tool set for application developers
how to pick a technology that remains relevant over a longer period of time
In this session, we’ll demystify this buzzwordy term, and explore how this approach to simplifying the technology stack can lead to shorter development times, with better performance and greater security.
We’ll see how the JAMstack is placing more power, more confidence, and more capabilities in the hands of designers, authors, and front-end developers.
And we’ll show how serverless functions can augment this stack to let us rapidly build interfaces and APIs to power sites that we’d be brave enough to share with the world.
Technology was never neutral; its social, political, and moral impacts have become painfully clear. But the stakes will only get higher as connected cameras will watch over the city, algorithms oversee society’s most critical decisions, and transport, jobs, and even war will become automated. The tech industry hasn’t yet earned the trust that these technologies demand.
Drawing on years of research for his new book "Future Ethics", designer Cennydd Bowles will illuminate the moral challenges that lie ahead for technologists, and discuss how practitioners and companies can create more thoughtful, ethical products for future generations.
React and D3 are UI tools designed for goals that sometimes collide as they both take control of the DOM in different ways. How can we make them work together? In this talk, we will see how developers can build React projects with the power of D3, using different techniques and the best libraries for your work or side projects.
Amidst the rapidly evolving software ecosystem, two technologies have categorically stood out: GraphQL and Serverless. On the frontend, GraphQL not only brings the robustness of a type system, it also brings a whole new way of using APIs. Whereas on the backend, serverless has brought in the next phase of infrastructure abstraction by delegating the runtime to managed services.
In this talk, we will demystify the concepts and motivate why these technologies are here to stay for the foreseeable future. We will begin with the challenges of API-driven applications and how the status quo falls short of meeting the challenges. We will introduce GraphQL and showcase its advantages including 1) strong type system, 2) flexible data gathering, 3) unified data access across disparate data stores and more.
Although GraphQL is a boon for API access, it does not encompass the complex domain of building modern internet-scale apps. We will make a case for async event-driven design for building modern apps. We will segue into using serverless as the infrastructure bedrock on which these apps stand. Being a natural extension of container runtimes, we will showcase the advantages of no-ops and free scale with unit economics of serverless.
Kapten was launched in 2012 and is now a major player within the French ride-hailing market.
Building applications for the modern web can be complicated, having to choose from so many different approaches out there. Everyone seems to be talking about using NgRx to solve all of their problems, but maybe I'm not ready for that. The idea of writing actions, reducers, effects, and selectors seems like too much work for me right now; there has to be some middle ground that I can start with!
Your presenter, Jesse Sanders, will be diving into an alternative approach to using NgRx for developing applications, while understanding concepts that can be applied later to such patterns. We will talk about how to design our components using a container and presenter pattern to help us maximize component reuse, while reducing complexity. We will also explore the service with a subject pattern that will allow us to reuse data between components. We will wrap it all up in our demo application that will show you how to bring it all together and apply this to your next project or refactor your existing one.
Testing front-end applications does not need to be a pain. In fact, testing React applications can be quite easy if you follow some rules. In this session, we will discuss the rules you need to follow for a simpler testing experience. Additionally, I will demonstrate how straightforward testing React applications can be.
Building a huge web application is challenging enough in itself, but developing it in an enterprise environment adds more complexity and raises several concerns. Nowadays, we often build such applications with Angular. In the web development world, modularization and component based development are all the buzz now, and monolithic architectures have a bad reputation. However, a new approach is emerging for codebases worked on by multiple teams: the monorepo.
We will talk in detail about the evolution of our Angular monorepo project, from a single application to a collection of related applications used by different functions in the company, made with built in Angular tools. We’ll look into how different development teams could cooperate working on the same codebase, keeping the code quality, and without breaking the other team’s application. We explore how we managed code reviews and permissioning for each part of the application. We will discuss the technical challenges we have faced as well: how the monorepo fits with the modularization principle, how we managed our CI process and kept build times at bay. Also, how we made certain parts of the app reusable to other teams without entering the monorepos themselves.
Cypress is a powerful E2E testing tool that allows developers to reliably test the functionality of their applications through the use of stubs and fixtures. This provides a powerful way to verify that an application will respond appropriately to the various situations as dictated by the business rules that have been implemented. Verifying functionality is critical, but what if we also want to verify that the way the application is displayed stays consistent? In the past, QA teams would be responsible for comparing the rendered interfaces between environments and manually deciding if the UI has changed too much to pass. Visual testing allows developers to capture base images for test scenarios and compare the current results against the base images.
In this talk, we will introduce you to visual testing, discuss the pros and cons, and show you how to successfully implement visual testing into your cypress tests using both free and paid tools. At the end of this talk, you will understand the benefits of visual testing and be ready to implement it into your next or current project.
For years, functional programming has been discussed in various mainstream environments again and again. Sometimes, new languages adopt functional principles. Or perhaps it re-enters the spotlight when there is a new focus on parallelization or comparisons of functional ideas with REST or MVC.
One of the biggest concerns when Angular 2 came out was the lack of an obvious upgrade path from AngularJS. This issue was largely addressed through the introduction of the ng-upgrade package.
But what does that upgrade path look like in an Angular 6+ world? What if you're starting from Angular 1.4 and your application doesn't have a component-based architecture? Or you need a non-standard project setup because your project is being built with something like Maven?
Come along to find out how you can drag your AngularJS app into the modern era - hopefully without too much kicking and screaming!
Dude, where's my server?! The word 'serverless' can be a bit misleading, but this architecture style has exploded in the tech industry and offers a myriad of unique benefits. Unfortunately, real comprehension of this concept has been abstracted away just as much as the server - turning the word 'Serverless' into little more than marketing jargon. In this talk, we'll define serverless, work through a sample, discuss the benefits/compromises, go over real-world use cases, and examine the serverless economy.
You know your Lookbehind Assertions, your fat arrows and asynchronous iteration. But if your code is assembling HTML to get delivered to a user's browser, how much do you know about HTML's semantics? Choosing the correct HTML element rather than vomiting a "div" or belching out a "span" can greatly enhance the end users' experience, with no fragile extra code to write and maintain.
One of the co-editors of the HTML5.3 spec will take you on a magical treasure hunt around HTML, showing you marvellous gifts and hidden wonders that will also help future-proof your code, and turn you into a time-travelling Frontend Superhero, adored by millions*.
(* actual number not guaranteed. But your users will be happy.)
Taking over the world is not an easy challenge. It requires a good strategy and a powerful army. What better soldiers than a mass of obedient robots? You just need a way to issue them instruction via their BLE interface. But should you choose to build a web app or a native mobile app?
With Angular, you can do both; just add Web Bluetooth API to build a web app and NativeScript to build a native mobile app. Join this session to learn how it all works, to see how to get started, and to swear fealty to your new robot overlords.
This talk is all about data storage and data access. Although CQRS is quite a simple pattern to split responsibilities when working with data, incredibly complicated papers have been written about it! Event sourcing can be viewed as a natural extension of CQRS. However, in reality, a decision for or against it is independent and comes with its own consequences. In this session, Oliver uses practical examples to demonstrate implementation and combination of both patterns.
Heard of data streams? Of course! But do you know how they work or how to build a stream for your own data? In this talk, we’ll see the historical advancements in the data sharing economy that have led to a world of streaming. We’ll understand the DNA of data streams and build a publicly available open data stream for some example data(which could be your data) using Node.js and Ably DSX.
Erric Eliot said:
All JS developers should understand:
JS syntax, keywords, operators
Built-in APIs (e.g. Array methods)
But before that, people need to learn the programming basics (if, for loops, …) and functional or object oriented approaches. But then it can get confusing… because you have so many choices as a student (what to learn) and as a teacher (what to teach first).
You need to describe tooling, transpilers, es6, typescript, testing, and so on …
How do you make people feel they are able to catch up with the change and that they can contribute to the language and join the club (barrier to entry)? And don’t make me to talk about the fatigue. I am already tired of it.
Once upon a time, everyone was amazed by the newly introduced Angular CLI features. Two years later, there are a number of changes and improvements. Now developers can scaffold a library, add features, and update Angular projects automatically.
In this talk, I'll show you how these awesome new features work and which possibilities are available to Angular developers with the new CLI and angular.json.
How can we start using types in our Node.js server? Which technology should we use? How does this influence debugging and monitoring production applications? In this talk, I will give an overview about different technologies that enable you to use types in your Node.js code. I will show how developers can get started with each one of those technologies and talk about some of the overheads that they bring. I will also focus on how you can develop your code in order to support aspects such as long term code maintenance, debugging, and monitoring production applications by using tools like Source Maps and transpilers. At the end of this session, developers will be much more familiar with typing technologies and what is important to include in their projects.
One might think that working for brownfield projects might not be as much fun as starting something from scratch. But is this really true? In this session we'll learn how to integrate Vue.js into a legacy codebase. In the end, it is possible to migrate to it completely step by step, regardless if it is a whole website, a component library or a frontend microservice.
For sure, Progressive Web Apps (PWA) are one of the hottest topics on the web today. A PWA should feel like a real app, including the ability to show push notifications.
In this talk, Thinktecture’s Christian Liebel (@christianliebel), a member of the W3C Web Platform Working Group, will show you how to implement push messaging in your PWA or website using the Push API, including a look at helpful libraries and third-party services. As a part of Google’s Project Fugu, push notifications will get even better thanks to the advent of the Badging API.
The Angular and NativeScript teams have teamed up to create a new way to share your code between web and mobile apps with Angular and NativeScript. It allows you to easily share the business logic of your app, while also providing you an intuitive way to separate the code that is different between the platforms. The ability to share code between your Angular web app and Native mobile apps has never been easier (or more important). Who has the time to invest resources into separate apps for web, native iOS, and native Android?
In this talk, you will learn how to take an existing Angular Web project and add NativeScript to it by converting it to a code-sharing project. Then, we will go through a few steps of converting individual components and modules into a code-sharing structure.
Node.js is a very popular server-side framework that is slowly becoming the main platform for developing server-side applications. A lot of phrases are mentioned when developers talk about Node.js, such as 'Single process with event loop', 'Non blocking IO' , 'generational garbage collector', and more. But what do those phrases mean? Is Node.js really single threaded? How do the event loop and other internal mechanisms of the platform really work?
In this talk, I will give an overview on some of the platform internals. We will do a deep dive into the event loop, how it works, what its different phases are, and how it enables non-blocking IO. And, of course, we will answer the repeating question - is the event loop single threaded? We will also talk about the JIT compiler and the v8 engine. The session will end with a look at the garbage collector mechanism, the different algorithms that exists in each garbage collector phase, and how we can monitor our software to start detecting memory leaks.
Nuxt.js is an opinionated framework based on Vue.js that excels when it comes to running the same codebase both server-side and client-side. In this talk, we will focus on how it encourages convention over configuration and what kind of projects it suits best. Also, we will power up our code from a rather static (but very fast-loading) website to a full-blown SPA directly in the browser.
Are you ready for a wild journey through modern day web-augmented reality? On this trip, we'll tour through what X-Reality (the X stands for extended) has to offer developers. Our main stops include a planet called Three.js, where we'll meet the 3D models that inhabit the real world. We'll also take a quick look at its satellite, Mozilla's A-Frame. And no trip would be complete without visiting Apple's AR Quick Look. So take a seat, fasten your seat belt, and let’s go!
Angular offers great possibilities but also great challenges in the front end development landscape. If an application grows, the question of state management comes up sooner or later. But what exactly is stateful and stateless? What are container components and presentational components? And how can I manage the state of my client side application? Tools like NgRx can help us design our application in a clean, nice and reusable way; especially in big applications, they can help provide a better overview and understanding of your software. In this talk, Fabian Gosebrink will show how to solve the state problem and manage an application with NgRx to build a maintainable architecture even in big enterprise solutions.
Are you experienced with Angular but also need to do some back-end work? Why not choose a framework that has the same terminology and offers TypeScript support? How can these two frameworks integrate with each other and run on the same server?
Angular developers are lucky to have several options for handling service workers in their progressive web applications. The first option is 100% native to Angular and created by the Angular team: Angular Service Worker (NGSW). The second alternative is a framework-agnostic library called Workbox. Both approaches are robust, convenient, and unique!
In this session, we'll go through the pros and cons of implementing a PWA with Angular Service Worker or Workbox, as well as the main features of each choice and the necessary application lifecycle management requirements. When we're through, every attendee will be able to determine which approach is easier to start with, which library is simpler to use, and which resulting PWA is more convenient to maintain.
Ready for others to benefit from your integrations and code? You'll probably need OAuth 2.0, but building your first OAuth flow is about as fun as stepping on Legos. In this talk we'll break down how to build an OAuth flow, then dissect an OAuth implementation done in a node.js CLI; a challenging use case that will make OAuth 2.0 feel more approachable than ever before.
Web components were first proposed all the way back in 2011. Since then, they’ve been kicked around without really getting much traction until recently. With the rise of components in frameworks, a new standard that is (almost) supported by all modern browsers, and support from (almost) all major frameworks, web components are suddenly looking a lot more appealing.
Let's have a look at how and why you might want to use web components. In this session, we'll look at how they compare with framework components and when you might want to use one or the other. We'll take a deep dive into custom elements and shadow DOM, see how they work on their own, and how you can combine their powers to create new, better superpowers.
In this introductory workshop, we will take a look at how to use both React and TypeScript and discuss some of the bigger pitfalls and challenges in bringing these two technologies together. We'll wrap up our day with a discussion on the future of the React ecosystem.
Angular, Google’s popular application framework for modern web-based solutions, offers developers component orientation, static type checking, and a breath-taking performance. By leveraging the single-page application architecture as well as modern web standards, it makes the creation of ambitious and enterprise-scale applications very easy.
This workshop showcases the possibilities of Angular and introduces it with an example application. We will go over the fundamental building blocks and discuss the kinds of architectural decisions developers will have to deal with when building maintainable enterprise applications.
Web Platform is amazing. It is becoming more and more performant, feature-rich while keeping its universal nature. We call “progressive” the web apps we build using the latest browser APIs, allowing us to achieve a totally new level of user experience. In this workshop, we’ll focus on what Angular, as a framework, contributes to the PWA concept.
During the full day of training, you will learn about: PWA concept pillars, Service Worker API fundamentals, current platform’s PWA support (and workarounds when needed), and Workbox library - the industry standard in the automation of PWA tasks. I will share lots of practical tips & tricks, both technical and UX, review real-life PWA examples, explain how to avoid common pitfalls, and how to deal with edge cases.
On the practical side, I will teach you how to build a Progressive Web Application. We start from the “regular” application, and in the form of discrete, documented steps, you will learn how to add PWA features one-by-one using Workbox. As a result, everyone will have a fully-featured, installable PWA ready to delight its users with its offline experience, optimized networking and push notifications. This is not about hitting the numbers though - this training is meant to provide extra value for our users, but 100% score in the Lighthouse is also guaranteed!
Last but not least, in order to help you get ready for the next steps, I will speak about what’s coming to PWA-related APIs and what’s on Workbox's roadmap.
Web development has changed dramatically in the past few years. Today, more than ever, when you build your front-end application, you will probably want to reuse components across your application. But HTML elements are very limited, so what can we do?
In this full day workshop, we will dive deeper into ways you can componentize your front-end. We will start by presenting the Web Components standard. Later on, we will delve into the Stencil compiler, which can help you build web components faster and with ease. At the end of the day, attendees will learn how to work with different data flow patterns to make components interact with each other.