I never thought it was so easy to create an application. Start using nx and you will be able to create an application in a few hours. This workshop will guide you through the setup and will build a basic application, with Authentication, CRUD operation and create a deployable product of it. We will set up tools to help your development process, like Swagger. If there is some time left we will easily integrate a WebSocket and maybe some microservices.
In this interactive workshop you will see a complete JavaScript application system developed during the day, in several steps. Various modern components including a microservice architecture, NoSQL, CQRS and Event Sourcing server-side, React and Redux on the client and real-time web technology in between.
According to statistics from NPM, React has a market share of 60 percent. That’s reason enough to take a look at the frontend library created by Facebook. In this workshop, we dive into the world of React and develop a fully-fledged application. From using JSX to building and architecting component hierarchies, to the Hooks API, you’ll learn all the important facets of the popular library. You will also get an insight into the React universe, which includes application navigation, testing, and advanced methods for state management.
After this workshop you will have a basic understanding of the features and patterns of React and you are able to work on applications written in React on your own.
JavaScript Fullstack Day will get you in touch with all tools, technologies and techniques which are key to successful modern JavaScript development — from choosing the right frontend framework to best practices for backend development, from sophisticated engineering tools to finding your JavaScript language of choice!
Come to Fullstack JavaScript Day and benefit from our speakers’ expertise who provide valuable insights from their web projects and reveal their „secret tricks”.
Fullstack JavaScript Day is divided into four units, all of which cover selected aspects of the JavaScript universe comprehensively.
There is a stereotype of programmers as being antisocial and difficult, and unfortunately many of us take on this attitude as if it comes with the job – but it doesn’t have to be this way! I know it from experience, because I’ve been an angry, judgmental know-it-all, and I’m ready to tell you how I completely changed my attitude and refactored my life.
In this talk I’ll explain how anger and fear are the root causes of our aggressive behavior, how these feelings manifest as judgmental comments online, bullying in the workplace and ultimately keep the tech community toxic and stunted. I’ll show you how embracing compassion, respect, and empathy will make you a better programmer and a happier person.
Design Systems is something every UX team is working on, planning to work on, or at least is talking about. But what does it mean for a developer to implement a new design system for the company products? Is it also better for the developer? In this talk, I will share my experience in implementing a design system. How do you share design tokens in the organization? How do you create a component library and separate the visual layer from business logic? How do you keep sync between design and code? I will try to answer these questions, using code examples and relevant tools.
Redux is a modern, lean, front-end library for state management based on good old messaging design patterns that have been used on the server side for many years. By choosing it as your state management solution, you have to change your state of mind and start programming with events. Through this session, we will learn practical advanced patterns and techniques for solving real-world state management problems using vanilla JavaScript and help from Redux.
Are your apps fast and stable when the network isn’t? Let’s take a deep dive into progressive web apps and the offline first approach!
I'll show you some tricks on how to handle offline state and manage your app and its resources in various network conditions. We'll build fast and reliable apps using Angular and PWA features. During my presentation, I will show how to build PWA using Angular with Offline First approach. I'll introduce into fundamentals of this strategy and show how to manage app’s resources in various network conditions, how to use PouchDB and CouchDB for data sync and make an app fast and reliable.
Progressive Web Applications (PWAs) are the state of art of modern web solutions. In this session we will analyze PWAs from different perspectives and describe which tools we can use to develop them with ease. By choosing the proper caching strategies it is possible to drastically improve the performance of our web site, providing data even without a valid network connection. We will then proceed seeing how to overcome the limitations of the Cache API in order to create a truly seamless experience. In addition, push notifications will be presented as a powerful mechanism to retain and re-engage our users.
Where do you store your credentials and secrets? In .env files or in environment variables, or even worse, in config files? Are your primary AWS keys shared amongst developers? Do you still have SSH keys from former employees on your servers?
If your answer is "yes" to one or more of these questions you probably haven't heard the term "secrets management". In this talk, we will look into managing secrets in development and operations and expose the problems related to them. I will give you an overview of the current state of techniques to mitigate these problems and we'll take a brief look at how an open source tool like Hashicorp Vault can provide a solution to managing secrets in the years to come.
No setup, no frameworks, no builds, and no transpilations. With feature-rich and standard compliant browsers, the "bare metal" strategy becomes not only viable but also extremely productive. In this session, I will create a web app "from scratch" with web standards like Web Components, ES6+, plain old CSS, and (almost) without any use of external dependencies. Challenging questions before, during and after the session are very welcome.
This talk will guide you through the key techniques of JavaScript, images, web fonts and tools that you can use to maximize the performance of your site.
Do you TDD or BDD? Why not both? Come learn the “Double Loop” workflow and discover how you can use both Behavior Driven Development and Test Driven Development to write well designed, tested and documented code. Double Loop works for lone engineers, small teams or entire product departments. I’ll cover the steps you’ll take in the workflow as each role as well as tools for executing Double Loop.
Deno is a new runtime for Javascript and Typescript created by Ryan Dahl - the original creator of Node.js. In his famous talk "10 Things I Regret About Node.js" given in 2018 he listed some of the Node.js design mistakes. Deno is supposed to fix these problems. Through this talk I will show you the core features of Deno and compare it with Node.js, using code examples. Then I will try to answer the talk title question together with the attendees.
JavaScript as a language changes. But learning the latest features of the latest ECMAScript implementation isn't everything. New Web APIs are constantly added to the browser. Did you know that your browser can process audio feeds, that it can connect to Bluetooth devices, or that it can send you notifications? Vendors are extending the capabilities of browsers more and more, especially for mobile devices. In this talk, attendees will learn some of the latest features available in their browsers right now and some that will be available in the very near future.
For years now, functional programming has been discussed in various mainstream environments again and again. Sometimes new languages adopt functional principles, then it’s been parallelization as a focus or comparisons of functional ideas with REST or MVC. Oliver shows in his talk, how functional programming has become an everyday approach for JavaScript. There are lots of practical examples and you'll take away some ideas for a more expressive, efficient and compact programming style in any environment!
Many modern JavaScript frameworks render their HTML content on the client-side assuming that every environment that is accessing their pages is as modern as they are. However, many search engines – including Google Search – do not behave exactly the same as a user’s browser. In this session, you will learn some facts about Google Search, its rendering pipeline and the various tools which can help you diagnose the gap between what your users see versus what Google Search sees.
So you’ve finally secured your APIs. It uses JWT because everyone else does. But is it secure? JWTs are the new great thing that everyone is talking about, but you need to use them correctly. During this talk, we will see how we can use various attacks to hack into OAuth systems that use JWTs as a token mechanism. From token validation to brute forcing HS256, by seeing the attackers’ point of view the attendees will learn how to better defend themselves and make more secure servers.
In Node.js, we can use WebAssembly modules and native C++ addons. If your app has performance critical parts, should you stay in JavaScript? Or write a native C++ addon? Or use WebAssembly? We’ll look at how these options compare performance wise and which one is best for different workloads. So the next time you need to optimize for speed, you know your options.
The growth of internet usage in developing countries has been very uneven, with adoption focussing mainly in urban centres. But this is a trend that is rapidly changing in areas like South Asia and Africa. As billions of users get added to this ecosystem by 2020, many of them using technology for the first time, it brings with it a ton of new challenges. As the internet expands to accommodate a larger user base in Asia, huge gaps are created between what the consumers want and what engineers build as a digital solution.
This talk focuses on exploring how we can give the best performance for users from these areas by considering their usage patterns and behaviours, with a special focus on mobile performance
Because they will be the users of tomorrow.
An organization with a primary digital product that lacks even basic data security practices is living in a Utopian world where people leave their safe open and never expect a burglar to walk in. With the advent of SaaS, companies are relying more on more on third-party services for CDNs, analytics, recommendations, loyalty, advertisements, email marketing, etc. But not so much effort is being put in ensuring what data is being shared with these third-parties. As an example: The URL is the most commonly tracked piece of information, the innocent choice to structure a URL based on page content can make it easier to learn a users’ browsing history, address, health information or more sensitive details. They contain sensitive information or can lead to a page that contains sensitive information. But just by adding a simple code snippet in our webpage, for analytics, fonts, etc is enough to leak sensitive data. This talk will focus on creating awareness among developers: How websites are leaking sensitive data with third-parties, how can we audit our apps, to detect such leaks and how we can prevent leaks of sensitive data to third-parties.
WordPress is still the most popular and powerful content management system with a massive, robust community behind it. In this talk, I’ll show you how to use WordPress as a headless CMS, and build a modern and performant front-end for it using Angular.
In vielen React-Applikationen hat sich der Trend etabliert, die Global-State-Managementlösung (meist Redux oder MobX) zu verwenden – als Allheilmittel für alles, was auch nur im entferntesten mit State zu tun hat. Aber während der Gedanke insbesondere angesichts unzähliger Tutorials naheliegt: irgendwie fühlt es sich meist unhandlich an. Außerdem arbeiten wir damit "an React vorbei" und machen oft genug React-interne Performanceoptimierungen kaputt.
Zum Glück gibt es für viele Anwendungsfälle inzwischen bessere Lösungen, mit denen wir den Herausforderungen einer modernen React-Applikation beikommen können – am Ende bleibt ein globaler State, den man auch guten Gewissens so nennen kann.
Der Talk stellt verschiedene Arten von State in einer modernen React-Applikation vor und analysiert, welche Spielweisen besser nicht in den globalen State gehören (natürlich auch: wohin denn dann?). Beispiele, wo der globaler State weiterhin eine wichtige Rolle spielt und wie wir ihn klüger nützen können, runden den Vortrag ab.
Unlike classic web applications, single page applications have an application state – and this must be managed to avoid inconsistencies and data binding cycles. That’s why developers of single page applications have to deal with state management. In this session, you’ll learn more about this topic and see how you can integrate state management into your Angular applications to make them maintainable long-term.
Cornelia Rauch talks about different state management principles and patterns as well as their advantages and disadvantages. Live demos will introduce different frameworks to help you manage the complexity of your application. At the end, you’ll know the principles behind state management and have all the tools you need to develop a long-term solution for your application.
When developing any SPA application you like the fact that you get apps that are fast and snappy. There are other problems though. Your app might take longer to load than usual and your search engine is struggling to crawl your app and your SEO suffers for it.
The solution to this for Vue.js is called Nuxt.js. Nuxt.js is a higher level framework on top of Vue.js that allows you to easily create Universal apps. Universal apps that are pre-rendered on the server and thereby have a much smaller bundle and has static files the search engine can crawl without a problem.
Let's explore how you build apps with Nuxt.js and what properties and methods you have at your disposal to make this an enjoyable experience.
Additionally Nuxt.js allows you to share code between server and client, sounds exciting right?
In order to start out with machine learning, you typically would need to learn Python, TensorFlow, Jupyter Notebook, etc. But what if we could run our machine learning straight in the browser? This can be done through Tensorflow.js. In this session, you will get an introduction so that you can use it in your own projects.
Javascript is one of the most popular programming languages. Its flexibility has impacted the way the web is being built. Let's build a full-stack application with Javascript. We'll touch on integrating with Docker, MongoDB, Next.js, GraphQL, React, machine learning and Internet of Things
Node.js is one of the most popular frameworks for writing server side applications now, and machine learning is rapidly gaining popularity. More and more problems are being solved by using machine learning tools. The use of machine learning solutions is spreading, and it is not limited to researchers. Software developers are also starting to gain ML knowledge and skills. In this talk, I will give you an intro to machine learning in Node.js. We will go over some machine learning fundamentals, the useful libraries that you can work with when writing an ML server in Node.js, and architecture tips about how you should design your server according to the nature of machine learning systems combined with Node.js capabilities. After this session, you will have a good basis to get into the area of Machine Learning and how to write and design your server.
You've got strange characters like "�" or "ö" displayed in your application? Yes, handling non-English characters in application code, files and databases can be a challenge, to say the least. Whether that’s German umlauts, Cyrillic letters, Asian glyphs or emojis: It's always a mess in an international application. In this session, you will see why that is and how handling characters evolved in computing. You will also see how handling characters in applications and databases can be done less painfully. And don't worry when EBCDIC, BOM or ISO-8859-7 are Greek to you and your Unicode is a bit rusty: We’ll have a look at them, too.
TypeScript adds static typing to JavaScript - and you can use it when developing applications with React. I will introduce you to the basic concepts of static typing and will show you how to use TypeScript with React. We are going to discuss not only the benefits but also the downsides of this approach. I will also show you how you can benefit from TypeScript when using state management libraries such as Redux.
Node.js has become more and more, and lots of enterprise and B2C applications implement their servers with Node.js. It is becoming important to know what the possible vulnerabilities in your Node.js server are. In this talk, I will give some security tips regarding Node.js. I will show you what code can be vulnerable using built-in Node.js functionality, and I will talk about the alternatives. I will also present several packages that can help you find vulnerabilities in your code and in your dependencies much more quickly and pass your penetration testing much faster. As a developer, after this talk you will be able to write more secure code in Node.js.
Join us to learn the most villainous code smells you will find in most Angular applications, along with an elegant solution for each one of them.
In this talk, we will share some of the pitfalls Angular developers easily fall into, why they emerge, and how you can prevent them from happening again. This talk touches base on:
• Component Logic
• Architecture
• Conventions and Standards
• Module Separation
• RxJS
The content of this talk also takes into account a survey conducted with Angular experts worldwide, who shared the code smells they considered risky. Join us and find out the results!
During the last decades, a growing trend has been to put more and more functionality into the client by using the latest and greatest JavaScript framework. But what if we could be using native code in the browser in order to run computations faster and potentially reuse code from the backend in the frontend? Enter WebAssembly. WebAssembly is a new web standard which enables you to run native code as part of your current JavaScript framework. This talk will give you a thorough understanding of what WebAssembly is and how you can use it in your project. We will cover a practical example writing our WebAssembly using Rust. We will go through everything from writing your web assembly code to publish it as an npm package and finally use it in an existing web application.
Behind every great tool is a great library. Schematics is the unknown hero behind Angular CLI and also some upgrade tools. Ever wondered how scaffolding a component really happens or how you could insert some code in just the right place in the code file? Wonder no more. This session is about showing what Schematics can do and how you can build your own Schematics that will scaffold or change code in existing files or something else. It does everything to your bidding.
Angular offers many possibilities when it comes to the separation and architecture of your application. There is often code that you not only want to reuse within your application but also make available to other applications in your organization or via package managers such as npm over the Internet. This is where Angular's libraries come in. In this talk, Fabian Gosebrink will explain how to create Angular Libraries, what the Angular Package format is good for, and how we can move code from an existing application to an Angular library in order to reuse the code across multiple applications. This makes the maintainability and architecture of Angular applications child's play.
The world of virtual reality allows us to build new 3D interactive spaces that we can fill with anything we want - like the art of the great Renaissance masters. More into Cubism? With a quick click - now the gallery is full of a completely different genre. With new AR features, we can actually build the gallery in our own space - and just as easily swap out the art - all in our browser! In this talk, we’ll walk through the steps to build a virtual ARt gallery, with web technology available today, but also take a peek at the new WebXR technology that is coming to our browsers soon!
Participating in conferences and learning from experts is great, but as a community, we are missing a lot when it’s the same faces every year, everywhere. We have to do our best to include everyone from a diverse background as speakers and learn from their experiences. This talk will prove you have what it takes to become a speaker yourself and will give you practical advice to start your career as a speaker. We will talk about overcoming impostor syndrome and eliminating self-doubt like “I don’t know what to talk about” and “I can’t talk in front of people”.This is a fun, inspiring talk, and by the end of it, you will discover the super-hero speaker in you, bursting already with ideas for your first talk.
Testing JSX components can be quite tricky, especially if they include GraphQL queries. What if I told you it is possible to both test your GraphQL queries and mutations, while also testing the way they interact with your JSX components? This talk will show how you can push your testing principles to the next level by writing unit tests and integration tests that will use the type system of GraphQL. Not only can you drastically increase your test coverage after this talk, you'll know for sure that your data is flowing correctly through your application.
What do you do when you've just released your Node application but it’s not performing as expected? No need to worry. Node provides you with a hand full of tools to measure every performance aspect such as memory, computing time, and so on. In this talk, I’ll show you how to deal with the code in your application when it comes to performance problems and how to use the tools you’ve got. We will also cover some best practices to help you write applications that perform.
Ivy, Angular’s eagerly awaited ground-braking compiler, is primarily associated with smaller bundles and therefore better performance. However, Ivy has much more to offer, and many smart concepts provide the foundation for some much-anticipated future features.
See how Ivy improves your application beginning with Angular 9 and find out how its potential can impact your future architecture. We use a case study to explore a possible future without NgModules, the use of dynamic components or higher-order components, zone-less change detection, and new possibilities for lazy loading and plug-in systems.
In the end, you understand Ivy's potential and how to start preparing for it today.
Type systems like TypeScript are the next thing when developing JavaScript applications. They make sure that your props are passed in the correct form and shape throughout your application. Together with GraphQLs query language based on types, you can create the web application of the future!
Optimizing image content for every browser and device size can be difficult. Random cropping of images can lead to losing context and features (sometimes as extreme as lopping off the heads of your subjects). In this talk I will present how AI can be used to identify the important content in each image, allowing for smart cropping of images. This allows us to optimize images further than previously possible, shrinking page size and speeding up page load times.
Structural directives are a powerful feature in Angular that allows us to dynamically change a component view structure. As with directives, a structural directive is used as an attribute on an element in the component template and the logic is implemented in the directive’s controller class. An asterisk denotes a structural directive and is the fairy dust for the magic that happens behind the scenes. Angular has a DSL (microsyntax) for the string assigned to a structural directive that allows us to interact with the directive in a natural and expressive language. In this talk, we will look at "<ng-template>", "TemplateRef", view containers, and "ViewContainterRef", the building blocks of structural directives. We will also look at the microsyntax and have a go at creating custom structural directives.
Nest is a powerful web framework for Node.js, which allows you to easily build efficient and scalable applications. Nest is built with well-known libraries – Express and socket.IO. Let’s create a fully working app together!
These days it is an obvious choice to set up applications using reusable components. But how do you make sure that your component library does not become a giant mess when your application grows and your team scales? How do you make sure that the so carefully constructed design is maintained over time? And most importantly, how do make sure that everyone is onboard and uses it properly?
Luckily, this is where design systems save the day!
In this hands-on session I will explain how to effectively set up a design system in order to design and (re-)build applications faster, and how design systems should be used in order to allow scaling and flexibility in your application and team.
You will learn how concepts like integration testing, component composition, design tokens and atomic design can help you in this process. On top of that I will show you how to use your design system as a NPM package in your application, and why a common language within a team is the foundation of any design system.
In this talk, we will discuss why Serverless has become a more and more common approach as Cloud becomes the default place to host your apps. Serverless not only lets you focus more on the code and deliver more business value, but it promotes a new way to think about your apps and how they communicate, namely with events or messages. To add to that, Serverless represents a very cost-effective option since you are only billed for the time they carry out work. That makes them ideal for seldom ran tasks and a great candidate for startups trying to keep costs low.
We will look at how we can author Serverless functions using JavaScript and deploy them to the Cloud, as well as two different ways of doing Serverless: namely Functions and Durable Functions. The latter lets us define long-running workflows.
Did I mention that they are fully managed and you don't need to worry about virtual machines, web servers, or another hosting? Just code and create value for your business.
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 those tiny 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, the bounded context, 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 have both, a technical solution as well as an appropriate methodology to build sustainable Angular solutions.
“JAMstack” is an emerging term which describes an approach to architecting and delivering sites as pre-rendered assets, and where necessary, enhancing them with JavaScript and services via APIs.
There has never been a better time for a fresh look at how we approach building and delivering web sites and applications. From the careful selection of JavaScript libraries and frameworks, to the use of emerging tools, services, and platforms. In this talk we'll explore how an application can be built to include pre-rendered user interface elements and dynamic APIs backed with data services. All without needing to manage or maintain a server.
A Progressive Web App with React isn't finished just by integrating a Service Worker. That task is completed automatically for you on the initialization of the project. However, the actual work begins just after this point. The PWA can be installed on a target device in just a few steps. With the right architecture, it is finally possible to make the application work completely offline. This requires the data that the components of your application need to be stored locally and kept in sync with the server. In addition to these aspects, the browser provides numerous other interfaces that bring the application closer to native apps. In this presentation, we will take a look at the steps that make an ordinary browser application a fully-fledged PWA.
In a snap, Angular Elements exposes Angular components as framework-independent web components. But it is only later, that the really interesting questions arise: What options are there for bundling Angular Elements and how does one deal with dependencies? Which polyfills do we need and when, and how can we lazy load Angular Elements on demand? How can Ivy help us and where are its limitations? What should be considered when using zone.js to change tracking and how to use content projection?
This session answers these questions in order to help you benefit from Angular Elements in your projects.
As front-end developers, we strive to build fast and fluid web apps. But how can you find performance problems or memory leaks? How do you profile a web app or an Angular oriented app? In this session, you will get to know how the browser works. Then, you will learn how to use that information to profile web apps and Angular oriented apps.
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 and 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.
Building and maintaining large, scalable JavaScript web apps isn't easy. So how do you build such things without being driven to madness? Using and combining proven JavaScript patterns will do the trick. In this one-day workshop, we'll discuss the patterns behind some of the largest JavaScript apps, such as Gmail and Twitter, and explore how to apply them in your own apps. We'll start from object patterns and then focus on module patterns, promises, timers, and more.
In this interactive workshop, you will develop a critical understanding for planning and implementing large enterprise applications with Angular. You will explore and work with approaches to structure huge applications like npm packages, Nx and the monorepo approach and micro apps. After this, you will deal with component design and reusable web components. For this, you will use several proven concepts and Angular Elements. In addition, this workshop will enable you to develop a well-articulated understanding for advanced authentication and authorization solutions that allows for single sign-on and can be used to integrate with existing identity providers like Active Directory.
The Web platform is amazing. It is becoming more and more performant and feature-rich while keeping its universal nature. We call the web apps we build using the latest browser APIs "progressive", 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.