The document provides an overview of a frontend training session. It introduces the trainer and outlines the day's schedule, which includes demonstrations and exercises on microfrontends, server-side rendering, Angular 8, web workers, Node.js, and GraphQL/BFF patterns. Attendees are instructed to fork and clone a GitHub repository containing exercise code. The document then expands on several topics, including descriptions of microfrontends, explanations of server-side rendering benefits, and concepts related to Angular, web workers, and GraphQL/BFF approaches.
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...Edureka!
This Edureka "Node.js tutorial" will help you to learn the Node.js fundamentals and how to create an application in Node.js. Node.js is an open-source, cross-platform JavaScript runtime environment for developing a diverse variety of server tools and applications. Below are the topics covered in this tutorial:
1) Client Server Architecture
2) Limitations of Multi-Threaded Model
3) What is Node.js?
4) Features of Node.js
5) Node.js Installation
6) Blocking Vs. Non – Blocking I/O
7) Creating Node.js Program
8) Node.js Modules
9) Demo – Grocery List Web Application using Node.js
An absolute beginners guide to node.js . Done for a presentation at college. The presentation contains data from various sources ,sources are noted at the end slide. please inform me any mistakes ,since at that time i was in a bit of hurry :)
3 Things Everyone Knows About Node JS That You Don'tF5 Buddy
Node.js is server side javascript. Here the complete presentation on Node JS with the 3 Things which everyone knows about Node JS and installation process of it. https://www.f5buddy.com
The Node.js movement has transformed the landscape of UI development. In this session we'll look at how Node.js can be leveraged on multiple layers of the web application development lifecycle. Attendees will learn how incorporating Node.js into your front-end build process can optimize code, allow you to use use new and upcoming JavaScript features in your code today, and to improve your asset delivery pipeline. This session will also cover how Node is changing the template rendering landscape, allowing developers to write "isomorphic" code that runs on the client and server. Lastly we'll look into using Node to achieve developer zen by keeping the codebase clean and limiting the risk of changes to the code causing unknown errors.
Node.js is a compelling platform that is quickly spreading from startups to the enterprise. Node.js strategically unites developers of all backgrounds through the common language of JavaScript. Why should you learn Node.js and where do you start? You will come away from this talk with the evidence to support Node.js, and tools you need to be productive. We will walk through a typical workflow of creating and debugging a web application. You will learn how easy it is to deploy, including Microsoft Azure. We'll also look at popular frameworks and modules, and other learning resources to give you the best start.
What is Node.js | Node.js Tutorial for Beginners | Node.js Modules | Node.js ...Edureka!
This Edureka "What is Node.js" tutorial will help you to learn the Node.js fundamentals and how to create an application in Node.js. Node.js is an open-source, cross-platform JavaScript runtime environment for developing a diverse variety of server tools and applications. Below are the topics covered in this tutorial:
1) Client Server Architecture
2) Limitations of Multi – Threaded Model
3) What is Node.js?
4) Features of Node.js
5) Node.js Installation
6) Blocking Vs. Non – Blocking I/O
7) Creating Node.js Program
8) Node.js Modules
Nodejs Event Driven Concurrency for Web ApplicationsGanesh Iyer
We describe the event-driven concurrency model used by Nodejs, a JavaScript server-side scripting platform. An overview of the traditional thread based approach(used by Apache) is also given. We compare both the approaches. An Introduction to Nodejs programming is provided and some useful packages are discussed.
Fundamental of Node.JS - Internship Presentation - Week7Devang Garach
Fundamental of Node.JS - Internship Presentation - Week 7
What is Node.JS
Features of Node.JS
Node.JS Architecture
Core modules in Node.JS
Node.JS Installation
npm
Creating first node.js application
Introduction to node js - From "hello world" to deploying on azureColin Mackay
Slide deck from my talk on Node.js.
More information is available here: http://colinmackay.scot/2014/11/29/dunddd-2014-introduction-to-node-jsfrom-hello-world-to-deploying-on-azure/
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...Edureka!
This Edureka "Node.js tutorial" will help you to learn the Node.js fundamentals and how to create an application in Node.js. Node.js is an open-source, cross-platform JavaScript runtime environment for developing a diverse variety of server tools and applications. Below are the topics covered in this tutorial:
1) Client Server Architecture
2) Limitations of Multi-Threaded Model
3) What is Node.js?
4) Features of Node.js
5) Node.js Installation
6) Blocking Vs. Non – Blocking I/O
7) Creating Node.js Program
8) Node.js Modules
9) Demo – Grocery List Web Application using Node.js
An absolute beginners guide to node.js . Done for a presentation at college. The presentation contains data from various sources ,sources are noted at the end slide. please inform me any mistakes ,since at that time i was in a bit of hurry :)
3 Things Everyone Knows About Node JS That You Don'tF5 Buddy
Node.js is server side javascript. Here the complete presentation on Node JS with the 3 Things which everyone knows about Node JS and installation process of it. https://www.f5buddy.com
The Node.js movement has transformed the landscape of UI development. In this session we'll look at how Node.js can be leveraged on multiple layers of the web application development lifecycle. Attendees will learn how incorporating Node.js into your front-end build process can optimize code, allow you to use use new and upcoming JavaScript features in your code today, and to improve your asset delivery pipeline. This session will also cover how Node is changing the template rendering landscape, allowing developers to write "isomorphic" code that runs on the client and server. Lastly we'll look into using Node to achieve developer zen by keeping the codebase clean and limiting the risk of changes to the code causing unknown errors.
Node.js is a compelling platform that is quickly spreading from startups to the enterprise. Node.js strategically unites developers of all backgrounds through the common language of JavaScript. Why should you learn Node.js and where do you start? You will come away from this talk with the evidence to support Node.js, and tools you need to be productive. We will walk through a typical workflow of creating and debugging a web application. You will learn how easy it is to deploy, including Microsoft Azure. We'll also look at popular frameworks and modules, and other learning resources to give you the best start.
What is Node.js | Node.js Tutorial for Beginners | Node.js Modules | Node.js ...Edureka!
This Edureka "What is Node.js" tutorial will help you to learn the Node.js fundamentals and how to create an application in Node.js. Node.js is an open-source, cross-platform JavaScript runtime environment for developing a diverse variety of server tools and applications. Below are the topics covered in this tutorial:
1) Client Server Architecture
2) Limitations of Multi – Threaded Model
3) What is Node.js?
4) Features of Node.js
5) Node.js Installation
6) Blocking Vs. Non – Blocking I/O
7) Creating Node.js Program
8) Node.js Modules
Nodejs Event Driven Concurrency for Web ApplicationsGanesh Iyer
We describe the event-driven concurrency model used by Nodejs, a JavaScript server-side scripting platform. An overview of the traditional thread based approach(used by Apache) is also given. We compare both the approaches. An Introduction to Nodejs programming is provided and some useful packages are discussed.
Fundamental of Node.JS - Internship Presentation - Week7Devang Garach
Fundamental of Node.JS - Internship Presentation - Week 7
What is Node.JS
Features of Node.JS
Node.JS Architecture
Core modules in Node.JS
Node.JS Installation
npm
Creating first node.js application
Introduction to node js - From "hello world" to deploying on azureColin Mackay
Slide deck from my talk on Node.js.
More information is available here: http://colinmackay.scot/2014/11/29/dunddd-2014-introduction-to-node-jsfrom-hello-world-to-deploying-on-azure/
Drupalcon 2021 - Nuxt.js for drupal developersnuppla
Nuxt.js is a modern, performant framework that makes developing Vue.js-based frontend applications enjoyable. This session gives an introduction to Nuxt.js for Drupal developers. By providing analogies to known Drupal-APIs developers get ready to start building Nuxt.js applications that can run as a server or are deployed as static website. Finally, attendees will get an overview of the Nuxt ecosystem and the most essential Nuxt.js modules.
No up-front Javascript or Vue.js knowledge required!
JSFest 2019: Technology agnostic microservices at SPA frontendVlad Fedosov
We'll go through the possible ways to bring technology agnostic microservice architecture to the frontend, review pros/cons of each of them. We also will check the "ultimate solution" that handles microservices with SSR in SPA manner.
This talk will be interesting for ones who have multiple teams working on the same frontend application.
An Introduction to the world of Javascript and NodeJS. The presentation captures Javascript's history, its evolution and its progression towards a language for an end-to-end development.
We'll go through the possible ways to bring technology agnostic microservice architecture to the frontend, review pros/cons of each of them. We also will check the "ultimate solution" that handles microservices with SSR in SPA manner.
This talk will be interesting for ones who have multiple teams working on the same frontend application.
Chicago Coder Conference 2015
Speaker Biography: Wei Ru
Wei Ru has over 15 years of professional experience in design and development of Java enterprise applications across multiple industries. Currently he works as a technical architect at STA Group, LLC. He received a M.S. degree in Computer Science from Loyola University Chicago. As a software developer with an emphasis on Java, he strongly believes in software re-usability, open standards, and various best practices. He has successfully delivered many products using open source platforms and frameworks during his IT consultancies.
Speaker Biography: Vincent Lau
Vincent Lau has been Senior Architect at STA Group in Chicago for the last two years. He received a B.S. degree in Accounting and Finance from the University of Illinois at Chicago and worked on M.S. of Computer Science at DePaul University. He has over 15 years of software design, development, testing and project management experience on large enterprise distributed computing platforms. Most recently, he has worked on web based applications using Java, Spring, JavaScript, Angular.js, jQuery and web services. He previously had Senior Software Engineer and Lead positions in Royal Caribbean Cruises, Wells Fargo Bank, Cap Gemini America and Trans Union Corp.
Presentation: Practical AngularJS
AngularJS has been seen gaining momentum recently. Whether you want to develop a modern single-page application or to spice up only the view enabled by a traditional MVC web framework, AngularJS allows you to write cleaner, shorter code. AngularJS’ two-way data binding feature allows a declarative approach on views and controllers, and ultimately code modulization. With this strategic change and many features offered by AngularJS, learning AngularJS can be challenging. In this session, we will share some of the experiences we had in Angular UI development, we will cover:
AngularJS modules and common project setup
Communicating to a Restful service
Commonly used Angular functions, directives
UI Bootstrap, grid views and forms in AngularJS
Custom Angular directives
Asynchronous functions and event processing
Node JS Express : Steps to Create Restful Web AppEdureka!
Node.js uses JavaScript - a language known to millions of developers worldwide - thus giving it a much lower learning curve even for complete beginners. Using Node.js you can build simple Command Line programs or complex enterprise level web applications with equal ease. Node.js is an event-driven, server-side, asynchronous development platform with lightning speed execution. It is open source and cross-platform, running on OS X, Linux and Windows. It also has an open source community that produces amazing modules available for use in your project for additional functionalities. Node.js helps you to code the most complex functionalities in just a few lines of code. The topics covered in the presentation are :
1. Understanding NodeJS Express
2. Creating Restful Web App
3. What is NPM
4.Templates in Express
- How BFF and GraphQL can be used together
- Reliable architecture to supply data
- Flexible architecture in data layer
- Improve user experience using BFF and GraphQL
Developing Distributed High-performance Computing Capabilities of an Open Sci...Globus
COVID-19 had an unprecedented impact on scientific collaboration. The pandemic and its broad response from the scientific community has forged new relationships among public health practitioners, mathematical modelers, and scientific computing specialists, while revealing critical gaps in exploiting advanced computing systems to support urgent decision making. Informed by our team’s work in applying high-performance computing in support of public health decision makers during the COVID-19 pandemic, we present how Globus technologies are enabling the development of an open science platform for robust epidemic analysis, with the goal of collaborative, secure, distributed, on-demand, and fast time-to-solution analyses to support public health.
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...Globus
Large Language Models (LLMs) are currently the center of attention in the tech world, particularly for their potential to advance research. In this presentation, we'll explore a straightforward and effective method for quickly initiating inference runs on supercomputers using the vLLM tool with Globus Compute, specifically on the Polaris system at ALCF. We'll begin by briefly discussing the popularity and applications of LLMs in various fields. Following this, we will introduce the vLLM tool, and explain how it integrates with Globus Compute to efficiently manage LLM operations on Polaris. Attendees will learn the practical aspects of setting up and remotely triggering LLMs from local machines, focusing on ease of use and efficiency. This talk is ideal for researchers and practitioners looking to leverage the power of LLMs in their work, offering a clear guide to harnessing supercomputing resources for quick and effective LLM inference.
top nidhi software solution freedownloadvrstrong314
This presentation emphasizes the importance of data security and legal compliance for Nidhi companies in India. It highlights how online Nidhi software solutions, like Vector Nidhi Software, offer advanced features tailored to these needs. Key aspects include encryption, access controls, and audit trails to ensure data security. The software complies with regulatory guidelines from the MCA and RBI and adheres to Nidhi Rules, 2014. With customizable, user-friendly interfaces and real-time features, these Nidhi software solutions enhance efficiency, support growth, and provide exceptional member services. The presentation concludes with contact information for further inquiries.
Strategies for Successful Data Migration Tools.pptxvarshanayak241
Data migration is a complex but essential task for organizations aiming to modernize their IT infrastructure and leverage new technologies. By understanding common challenges and implementing these strategies, businesses can achieve a successful migration with minimal disruption. Data Migration Tool like Ask On Data play a pivotal role in this journey, offering features that streamline the process, ensure data integrity, and maintain security. With the right approach and tools, organizations can turn the challenge of data migration into an opportunity for growth and innovation.
Multiple Your Crypto Portfolio with the Innovative Features of Advanced Crypt...Hivelance Technology
Cryptocurrency trading bots are computer programs designed to automate buying, selling, and managing cryptocurrency transactions. These bots utilize advanced algorithms and machine learning techniques to analyze market data, identify trading opportunities, and execute trades on behalf of their users. By automating the decision-making process, crypto trading bots can react to market changes faster than human traders
Hivelance, a leading provider of cryptocurrency trading bot development services, stands out as the premier choice for crypto traders and developers. Hivelance boasts a team of seasoned cryptocurrency experts and software engineers who deeply understand the crypto market and the latest trends in automated trading, Hivelance leverages the latest technologies and tools in the industry, including advanced AI and machine learning algorithms, to create highly efficient and adaptable crypto trading bots
Advanced Flow Concepts Every Developer Should KnowPeter Caitens
Tim Combridge from Sensible Giraffe and Salesforce Ben presents some important tips that all developers should know when dealing with Flows in Salesforce.
Designing for Privacy in Amazon Web ServicesKrzysztofKkol1
Data privacy is one of the most critical issues that businesses face. This presentation shares insights on the principles and best practices for ensuring the resilience and security of your workload.
Drawing on a real-life project from the HR industry, the various challenges will be demonstrated: data protection, self-healing, business continuity, security, and transparency of data processing. This systematized approach allowed to create a secure AWS cloud infrastructure that not only met strict compliance rules but also exceeded the client's expectations.
Globus Connect Server Deep Dive - GlobusWorld 2024Globus
We explore the Globus Connect Server (GCS) architecture and experiment with advanced configuration options and use cases. This content is targeted at system administrators who are familiar with GCS and currently operate—or are planning to operate—broader deployments at their institution.
First Steps with Globus Compute Multi-User EndpointsGlobus
In this presentation we will share our experiences around getting started with the Globus Compute multi-user endpoint. Working with the Pharmacology group at the University of Auckland, we have previously written an application using Globus Compute that can offload computationally expensive steps in the researcher's workflows, which they wish to manage from their familiar Windows environments, onto the NeSI (New Zealand eScience Infrastructure) cluster. Some of the challenges we have encountered were that each researcher had to set up and manage their own single-user globus compute endpoint and that the workloads had varying resource requirements (CPUs, memory and wall time) between different runs. We hope that the multi-user endpoint will help to address these challenges and share an update on our progress here.
Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...Globus
The U.S. Geological Survey (USGS) has made substantial investments in meeting evolving scientific, technical, and policy driven demands on storing, managing, and delivering data. As these demands continue to grow in complexity and scale, the USGS must continue to explore innovative solutions to improve its management, curation, sharing, delivering, and preservation approaches for large-scale research data. Supporting these needs, the USGS has partnered with the University of Chicago-Globus to research and develop advanced repository components and workflows leveraging its current investment in Globus. The primary outcome of this partnership includes the development of a prototype enterprise repository, driven by USGS Data Release requirements, through exploration and implementation of the entire suite of the Globus platform offerings, including Globus Flow, Globus Auth, Globus Transfer, and Globus Search. This presentation will provide insights into this research partnership, introduce the unique requirements and challenges being addressed and provide relevant project progress.
Large Language Models and the End of ProgrammingMatt Welsh
Talk by Matt Welsh at Craft Conference 2024 on the impact that Large Language Models will have on the future of software development. In this talk, I discuss the ways in which LLMs will impact the software industry, from replacing human software developers with AI, to replacing conventional software with models that perform reasoning, computation, and problem-solving.
Listen to the keynote address and hear about the latest developments from Rachana Ananthakrishnan and Ian Foster who review the updates to the Globus Platform and Service, and the relevance of Globus to the scientific community as an automation platform to accelerate scientific discovery.
Software Engineering, Software Consulting, Tech Lead.
Spring Boot, Spring Cloud, Spring Core, Spring JDBC, Spring Security,
Spring Transaction, Spring MVC,
Log4j, REST/SOAP WEB-SERVICES.
Unleash Unlimited Potential with One-Time Purchase
BoxLang is more than just a language; it's a community. By choosing a Visionary License, you're not just investing in your success, you're actively contributing to the ongoing development and support of BoxLang.
Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...informapgpstrackings
Keep tabs on your field staff effortlessly with Informap Technology Centre LLC. Real-time tracking, task assignment, and smart features for efficient management. Request a live demo today!
For more details, visit us : https://informapuae.com/field-staff-tracking/
Cyaniclab : Software Development Agency Portfolio.pdfCyanic lab
CyanicLab, an offshore custom software development company based in Sweden,India, Finland, is your go-to partner for startup development and innovative web design solutions. Our expert team specializes in crafting cutting-edge software tailored to meet the unique needs of startups and established enterprises alike. From conceptualization to execution, we offer comprehensive services including web and mobile app development, UI/UX design, and ongoing software maintenance. Ready to elevate your business? Contact CyanicLab today and let us propel your vision to success with our top-notch IT solutions.
Quarkus Hidden and Forbidden ExtensionsMax Andersen
Quarkus has a vast extension ecosystem and is known for its subsonic and subatomic feature set. Some of these features are not as well known, and some extensions are less talked about, but that does not make them less interesting - quite the opposite.
Come join this talk to see some tips and tricks for using Quarkus and some of the lesser known features, extensions and development techniques.
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERRORTier1 app
Even though at surface level ‘java.lang.OutOfMemoryError’ appears as one single error; underlyingly there are 9 types of OutOfMemoryError. Each type of OutOfMemoryError has different causes, diagnosis approaches and solutions. This session equips you with the knowledge, tools, and techniques needed to troubleshoot and conquer OutOfMemoryError in all its forms, ensuring smoother, more efficient Java applications.
2. Who am I?
❏ Frontend architect at ilegra
❏ Graduated in Analysis and System
Development at FATEC Senai
❏ Started in 2012 on IT world
❏ Experience with Arch Front (Angular,
React, React Native, Vue, NodeJS,
Micro-fronts, SSR, BFF, GraphQL, PWA and
others)
@adrianlemess
4. Exercise Repo
❏ Fork the repository
https://github.com/adrianlemess/frontend-training
❏ Clone your fork repository
❏ In the terminal inside the root folder, type
❏ npm run bootstrap
8. Choose what we need...
❏ How do applications relate to each other?
❏ Code isolation and Separation of Concern (SOC)
❏ Separated deploy and team ownership
❏ Cross-browser
❏ Performance
❏ Agnostic Technology
9. Options today
❏ Single SPA - "meta-framework" to combine multiple frameworks into
one app.
❏ Multiple SPAs on different URLs sharing code via NPM
❏ Micro-apps isolation with Iframe and communication via Post-message
❏ Web components
❏ Custom elements
❏ Open components
❏ Mosaic
❏ Vanilla script
11. Legado
1 - Single SPA + Iframe
❏ AngularJS Migration to React
❏ Using CanopyTax/Single-SPA micro-front framework and
Iframe
App 1
/app1
App 2
/app2
Iframe
/**
DOM DOM
18. User Journey
It's happening? It's useful? is interactive
Navigation
Starts!
(Time to
First Byte)
First Painting
Navigation
has started
(First
contentful
paint)
First
Meaningful
paint
(Primary
content has
loaded)
Visible
content
has loaded Time to
interactive
(events attached)
Fully loaded
19. First Loading - Numbers
❏ Google metrics through the Lighthouse tool indicate that the
ideal load time ranges from 1.5s to 3s.
❏ Amazon found that they could lose 1.6 Billion revenue on sale if
their page takes 1s longer to load.
❏ Walmart in turn found that every 100ms of initial load
optimization impacts 1% more revenue.
❏ Pinterest which reduced the initial load from 23s to 5.6s
resulting in a 43% increase in sales and 753% new user signups.
20. First Loading Nucleus Staff
❏ More than 10s were taken to load the entire app after login
21. How to Improve?
❏ Lazy Loading - Loading only what is necessary
❏ Assets and CDN
❏ Above the first
❏ Async loading (JS, CSS, Assets)
❏ SSR
22. What is SSR?
❏ Pré-Process the first page on the server side
❏ Deliver the first page already rendered - fast interaction
❏ Improve load speed
❏ SEO Improvements (Search Engine Object)
34. What is?
❏ Angular is a platform and framework for building applications
using HTML, CSS, and TypeScript.
❏ Open source maintained by Google
❏ Angular works on the SPA (Single Page Applications) model
❏ Deliver a version of the application to the browser with its
templates
❏ Traffic only JSON and no more HTML templates between server
and client
❏ Use TypeScript
36. How to Install
❏ Install Angular and TypeScript
npm install -g typescript @angular/cli
❏ Documentation in: https://angular.io/guide/quickstart
37. Angular CLI commands
❏ Creating an app
ng new name_app —prefix test-prefix
❏ Start an app
ng serve --open
❏ Creating an component
ng generate component name_component
❏ Creating an module
ng generate module name_module
38. Angular CLI commands
❏ Creating an Service
ng generate service name_service
❏ Building an app for an environment
ng build --prod
39. Angular CLI commands
❏ Creating an web worker
ng generate web-worker name_worker
❏ Transform an app in PWA
ng add @angular/pwa --project *project-name*
❏ Transform an app in SSR
ng add @nguniversal/express-engine --clientProject
name_project
40. Concepts
❏ TSlint / Eslint - code analyzer based on a rule set
❏ Binding - bind a variable to the DOM
❏ Guard - Route Access Protection
❏ Interceptor - intercept and modify each request in a global way
❏ Lazy Loading - Slowly load modules as needed
❏ Pipes and masks - ways to display certain formatted data on
screen or in input
41. Concepts
❏ Directive - attributes or tags in html we added
❏ Validators - Custom form input validations
❏ Observables - how to work with reactivity in Angular
❏ rxjs / ReactiveX - library that implements observables
❏ ngrx / Redux - Lib that implements flux model
❏ zones - equivalent to react Vdom and vuejs, famous
$scope.apply () from angularJS
49. Single Thread
“Every line of front end JS you've ever written has
(momentarily) stopped your page from working”.
Nor Churchill - Neither Mark Twain
50. 60 frames / second
❏ The users expected pages more simple and interactive
❏ interactions must be fluid
❏ The current devices refresh the view 60 times per second
❏ 1 second == 1000ms
60 frames == x
❏ Each frame has only 16ms to execute
❏ We should worry about what execute and not block the main
thread
51. Workers
❏ A worker is an object created using a
constructor that runs a named JavaScript file
in the background.
❏ Has its own global execution context, self !==
window
❏ Communicate to the main thread via the
postMessage API
❏ Web Worker (parallelism) x Service Worker
(offline) x Worklets (Browser render journey)
53. Web Workers
❏ The W3C published a first draft of the web
workers standard in 2009
❏ Web workers is an asynchronous system, or
protocol, for web pages to execute tasks in
the background, independently from the main
thread and website UI
❏ Best suited to execute long-running or
demand computation tasks
❏ Helps to free main thread to user interactions
❏ Angular 8 has built-in support
Main Thread
Web Worker
PostMessage
54. ❏ Using a web worker:
const myWorker = new Worker('worker.js');
❏ Sending a message to worker
myWorker.postMessage('Hello!');
❏ Receiving result from worker
myWorker.onmessage = function(e) {
console.log(e.data);
}
main.js
55. ❏ Receiving message from main.js
self.onmessage = function(e) {
console.log(e.data);
// Send message to main file
self.postMessage(workerResult);
}
worker.js
56. ❏ Navigator object (browser infos)
❏ Location object (Read Only)
❏ XMLHttpRequest (Service worker uses Fetch)
❏ setTimeout()/clearTimeout() and setInterval()/clearInterval()
❏ The application cache
❏ Parsing data
❏ Virtual DOM
❏ File Reader, blob, ArrayBuffer
❏ importScripts() method to import other scripts
❏ Spawning other workers
❏ Not available DOM and Window objects
What we can do
57. ❏ It’s not possible to specify if a web worker should run on a specific
core
❏ Web workers on a single core will not run in parallel but will not block
the main UI thread
❏ On a multicore CPU Web Workers can truly run in parallel if the SO
decides to
Web Workers and Cores
61. What is service worker?
❏ Service worker is a programmable proxy,
allowing you to control how the requests
from your page is handled
❏ Runs in background
❏ Enable cache (requests, image, etc)
❏ Enable push notification
❏ Background sync
65. What is?
❏ Created by Ryan Dahl and released in 2009 at JSConf.EU
❏ Developed and maintained by Joyent, GitHub and community
❏ Licença MIT
❏ Baseado na Engine Google V8
❏ Last release: v12.13.1
❏ Javascript Development Platform for distributed applications
❏ Ideal for scenarios with many simultaneous connections and low
data processing
68. Npm
❏ Dependency Manager
❏ Contains Project Information
❏ Generates package.json file with at least:
❏ Name
❏ Version
❏ Dependencies
❏ License
❏ Point main file
69. Npm commands
❏ Starting npm project
npm init
❏ Install dependencies
npm install <module name> (--save, -g)
❏ Run a file
node arquivo.js
❏ Execute a global package without install globally
npx package_command
70. Package.json scripts
"scripts": {
"build": "tsc",
"dev": "nodemon index.ts",
"start": "node ./dist/index.js",
"prod": "npm run build && npm run start:prod",
"test": "jest"
}
❏ Execute npm run dev, npm start, npm run prod ...
80. BFF Architectural Pattern
❏ Intermediate service
❏ Every frontend has it owns backend
❏ Tied coupled with a specific user experience
❏ Make easier to define and adapt API services as the UI required
Frontend BackendBFF
82. Different clients == different
needs
❏ First Painting
❏ Server Side
Rendering
❏ Search Engine
Optimization
❏ Request frequency
❏ Network payload size
❏ CPU, Memory and
Battery Usage
83. How can we develop?
❏ Developed and maintained by frontend team
Java/Kotlin
Swift
NodeJS
89. Single point of failure
❏ It should be resilient by design with proper implementation of
circuit breakers, timeouts, retry etc
❏ Should be properly tested
❏ Required High Availability
95. GraphQL
❏ Created by facebook team in 2012 and
became open source in 2015
❏ Query only the data we need
❏ Good fit for data aggregation
❏ Modified resources using mutations
❏ Resources are defined by schemas
96. Schema
type Company {
id: Int
name: String
description: String
users: [User]
}
type User {
id: Int
firstName: String
age: Int
company: Company
}
101. Problems about GraphQL
❏ REST can do much of what GraphQL does
❏ GraphQL will make some tasks more complex
❏ It’s easier to use a web cache with REST (HTTP) than with
GraphQL
❏ You could have performance issues with GraphQL queries
❏ The way GraphQL schemas work could be a problem to
multiple types of UI
❏ Managing complexity
102. BFF x GraphQL
❏ Specific Users
❏ Building solutions
❏ Very low data usage
❏ Agility
❏ Full Stack team
❏ General users
❏ Projecting
capabilities
❏ Low data usage
❏ Stability
105. Our perspective
❏ Good fit for on demand architecture
❏ Each service created may be available on GraphQL to
aggregation
❏ Don’t lose latency to simple requests
❏ Aggregation when we need aggregation
106. Our perspective
❏ Orphan logic stay on BFF
❏ Flexibility
❏ Services oriented only by business
❏ Services not exposed
❏ Attending multiple types of client
107.
108. What is
“ Puppeteer is a Node
library which provides a
high-level API to control
Chrome or Chromium over
the DevTools Protocol.
Puppeteer runs headless by
default”
109.
110. Features
❏ Screenshots
❏ PDF prints
❏ Pre-render content and crawl SPA to SEO engines
❏ Automate form submission, UI testing, keyboard input, etc.
❏ Create an up-to-date, automated testing environment.
❏ Capture a timeline trace of your site to help diagnose
performance issues.
❏ Test Chrome Extensions.
111. Install
# Chromium + puppeteer
npm i puppeteer
# Puppeteer without Chromium
npm i puppeteer-core
118. JavaScript
❏ Created by Brendan Eich in 1995
❏ Made in 10 days
❏ Primary Goal: DOM control and create dynamic web pages
❏ interpreted - runtime errors
❏ Concern with performance: 0
119. V8 - Google
❏ Ajax Emergence
❏ Code processed on browser and manipulate data via HTTP
❏ Dynamics apps (gmail. google maps e afins)
❏ Performance needs
❏ Google created in 2009 the Engine V8
❏ JIT - Just in Time Compilation - Code compilation - JavaScript
to Bytecode
120. How JIT/V8 Works?
❏ After JavaScript is loaded, it is transformed into a tree structure
called Abstract Syntax Tree or AST
❏ If a code snippet is interpreted many times it becomes warm. It
goes through the baseline compiler which, depending on the
OS / platform, generates a compiled version of the snippet with
some optimization, reducing interpretation time.
❏ If this warm code is executed many times it becomes hot and
the optimizer compiler kicks in, using a few things as a premise
❏ If one of these assumptions is broken, the deoptimization stage
begins.
❏ We also have a garbage collector to clear memory when
something is no longer used
122. JavaScript with V8
❏ Created by Brendan Eich in 1995
❏ Made in 10 days
❏ Primary Goal: DOM control and create dynamic web pages.
Deliver robust applications and run anywhere
❏ interpreted - runtime errors Compilado em tempo real
❏ Concern with performance: A LOT
124. “Web Assembly will change the way we
think of Web Apps”. Jay Phelps. Software
Engineer on Netflix.
125. Web Assembly what is?
❏ WebAssembly (WASM) is a binary-format Compiler Target (the
code that the compiler generates) that runs code such as C, C
++, and Rust in the browser with performance very close to that
of native code.
❏ Lets you run these codes from other languages next to
JavaScript - including sharing functionality.
126. WebAssembly stages
❏ Small bundle, decoding before JS parser, pre-compilation
optimizations and stream compilation
127. Abstract
❏ May be 10% to 800% faster than JS code - Depends on which
engine will run
❏ We can import WASM on NodeJS and browser
❏ Only runs 20% slower than native code.
❏ Sharing code between JavaScript and others languages - rust,
scala, C, C++, etc
❏ Accessing web APIs available on the environment (browser or
Node)
128. Future?
❏ Binaries Everywhere - code once run everywhere
❏ Using by games on web
❏ More and more languages compiling for WASM
❏ Garbage Collector
❏ Wasi