June, 2020
JSNation Live
Online

JSNation Live 2020

The biggest JS conference in the cloud

Discover the future of the JavaScript development ecosystem and get connected to its stellar crowd! Attend JSNation Live, a 3-day conference on all things JS, gathering international software engineers in the cloud.

This edition of the event has finished, the latest updates of this JavaScript Conference are available on the Brand Website.
I See What is Going on: Visual Testing for Your Components
35 min
I See What is Going on: Visual Testing for Your Components
Gleb Akhmetov explains how to visually test React components, emphasizing the importance of addressing climate change and collaboration. He discusses component testing, styling, and the challenges of CSS changes. Gleb highlights the use of image snapshots for visual testing and the importance of controlling data for accurate results. He also discusses using Docker for consistent visual testing and the support for multiple browsers. Cypress is focused on flake-free testing and has plans for test retries and new features in the roadmap.
Transforming GraphQL – Infrastructure as Code for Front End Developers
27 min
Transforming GraphQL – Infrastructure as Code for Front End Developers
This talk is about building full-stack cloud applications as a front-end developer using GraphQL and the GraphQL Transform library. It covers the three main parts of AWS Amplify: hosting, CLI, and client libraries. The GraphQL Transform library simplifies building a GraphQL API by handling schema creation, database interaction, and resolver mapping. It demonstrates how to use GraphQL transforms to build a GraphQL API with features like authorization rules, relationships, and local mocking. It also discusses the considerations for using managed services and the future of infrastructure as code with Amplify and other tools.
1, 2, 3... Fastify!
36 min
1, 2, 3... Fastify!
Fastify is a web framework that started in 2016 and is easy to use. It supports logging, splitting the app into separate files, and auto-loading routes. Fastify also provides authentication and user login functionality. It differs from other frameworks by fully supporting Async Await and the latest JavaScript features. Matteo Collina, the speaker, prefers Vim and T-Max as his IDE and enjoys Italian pizza as his comfort food.
Module Federation in Webpack 5
32 min
Module Federation in Webpack 5
This Talk discusses module federation in Webpack 5 as a scalable solution for shared dependencies in large applications. Module federation allows separate builds for different parts of an application, reducing build time and deploy delay. It features exposed and shared modules, asynchronous loading, and container creation. Module federation supports container orchestration techniques and aims to integrate with ECMAScript modules. However, optimization and sharing in module federation may impact code size, and careful evaluation is necessary. Updating containers can be managed through active testing for stability.
When You Think There Is No Time for Learning or Coding
8 min
When You Think There Is No Time for Learning or Coding
This Talk discusses the speaker's coding journey, forming habits, and finding time for coding. The speaker recommends participating in the 100 days of code challenge and learning HTML, CSS, JavaScript, AngularJS, and D3.js. Building small projects and games is helpful for learning and growth. The importance of forming habits and overcoming resistance is emphasized, along with prioritizing consistency and focusing on details. Finding time is about reclaiming the 24 hours we all have and making small changes to accommodate coding. Keeping a log or notebook is important for tracking progress.
Using Remote Joins to Create a Unified GraphQL API for Your Company
9 min
Using Remote Joins to Create a Unified GraphQL API for Your Company
Hasura's remote joins feature allows you to combine multiple data sources into a unified GraphQL API, including Postgres databases, GraphQL APIs, and REST APIs. It enables joining data across different databases and integrating with external APIs like Stripe and Auth0. Hasura pushes down SQL to join data across databases and can even integrate with REST APIs using actions. With remote joins, you can query and fetch data from multiple sources, enriching your GraphQL schema and creating powerful data relationships.
Building React frontends for WordPress
8 min
Building React frontends for WordPress
Frontity is a framework that combines WordPress and React to create modern user experiences. It is easy to use, SEO-friendly, and extensible. The framework has achieved great results for publishers, increasing page views, organic traffic, and user acquisition. Frontity Pro has served millions of page views worldwide and provides a seamless content management experience. Visit frontity.org to learn more and join the community.
Javascript Tooling - The Evolution and Future of JS & Front-end Build Tools
11 min
Javascript Tooling - The Evolution and Future of JS & Front-end Build Tools
Today's Talk covers the evolution and future of Javascript tooling, including dependency management, transpiling, bundling, minifying, and module management. Webpack has grown in popularity and offers features like hot module replacement and code splitting. Other build tools like Rollup, Parcel, Snowpack, and ESBuild are also discussed. The Talk explores browser import and bundling-free approaches, and emphasizes the dynamic nature of the JavaScript ecosystem with evolving tools and project-specific trade-offs.
PoseDance: Build a TikTok Trainer
31 min
PoseDance: Build a TikTok Trainer
In this Talk, Jen Looper introduces PoseDance, a TikTok trainer app that uses PoseNet for pose detection. She discusses the challenges of scoring and the potential for medical applications. Jen also mentions the use of Azure Functions and PlayFab for the app's backend and deployment. The Talk concludes with a code tour and an invitation for contributions to improve the scoring system.
From Code to Scale! Build a Static Web App in Minutes
31 min
From Code to Scale! Build a Static Web App in Minutes
The Talk discusses the development of web applications and the challenges involved, such as code management, CI/CD, routing, security, and scalability. It explores the use of Azure Static Web Apps for building and deploying static web apps with features like authorization, authentication, and serverless technology. The process of creating a static web app on Azure Portal is demonstrated, along with resource creation, deployment, and custom domain setup. The Talk also covers API deployment, authentication, authorization, and role-based access control. Azure Static Web Apps is highlighted as a globally distributed solution for building web apps.
Composition API: a Quick overVue
28 min
Composition API: a Quick overVue
The Talk introduces the composition API in Vue 3 as a better option for composing reusable features compared to mixins and scope slots. It explains how to abstract search functionality using the composition API and demonstrates the creation of searchQuery and searchResultsQuery objects. The Talk also covers running breed search in the mounted hook, sorting results using computed properties, and the benefits of the composition API in terms of code organization and reusability. It concludes by mentioning the upcoming release of Vue 3 and the advantages of the composition API.
How Does the TypeScript Team Try to Avoid Negative Effects on the JS Ecosystem
33 min
How Does the TypeScript Team Try to Avoid Negative Effects on the JS Ecosystem
TypeScript's influence in the JavaScript ecosystem and its alignment with JavaScript's goals and principles. TypeScript's impact on the industry and its popularity among JavaScript programmers. The goal of TypeScript to innovate in types without introducing new concepts to JavaScript. The challenges of running TypeScript on other people's code and making it a native browser language. TypeScript's compatibility with JavaScript and its aim to be a thin layer on top of JavaScript. The efforts to improve support for JS and JS docs and the pain points of transitioning to TypeScript. The accessibility work in TypeScript and the absence of real competitors in the market.
Say No To Complexity With AlpineJS
33 min
Say No To Complexity With AlpineJS
Alpine.js is a lightweight framework for creating JavaScript behavior directly in markup. It has 13 directives and 6 magic properties, making it like Tailwind for JavaScript. The upcoming version of Alpine will focus on performance and optimization. It sits between jQuery and Vue, offering reactivity without compilation. Alpine.js is robust and resilient for DOM manipulation, and works well with Laravel for localization and internationalization.
The State of Angular
36 min
The State of Angular
This Talk provides an overview of Angular and its development stack, including the Component Development Kit (CDK) and UI components. It discusses the balance between static and dynamic systems and the benefits of using TypeScript. The Talk also highlights the evolution of Angular, version 10 updates, and the deployment of Angular Universal applications. It mentions the ease of updating Angular and the incorporation of web components. The future of frameworks, external contributions, and monorepo setups are also discussed.
Emoji Encoding, � Unicode, & Internationalization
34 min
Emoji Encoding, � Unicode, & Internationalization
This Talk explores the UTF-8 encoding and its relationship with emojis. It discusses the history of encoding, the birth of Unicode, and the importance of considering global usage when building software products. The Talk also covers JavaScript's encoding issues with Unicode and the use of the string.prototype.normalize method. It highlights the addition of emoji support in Unicode, the variation and proposal process for emojis, and the importance of transparency in emoji encoding. The Talk concludes with the significance of diverse emojis, the recommendation of UTF-8 for web development, and the need to understand encoding and decoding in app architecture.
Making Games in React
30 min
Making Games in React
This Talk provides an introduction to game development in React using React 3.0 Fiber and three.js. It covers topics such as creating 3D objects, understanding meshes and lighting, adding interactivity and physics, controlling objects with mouse input, and creating enemies. The speaker emphasizes the ease and power of React 3.0 Fiber for game development and encourages experimentation and learning through examples and resources.
Going Live from a Browser...with Another Browser
8 min
Going Live from a Browser...with Another Browser
This Talk discusses live chat and live broadcast using WebRTC and RTMP. It explores running WebRTC on a server via Chrome and alternative approaches like using GetUserMedia and the Chrome.tabCapture API. The use of a whole Chrome instance for WebRTC and RTMP broadcast is also discussed, highlighting the pros and cons of this approach. The Talk recommends checking out Nick's talk from All Things RTC for more information.
When Worlds Collide: Frontend vs Database
8 min
When Worlds Collide: Frontend vs Database
Tyler Hannon discusses the importance of choosing the right database and explains the ACID acronym, which stands for Atomicity, Consistency, Isolation, and Durability. He also highlights the challenges and benefits of distributed transactions in Fullstack applications. Various approaches to solving database challenges are mentioned, with a focus on FAUNA and its CALVIN protocol. The goal is to have a fast, reliable, and serverless database that meets specific requirements.
ESNext: Proposals To Look Forward To
9 min
ESNext: Proposals To Look Forward To
ES Next proposal stages include straw person, proposal, draft, candidate, and finished. Optional chaining and null coalescing operators are solutions for handling undefined and null values. Logical assignment and null coalescing operators are seeking advancement to stage four. Decimal type is introduced to address floating point math issues. Cancellation API and abort control are solutions for canceling promise execution. Pattern matching allows matching the shape of a vector and performing actions based on it.
What Does The Angular Say? 🦊
8 min
What Does The Angular Say? 🦊
Today's Talk is about using Angular, Web Audio API, and ToneJS to create custom sounds and instruments in a web application. The speaker demonstrates how to create an audio context, connect sources, and add filters to modify the sounds. They explore different elements in the ToneJS library, such as synthesizers, parts, noise, and audio tracks, to enhance the user experience. The Talk also showcases instruments that play cat and dog samples according to the pitch. Overall, it highlights the possibilities of using these technologies to create unique and interactive audio experiences in web applications.
Adaptation of the E2E Tests for a Big Project
8 min
Adaptation of the E2E Tests for a Big Project
Vadym Kukhtin
Devesh Jadon
2 authors
This Talk introduces the adaptation of end-to-end testing for a project, highlighting its benefits in improving resilience and calmness during deployment. The speaker mentions the team's size, daily pull requests, and the size of their codebase. They also discuss the use of cookies to test different versions of a feature on a page and their plan to improve by adding E2E tests to a CICD pipeline and consolidating tests in their monorepo.