Роман Лютиков "Web Apps Performance & JavaScript Compilers"

Dec 4, 20161 like382 views

1) Web app performance can be improved through code splitting techniques that divide JavaScript bundles into smaller chunks to reduce loading time. 2) Compiler optimizations like tree shaking, constant folding, and dead code elimination can help reduce code size and evaluation time by removing unused code. 3) Code splitting libraries like Webpack allow splitting code at the module or route level to preload important chunks and lazily load others on demand to improve performance.

Technology

Web Apps performance &
JavaScript compilers
Roman Liutikov
Attendify

Web Apps
nowadays
5 MB of awesome web
technologies is
loading...

Роман Лютиков "Web Apps Performance & JavaScript Compilers"

This is NOT good
● Makes people wait
● Eats their traffic and money
● Everyone hates you
● You loose money

the goal is to
Reduce
Time To Interaction

The right way _______
index.html
route-1.js
common-1.js
I can see it I can use it
route-2.js Pre-caching
ServerRendering
(JS&CSS)

Code splitting
Divide JS bundle into chunks
route-1.js route-2.js route-3.js route-4.js
...
common-1.js common-2.js
Webpack
CommonsChunkPlugin

Initial load
Load initial route and its common chunk
route-1.js
common-1.js

Smarter compiler
means smaller
output size & eval time

Dead code elimination
Remove code that can never be executed
const dec = (x) => x - 1;
const inc = (x) => x + 1;
const x = 0;
const y = 1;
inc(x);
inc
decy
x
UglifyJS
Rollup
Babili
Closure Compiler
Dependency graph

Tree-shaking (A special case of DCE)
Do not include unused exports
// math.js
export const dec = (x) => x - 1;
export const inc = (x) => x + 1;
// main.js
import { inc } from 'math';
const x = 0;
const y = 1;
inc(x);
Webpack 2
Rollup
Closure Compiler

Function call inlining
Replace a function call with its body
const person = {
fname: 'John',
lname: 'Doe'
};
function fullName(p) {
return p.fname + ' ' + p.lname;
}
console.log(fullName(person));
Closure Compiler
const person = {
fname: 'John',
lname: 'Doe'
};
console.log(
person.fname + ' ' +
person.lname);

Property flattening (collapsing)
Collapse object properties into separate variables
const person = {
fname: 'John',
lname: 'Doe'
};
console.log(
person.fname + ' ' +
person.lname);
Closure Compiler
const person$fname = 'John';
const person$lname = 'Doe';
console.log(
person$fname + ' ' +
person$lname);

Constant folding
Evaluate constant expressions at compile time
UglifyJS
Babili
Closure Compiler
const person$fname = 'John';
const person$lname = 'Doe';
console.log('John Doe');
const person$fname = 'John';
const person$lname = 'Doe';
console.log(
person$fname + ' ' +
person$lname);

Known methods folding
Evaluate known methods at compile time
Closure Compiler
'012345'
'World!'
99
[0, 1, 2, 3, 4, 5].join('');
'Hello, world!'.substr(7, 11);
parseInt('99 UAH');

Code splitting in Webpack
Module level splitting
a b c d a b c
a b
a c
input output

Code splitting in Closure Compiler
Function/method & variable level splitting
a b c d a
a b
a c
input outputb
c

Precache
route-1.js
common-1.js
Load and/or cache chunks in background
UI is ready
Load in bg

Lazy load
route-1.js
common-1.js
Load chunks on demand
Navigation
Load chunkroute-2.js
...

Code splitting & Lazy loading
in Webpack 2
Per route chunks with React Router
<Route
path="user/:id"
getComponent={(loc, cb) => {
System.import("pages/User")
.then((module) => cb(null, module));
}}>

Preload chunks
* Chrome, Opera & Chrome for Android
<head>
<link rel="preload" as="script" href="chunk-1.js">
<link rel="preload" as="script" href="chunk-2.js">
...
</head>

Precache with Service Worker (sw-precache)
Preload + Offline support
plugins: [
new SWPrecacheWebpackPlugin({
cacheId: "app",
filename: "app-sw.js",
staticFileGlobs: [
"app/js/**.js"
]
})]

Ahead-of-time compilation
Reduce runtime overhead
Templates AOT compilation in
Angular 2 & Vue.js 2

Preact Vue.js Riot.js
Lightweight alternatives

Out of the box code splitting is
coming to

Should I use
server-side
rendering?
Maybe

The document discusses the development of mobile applications using React Native, emphasizing an offline-first architecture and code sharing between iOS and Android platforms. It outlines strategies for managing state with Redux, testing methodologies, continuous delivery using Fastlane, and the use of CodePush for immediate updates. Various navigation approaches and performance tuning tips are also provided, highlighting the complexity and challenges of building cross-platform applications.

Agile JavaScript TestingScott Becker

The document discusses Test-Driven Development (TDD) and Behavior-Driven Development (BDD) for JavaScript, emphasizing the importance of writing tests before creating code to ensure better quality and fewer bugs. It introduces practical examples using frameworks like screw.unit and blue ridge, touching on concepts like mocking, stubbing, and testing UI interactions. Additionally, it highlights the need for continuous testing across various browsers and tools for integrating JavaScript tests into workflows.

Night Watch with QACarsten Sandtner

The document discusses Nightwatch.js, an open source end-to-end testing framework for browser-based apps and websites. It uses Selenium WebDriver to perform commands and assertions on DOM elements. Key features include a clean syntax, built-in test runner, support for CSS/XPath selectors, test grouping/filtering, and CI integration. The document provides information on installation, project structure, configuration, writing tests, using page objects, test execution, and ways to extend Nightwatch's functionality through custom commands/assertions.

Testing nightwatch, by David TorroijaDavid Torroija

The document introduces Nightwatch.js, a tool for automated testing that simulates user behavior through end-to-end or functional testing. It highlights the importance of functional tests in projects lacking proper testing and explains why Nightwatch is a suitable choice due to its simplicity and integration with continuous integration tools. The document also provides examples and next steps for implementing tests, emphasizing collaboration among team members.

The Road to Native Web ComponentsMike North

Mike North discusses the W3C web component specification including HTML imports, templates, custom elements, and shadow DOM. He explains how each part works and provides code examples. Frameworks like Ember and React handle these concepts through their own abstractions like components, templates, and CSS encapsulation techniques. North demos a simple component built with these web component standards.

Node.js debuggingNicholas McClay

The document provides an overview of debugging techniques for Node.js applications, emphasizing the use of various tools like the built-in debugger, Eclipse IDE, Chrome DevTools, and WebStorm for effective debugging. Key commands and features such as setting breakpoints, watching expressions, and execution control are highlighted. It also mentions the compatibility issues with plugins and the advantages of certain IDEs for Node.js debugging.

Optimising Your Front End Workflow With Symfony, Twig, Bower and GulpMatthew Davis

Module, AMD, RequireJS偉格高

This document discusses module patterns in JavaScript and asynchronous module definition (AMD) using RequireJS. It introduces the module pattern as a way to encapsulate code and expose public APIs. AMD and RequireJS are presented as solutions for asynchronously loading JavaScript modules and managing dependencies. Key advantages of the module pattern, AMD and RequireJS include maintaining encapsulation, organizing code into reusable modules, and handling dependency loading order. Challenges with large JavaScript applications using many modules are also addressed.

Test-Driven JavaScript Development (JavaZone 2010)Christian Johansen

This document discusses test-driven development for JavaScript using various testing frameworks like YUI Test, JSpec, and JsTestDriver. It covers how to set up unit testing for JavaScript, challenges like testing asynchronous code and events, and strategies for addressing those challenges using tools like Sinon.js for stubs and mocks. The document also provides examples of testing a chat client application and integrating JavaScript testing into a continuous integration workflow using Hudson.

Asynchronous Module Definition (AMD)xMartin12

The document discusses the Asynchronous Module Definition (AMD) as a client-side JavaScript module system aimed at enhancing modular programming for complex web applications. It covers the motivation, design principles, use of modules, optimization techniques, and tools available for implementing AMD. The author, Martin Stadler, emphasizes the importance of AMD in modern web development and provides resources for further learning.

"How to Use Bazel to Manage Monorepos: The Grammarly Front-End Team’s Experie...Fwdays

The document discusses the advantages of using a monorepo for managing software projects, detailing the transition to Bazel as a build tool with a focus on improved efficiency and streamlined dependency management. It highlights a real-world example demonstrating significant reductions in build times and discusses the challenges faced during implementation. Overall, the move to Bazel is portrayed as a successful solution for handling complex project configurations and enhancing performance.

"Applied Enterprise Metaprogramming in JavaScript", Vladyslav DukhinFwdays

The document discusses applied enterprise metaprogramming in JavaScript, focusing on concepts such as abstraction, code generation, and introspection using the Node.js VM. It explores various metaprogramming techniques like code modification, runtime execution, and dynamic code evaluation, alongside practical use cases and performance comparisons. Additionally, it delves into definitions and differences among terms related to metaprogramming while providing examples pertinent to JavaScript functions and frameworks.

JavaScript + Jenkins = Winning!Eric Wendelin

This document discusses tools and techniques for automating JavaScript development tasks to improve code quality. It recommends using tools like JSHint for static analysis, PhantomJS for testing, Closure Compiler for optimization, and Gradle for building. It also recommends setting up continuous integration with Jenkins to run tests and metrics on every code change and prevent defects. The document stresses that automation and conventions help enforce best practices and make code more understandable for future engineers.

Code ceptioninstallationAndrii Lagovskiy

Codeception is a modern PHP testing framework inspired by behavior-driven development. It allows writing acceptance, functional, and unit tests. The document provides instructions on installing Codeception via Composer, generating tests, and writing a basic test to check that a site's front page contains the word "Home". It recommends Codeception for testing every project and emphasizes the importance of testing.

Continuous Integration for front-end JavaScriptLars Thorup

Use Node.js to create a REST APIFabien Vauchelles

Testing Web ApplicationsSeth McLaughlin

The document discusses effective testing methodologies for JavaScript web applications, emphasizing the importance of processes such as code review, static analysis, unit testing, and end-to-end testing. It highlights tools like ESLint for static analysis and Mocha for unit testing, along with techniques for integrating continuous testing into the development workflow. The content illustrates a workflow timeline from code commit to production deployment, incorporating feedback and bug discovery to optimize the testing process.

Григорий Шехет "Treasure hunt in the land of Reactive frameworks"Fwdays

The document discusses various state management frameworks in JavaScript, including Redux and MobX, comparing their performance and usability through a series of demos with todo lists. It highlights key features of each framework, such as Redux's predictability and MobX's simplicity with observable and mutable data. The presentation also briefly touches on other frameworks like Karet and emphasizes the importance of architectural considerations in application development.

Detecting headless browsersSergey Shekyan

The document discusses headless browsers, particularly PhantomJS, detailing their legitimate uses such as web application testing and SEO, alongside potential malicious applications like botnets and content scraping. It outlines the differences between headless and regular browsers, including detection techniques and risks associated with misuse. The authors also provide guidelines for safely using headless browsers and recommendations for web admins to combat unauthorized access.

Node pptTamil Selvan R S

This document provides an overview of Node.js, including common uses, a simple "Hello World" example server, how Node.js is an event-driven platform rather than just a web server, its single-threaded asynchronous architecture based on an event loop, prerequisites for programming in Node.js like understanding callbacks and closures, its module system and use of npm, challenges of asynchronous programming, common patterns and antipatterns, and difficulties of debugging and monitoring Node.js applications.

System webpack-jspmJesse Warden

This document discusses JavaScript module systems including CommonJS, RequireJS, Browserify, ES6 modules, Webpack, and JSPM. It begins with a history of JavaScript modules and loading external scripts. It then covers CommonJS for Node.js, RequireJS for asynchronous loading in browsers, and Browserify for using CommonJS modules in browsers. ES6 modules are described as the standard module solution. Webpack is presented as a module bundler with many features. Finally, JSPM is discussed as a package manager that works with SystemJS to provide modules from npm and GitHub for both browsers and Node.js.

Writing Software not Code with CucumberBen Mabey

The document discusses the principles of behavior-driven development (BDD) and emphasizes its mindset over tools like RSpec and Cucumber. It highlights the importance of clearly defining features, user actions, and business value to deliver effective software outcomes. Additionally, it addresses common pitfalls in software development such as bug introduction during the requirements phase and the need for effective documentation and workflows.

CasperJSLearningTech

CasperJS is an open source navigation scripting and testing utility written in JavaScript that eases the process of defining navigation scenarios and provides functions for common tasks like filling forms, clicking links, taking screenshots, and testing websites. It uses the PhantomJS or SlimerJS headless browsers under the hood. The Casper API provides methods like start(), then(), run(), and exit() to control navigation and run test suites, as well as utilities like fill(), click(), evaluate(), and waitForSelector() to interact with pages.

A few good JavaScript development toolsSimon Kim

The document discusses several tools for JavaScript development including: 1. ECMAScript 6 for new JavaScript features, Visual Studio Code for editing, and Node.js & npm for modules. 2. Build tools like webpack, Babel, and UglifyJS to bundle, transpile, and minimize code. 3. Testing with Jasmine and debugging with Chrome Developer Tools and source maps. 4. Documentation generation with YUIDoc. A demo project is provided at https://github.com/simonkim/jstools-demo to show how to use these tools together in a workflow.

Nightwatch JS for End to End TestsSriram Angajala

This document compares popular JavaScript automation frameworks for testing Node.js applications, including Protractor, WebdriverIO, and NightwatchJS. It provides details on each framework, such as supported features, syntax, and advantages. NightwatchJS is highlighted as a good option for end-to-end testing due to its built-in test runner, support for parallel testing, cross-browser testing, and mobile testing. While it requires callbacks, NightwatchJS has an easy syntax, inbuilt debugging, and is overall presented as a strong framework for end-to-end testing of Node.js applications.

Introduction to Node.jsVikash Singh

The document provides an overview of Node.js, a server-side JavaScript framework developed by Ryan Dahl in 2009, highlighting its event-driven, non-blocking I/O model that makes it efficient for network applications. It includes examples of creating various servers and discusses the Node.js ecosystem, including the use of modules and the Node Package Manager (npm). Additionally, it addresses the situations where Node.js is advantageous and scenarios where it may not be ideal, along with a list of companies utilizing Node.js in production.

[CLIW] Web testingBogdan Gaza

GlobalLogic Test Automation Online TechTalk “Playwright — A New Hope”GlobalLogic Ukraine

Денис Резник "Relational Database Design. Normalize till it hurts, then Denor...Fwdays

Илья Климов "О драконах ни слова"Fwdays

Документ представляет собой размышления Ильи Климова о разнообразных аспектах программирования и сообществе разработчиков, включая критические замечания о фреймворках и их влиянии на мышление программистов. Он обсуждает ошибки и достижения сообщества, а также поднимает вопросы о реальности и преждевременных выводах в разработке. Основной вывод заключается в том, что разработчикам необходимо постоянно адаптироваться и развиваться, чтобы оставаться конкурентоспособными.

More Related Content

What's hot (20)

Test-Driven JavaScript Development (JavaZone 2010)Christian Johansen

Asynchronous Module Definition (AMD)xMartin12

"How to Use Bazel to Manage Monorepos: The Grammarly Front-End Team’s Experie...Fwdays

"Applied Enterprise Metaprogramming in JavaScript", Vladyslav DukhinFwdays

JavaScript + Jenkins = Winning!Eric Wendelin

Code ceptioninstallationAndrii Lagovskiy

Continuous Integration for front-end JavaScriptLars Thorup

Use Node.js to create a REST APIFabien Vauchelles

Testing Web ApplicationsSeth McLaughlin

Григорий Шехет "Treasure hunt in the land of Reactive frameworks"Fwdays

Detecting headless browsersSergey Shekyan

Node pptTamil Selvan R S

System webpack-jspmJesse Warden

Writing Software not Code with CucumberBen Mabey

CasperJSLearningTech

A few good JavaScript development toolsSimon Kim

Nightwatch JS for End to End TestsSriram Angajala

Introduction to Node.jsVikash Singh

[CLIW] Web testingBogdan Gaza

GlobalLogic Test Automation Online TechTalk “Playwright — A New Hope”GlobalLogic Ukraine

Test-Driven JavaScript Development (JavaZone 2010)Christian Johansen

Asynchronous Module Definition (AMD)xMartin12

"How to Use Bazel to Manage Monorepos: The Grammarly Front-End Team’s Experie...Fwdays

"Applied Enterprise Metaprogramming in JavaScript", Vladyslav DukhinFwdays

JavaScript + Jenkins = Winning!Eric Wendelin

Code ceptioninstallationAndrii Lagovskiy

Continuous Integration for front-end JavaScriptLars Thorup

Use Node.js to create a REST APIFabien Vauchelles

Testing Web ApplicationsSeth McLaughlin

Григорий Шехет "Treasure hunt in the land of Reactive frameworks"Fwdays

Detecting headless browsersSergey Shekyan

Node pptTamil Selvan R S

System webpack-jspmJesse Warden

Writing Software not Code with CucumberBen Mabey

CasperJSLearningTech

A few good JavaScript development toolsSimon Kim

Nightwatch JS for End to End TestsSriram Angajala

Introduction to Node.jsVikash Singh

[CLIW] Web testingBogdan Gaza

GlobalLogic Test Automation Online TechTalk “Playwright — A New Hope”GlobalLogic Ukraine

Viewers also liked (20)

Денис Резник "Relational Database Design. Normalize till it hurts, then Denor...Fwdays

Илья Климов "О драконах ни слова"Fwdays

Сергей Калинец "Не SQL-ом единым..."Fwdays

The document discusses the author's experiences and insights on .NET development, particularly the challenges with ORM frameworks like Entity Framework and the advantages of using micro ORMs like Dapper and PetaPoco. It highlights issues such as the object-relational impedance mismatch and introduces NoSQL databases as alternatives, emphasizing event sourcing as a solution to manage data effectively. Additionally, it mentions the persistence of SQL in the context of various data storage approaches and provides resources for further exploration.

All roads lead to romeStasys Baubkus

The document discusses the influence of the Roman Empire on culture and architecture. It notes that the Roman Empire played an important role throughout history with a powerful military and economy. It influenced politics, architecture, religion, and art across Asia, Europe and Africa. Specifically, the Byzantine Empire influenced Turkish culture with architectural structures still standing today. Additionally, Roman structures like bridges and fountains can still be seen in the local area discussed. Christianity also spread with the influence of the Roman Empire, with churches still present across Turkey today. The document concludes that Rome contributed greatly to art and influenced many explorers and inventors with "all roads leading to Rome".

All Roads Lead to Rome...JimmyJackson182

The document discusses key systems that allowed the Roman Empire to prosper: transportation, currency, and aqueducts. The Roman road network grew to over 50,000 miles, facilitating trade and security across the large empire. A standardized Roman currency and system of weights and measures also promoted commerce. Aqueducts transported water over long distances, up to 50 miles, enabling cities to flourish with clean drinking water. These infrastructures made the empire's expansion and economic success possible.

MS Patient Summit 2015, Rome: General SlidesSPEM - Sociedade Portuguesa de Esclerose Múltipla

The document outlines the agenda for the MS Patient Summit in Rome. The summit will include sessions on patient rights in research and treatment, influencing healthcare decision-making, and becoming an expert patient. There will be keynote speeches, panel discussions, and breakout groups on these topics. Participants will also have opportunities to share best practices and provide feedback to the larger plenary group. The overall goal is to empower people with MS and strengthen their voice in the healthcare system.

Roman architectonic elementshappyhospital

The Romans adapted architectonic elements from the Greeks for their urban needs. The Roman orders, including the Tuscan, Doric, Ionic, Corinthian and Composite orders, were modifications of the Greek orders. A key characteristic of Roman design was the combined use of the arch constructed with a lintel. Common Roman architectural features still used in modern buildings include columns, cornices, pediments, acroteria, triglyphs and metopes, and arches with lintels.

18. roman life #2drfishpp

The document provides details about reconstructed models and artifacts from ancient Roman life. It describes replicas of Roman apartments, cities, market stalls, bakeries, villas with mosaic floors and dining rooms. Bathrooms, baths, aqueducts, theaters and other structures are mentioned. Specific locations in Rome are called out like the Palatine Hill, Circus Maximus, Appian Way and temples dedicated to various gods. Religious practices and roles of women like priestesses, Vestal Virgins and those serving Isis are outlined. Images are included of statues, altars, sarcophagi and more helping to illustrate what life was like in ancient Rome.

Roman City dig, session 9, 2012: Nutrition in the Ancient World, by Kristin D...Ecomuseum Cavalleria

The document discusses evidence of Roman dining customs from archaeological excavations, artifacts, and literature. Excavations have uncovered nutritional remains, pottery, and preserved foods that provide evidence of animals consumed and preparation practices. Pottery types include kitchen wares, mortars, and amphorae used for storage and transport. Artworks depict table settings and market scenes. Literature such as cookbooks and writings from Pliny the Elder and Younger describe meal structures, menus, and recipes. The typical Roman meal pattern changed over time from breakfast, lunch, and dinner to breakfast, a lighter lunch, and dinner.

Roman CivilizationMercy Junfandi

The document summarizes aspects of society in ancient Rome and how they have changed in modern Rome. In ancient Rome, society was stratified into patricians, plebeians, clients, liberti, and slaves. Education involved corporal punishment and was only available to boys. The main languages were Latin and Greek. Rome's geographical reach was at its peak under the Roman Empire. Over time, slavery disappeared, education became accessible to all without violence, and Italian replaced Latin as the dominant language in modern Rome. The governmental system also changed from a monarchy to a parliamentary republic to better serve economic and political needs.

Roman citiesescolaribatallada

Roman cities had a rectangular shape and were built around a grid system of parallel streets that intersected at right angles. The most important streets were the cardo maximus, which ran north-south, and the decumanus, which ran east-west. These two wide streets met at the center of the city, where the forum and markets were located. The forum was a large public square surrounded by temples, government buildings, and courts of law. Other common features of Roman cities included walls and gates for defense, baths, amphitheaters for entertainment, and circuses for chariot races.

The romans in Britainlmtornero

The document summarizes the Roman conquest of Britain in three periods. First, it describes the native Britons who lived in tribes ruled by kings or queens and whose religion was led by the Druids. Second, it explains Julius Caesar's initial invasion in the 1st century BC and his inability to fully conquer Britain. Third, it outlines the full invasion and conquest of Britain as a Roman province led by Emperor Claudius in the 1st century AD under the governorship of Aulus Plautius.

National pensions instituteNidhi Thigale

The document describes the site plan and design of the National Pensions Building in Helsinki, Finland. The building occupies a triangular plot behind the main road and is surrounded by older buildings. It is a government office building constructed of brick cladding with a modern style. Plans, sections, and details are provided showing the main hall, upper floors, ceramic tile walls, and metal ceiling panels containing heating units.

Unit 02E - Roman Architecture and Town PlanningCharlotte Jaram

The document discusses the urban planning and architectural features of the ancient towns of Ostia and Pompeii, highlighting key structures such as forums, baths, and theatres. It details the evolution of their water supply systems, town layouts, and notable buildings, including the Capitolium and various temples in Ostia, as well as the amphitheatres and baths in Pompeii. The influence of Roman engineering and urban design on the development of these sites during the imperial era is emphasized throughout the document.

Romen dwellingsNidhi Thigale

Roman dwellings came in three main types: 1. Insulae - Apartment buildings for common people with shops on the ground floor and living spaces above, sometimes up to 8 stories. Water did not reach upper floors so public baths and latrines were provided. 2. Domus - Houses for wealthy individuals with courtyards and peristyle gardens, rooms arranged around atriums and impluvia for collecting rainwater. 3. Villas - Lavish country estates with open plans, mosaic floors, and landscaped grounds including gardens, fountains, and halls. Villas included rooms for owners, staff, and storage.

A roman citypedrote22

The document provides instructions for students to plan and design a model Roman city. It explains that Roman cities were built around a grid plan with two main roads intersecting in the center and four gates. It lists the types of buildings needed in a Roman city including a basilica, temples, markets, baths, a stadium, theater, and walls for protection. Students will work in groups to research and design one aspect of the city like roads or a temple. The groups will present their plans to the emperor who will help draft a preliminary city map. Then each student can contribute to drawing and painting the final model Roman city plan.

Symfony Guard Authentication: Fun with API Token, Social Login, JWT and moreRyan Weaver

The document provides a comprehensive overview of implementing authentication in Symfony using Guard, including steps for user credential validation, form login setup, and JWT authentication. It discusses various classes involved, the user provider interface, and how to handle authentication success and failure. Additionally, it touches on integrating social login via Facebook and outlines the necessary configurations and code snippets for implementing these features.

9. F2011 Cities of Roman BritainRobert Ehrlich

The City in Roman Britain discusses the types of settlements in Roman Britain including Roman coloniae, municipia, and oppida which were Romano-Celtic civitas capitals that had some self-government. It describes the economy including imports of olive oil, fish sauce, pottery, wine and marble as well as exports of iron, lead, silver, and wool. Industries included weaving, mosaic making, metalworking and pottery production. Larger cities included London, Cirencester, Verulamium (St Albans), and Wroxeter, while ports also served as cities. It provides examples of civitas capitals and discusses the development of sites from small settlements to cities under

A Buried Roman City, Pompeii Makala D.

"Посмотрим на Акку-Джаву" Дмитрий МантулаFwdays

Документ описывает развитие вычислительных систем, включая управляемые сервера и контейнеры, а также важные тренды, такие как масштабируемость и высокая доступность. Он также рассматривает концепции реактивного программирования, особенности акторов и их использование в различных языках программирования, таких как Java и Scala, а также включает ссылки на различные версии 'Reactive Manifesto'. Дополнительно упоминаются компоненты экосистемы Akka и их применение в построении надежных систем.

Денис Резник "Relational Database Design. Normalize till it hurts, then Denor...Fwdays

Илья Климов "О драконах ни слова"Fwdays

Сергей Калинец "Не SQL-ом единым..."Fwdays

All roads lead to romeStasys Baubkus

All Roads Lead to Rome...JimmyJackson182

MS Patient Summit 2015, Rome: General SlidesSPEM - Sociedade Portuguesa de Esclerose Múltipla

Roman architectonic elementshappyhospital

18. roman life #2drfishpp

Roman City dig, session 9, 2012: Nutrition in the Ancient World, by Kristin D...Ecomuseum Cavalleria

Roman CivilizationMercy Junfandi

Roman citiesescolaribatallada

The romans in Britainlmtornero

National pensions instituteNidhi Thigale

Unit 02E - Roman Architecture and Town PlanningCharlotte Jaram

Romen dwellingsNidhi Thigale

A roman citypedrote22

Symfony Guard Authentication: Fun with API Token, Social Login, JWT and moreRyan Weaver

9. F2011 Cities of Roman BritainRobert Ehrlich

A Buried Roman City, Pompeii Makala D.

"Посмотрим на Акку-Джаву" Дмитрий МантулаFwdays

Similar to Роман Лютиков "Web Apps Performance & JavaScript Compilers" (20)

Cut it upFITC

1) The document discusses code splitting strategies for bundling JavaScript applications, including route-based code splitting, splitting on-demand components, and using the Split Chunks plugin. 2) It recommends optimizing lazy loading through techniques like prefetching and using IntersectionObserver to preload resources the user may visit. 3) The key code splitting strategies discussed are route-based splitting, splitting common dependencies, and splitting asynchronous or on-demand components.

Google closure compilerPrasad Kancharla

Closure Compiler is an open source tool from Google that compiles JavaScript code to make it more compact and efficient. It parses JS, removes dead code, rewrites code, and minimizes file size. It can be used via a web interface, REST API, or Java application. It offers three compilation levels - whitespace only, simple optimizations, and advanced optimizations - that provide increasing levels of code compression and optimization by renaming variables, inlining functions, and other transformations.

Browser Internals for JS Devs: WebU Toronto 2016 by Alex BlomAlex Blom

The document discusses browser internals with a focus on JavaScript development, highlighting the roles of various browser components like the DOM tree, render tree, and layout processes. It emphasizes best practices for optimizing performance, managing reflows, and memory usage within JavaScript applications. Additionally, it covers the compilation process of JavaScript within the V8 engine, including optimizations and handling of hidden classes.

JS Module ServerSzabolcs Szabolcsi-Tóth

The document discusses the challenges of JavaScript loading and code organization in web applications, emphasizing the drawbacks of static loading and the inefficiencies of current methods. It proposes using async loading of modular JavaScript to improve performance and reduce redundancy by allowing the server to handle dependency management. The goal is to serve only necessary modules dynamically for a better user experience and overall faster page load times.

JavaScript front end performance optimizationsChris Love

The document discusses front-end performance optimizations for web applications, emphasizing the importance of faster load times for user experience and engagement. It provides best practices for managing JavaScript, DOM interactions, and third-party scripts, along with profiling tools and techniques for improving site performance. Key recommendations include reducing file requests, minimizing the use of unnecessary libraries, and implementing effective caching and compression strategies.

JS Fest 2019. Minko Gechev. Building Fast Angular Applications by DefaultJSFestUA

The document outlines strategies for improving the performance of Angular applications, including techniques such as lazy loading, differential loading, and server-side rendering. It emphasizes the importance of reducing JavaScript bundle sizes and optimizing code to enhance user experience and application efficiency. Additionally, it highlights the use of Angular CLI for deployment and management of performance enhancements.

Webpack essentails - feb 19, 2020Jesse Colligan

The document provides an overview of Webpack, emphasizing performance optimization techniques such as build time reduction, bundle size minimization, and browser loading strategies like code splitting. It discusses the importance of optimizing Webpack for varied user environments and highlights specific methods like tree shaking and minification to improve application performance. Additional insights include monitoring and analysis tools for managing module sizes and suggestions for further exploration of Webpack's ecosystem.

Future-proof Development for Classic SharePointBob German

The document outlines a presentation given by Bob German at a conference on future-proof development for classic SharePoint. It covers topics including code container architecture, the usage of TypeScript, modern JavaScript features, and tools like Webpack for building and bundling applications. Additionally, it provides resources for further learning and addresses migration strategies between on-premises and Office 365 environments.

Performance Optimization and JavaScript Best PracticesDoris Chen

The document presents performance optimization strategies and best practices for JavaScript development by Doris Chen, a developer evangelist at Microsoft. It covers essential topics such as minimizing communication between client and server, avoiding premature optimization, and ensuring a clean separation of content, CSS, and JavaScript. Additional practices include asynchronous programming, resource management, and maintaining high code quality to enhance web application performance.

JavaScript Growing UpDavid Padbury

JavaScript is evolving with the addition of modules, platform consistency, and harmony features. Modules allow JavaScript code to be organized and avoid naming collisions. CommonJS and AMD module formats are used widely. Platform consistency is improved through polyfills that mimic future APIs for older browsers. Harmony brings language-level modules and features like destructuring assignment, default parameters, and promises to JavaScript. Traceur compiles Harmony code to existing JavaScript.

Progressive transpilation and the road to ES2015 in productionJacques Favreau

The document discusses the transition to ES2015 at Netflix, focusing on the goals of enhancing user and developer experiences. It highlights the challenges of transpilation, legacy support, and browser compatibility while outlining a progressive approach to implementing ES2015 features. The future approach includes using Babel for transpilation and targeting modern browsers, with a fallback plan for older versions.

From Hacker to Programmer (w/ Webpack, Babel and React)Joseph Chiang

The document discusses the challenges of front-end development without proper tools and methodologies. It describes tag soup code that is difficult to read and maintain. It also discusses issues like duplicate code, global variables, lack of module loading and dependencies. The document then introduces concepts like package management, CSS preprocessors, JavaScript module loaders, transpilers and build tools that help address these issues. It argues these tools help create a foundation for building user interfaces and applications in a more efficient and sustainable way.

Ten useful JavaScript tips & best practicesAnkit Rastogi

Front end-modernizationColdFusionConference

This document discusses strategies for modernizing front-end codebases in an incremental way. It suggests starting with basic modularization by splitting code into logical chunks and concatenating/minifying files. Next steps include loading modules on demand using various module systems. Graceful deprecation is recommended over breaking changes. The document also advocates trying new frameworks on side projects first before adopting one. Maintaining good development practices like testing, linting and performance testing is emphasized over choosing the latest frameworks.

Front end-modernizationdevObjective

This document discusses strategies for modernizing front-end codebases in an incremental way. It recommends starting with basic modularization by splitting code into logical chunks, then concatenating and minifying files. Next steps include loading modules on demand using various module systems. Graceful deprecation is advised by keeping deprecated code available temporarily while logging its usage. Framework choices should be informed by building prototypes in different options. Overall modernization should prioritize tools like testing, linting and performance testing over choosing specific frameworks. Changes should be made gradually to avoid diverging from existing workflows.

Front-End Modernization for Mortalscgack

This document discusses strategies for modernizing front-end codebases in an incremental way. It suggests starting with basic modularization by splitting code into logical chunks, then concatenating and minifying modules. Next steps include loading modules on demand using various module systems. Graceful deprecation is recommended over breaking changes. The document also advocates trying new frameworks on side projects first before adopting one. Maintaining good development practices like testing, linting, code style rules and performance testing is emphasized over choosing any particular framework.

Javascript Performanceolivvv

The document provides guidelines and best practices for optimizing JavaScript code. It discusses when optimization may not be needed, as JavaScript engines continue to improve in speed. It identifies potentially expensive operations like XMLHttpRequests to servers and DOM interactions. It also notes the complexity of JavaScript engines and compilers, and that hand optimizations may not help and could make code less readable. Profiling is recommended before optimizing.

Intro to ReactTroy Miles

The document provides an overview of key programming concepts and tools relevant to modern JavaScript development, particularly focusing on React. It covers topics such as immutability, pure functions, state management, and essential libraries like Babel, Webpack, and Create React App. The document also highlights best practices for coding, including the use of ES6 features, component structures in React, and the Flux architecture for data flow.

Stanislav Khorunzhyi, "Front-end it like a PRO"Sigma Software

This document provides 12 tips for front-end developers to code like a pro, including always using form tags for forms, adding labels for inputs, configuring linters from the beginning, adding Git hooks to run linters on commit/push, understanding transpilation processes, using modern array methods, and optimizing final bundles through lazy loading and bundle analysis. Key recommendations are to focus on semantics, accessibility, best practices for code quality and performance.

ES6 SimplifiedCarlos Ble

This document discusses ES6 features and best practices for using them. It covers new features like let and const, arrow functions, classes, modules, destructuring, default parameters, and promises. It emphasizes keeping code simple, using context appropriately, and favoring powerful yet simple features. Tools like Babel, Gulp and Karma are recommended for compiling, building workflows and testing ES6 code.

Cut it upFITC

Google closure compilerPrasad Kancharla

Browser Internals for JS Devs: WebU Toronto 2016 by Alex BlomAlex Blom

JS Module ServerSzabolcs Szabolcsi-Tóth

JavaScript front end performance optimizationsChris Love

JS Fest 2019. Minko Gechev. Building Fast Angular Applications by DefaultJSFestUA

Webpack essentails - feb 19, 2020Jesse Colligan

Future-proof Development for Classic SharePointBob German

Performance Optimization and JavaScript Best PracticesDoris Chen

JavaScript Growing UpDavid Padbury

Progressive transpilation and the road to ES2015 in productionJacques Favreau

From Hacker to Programmer (w/ Webpack, Babel and React)Joseph Chiang

Ten useful JavaScript tips & best practicesAnkit Rastogi

Front end-modernizationColdFusionConference

Front end-modernizationdevObjective

Front-End Modernization for Mortalscgack

Javascript Performanceolivvv

Intro to ReactTroy Miles

Stanislav Khorunzhyi, "Front-end it like a PRO"Sigma Software

ES6 SimplifiedCarlos Ble

More from Fwdays (20)

"Scaling in space and time with Temporal", Andriy Lupa.pdfFwdays

Design patterns like Event Sourcing and Event Streaming have long become standards for building real-time analytics systems. However, when the system load becomes nonlinear with fast and often unpredictable spikes, it's crucial to respond quickly in order not to lose real-time operating itself. In this talk, I’ll share my experience implementing and using a tool like Temporal.io. We'll explore the evolution of our system for maintaining real-time report generation and discuss how we use Temporal both for short-lived pipelines and long-running background tasks.

"Database isolation: how we deal with hundreds of direct connections to the d...Fwdays

What can go wrong if you allow each service to access the database directly? In a startup, this seems like a quick and easy solution, but as the system scales, problems appear that no one could have guessed. In my talk, I'll share Solidgate's experience in transforming its architecture: from the chaos of direct connections to a service-based data access model. I will talk about the transition stages, bottlenecks, and how isolation affected infrastructure support. I will honestly show what worked and what didn't. In short, we will analyze the controversy of this talk.

"Scaling in space and time with Temporal", Andriy Lupa .pdfFwdays

"Provisioning via DOT-Chain: from catering to drone marketplaces", Volodymyr ...Fwdays

" Observability with Elasticsearch: Best Practices for High-Load Platform", A...Fwdays

"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...Fwdays

"Istio Ambient Mesh in production: our way from Sidecar to Sidecar-less",Hlib...Fwdays

This talk is dedicated to the practical experience of transitioning from the classic Istio architecture with sidecar containers to a new model - Istio Ambient Mesh. We will tell how scaling a microservice infrastructure on Kubernetes led to increased resource costs, complicated CI/CD, and delays in launching services. The search for solutions led us to implement Ambient Mesh, an architecture without sidecar containers that greatly simplifies mesh integration and reduces infrastructure costs. The presentation will detail the technical aspects of the migration: how we prepared for the transition, what challenges we faced during the implementation process, and how we managed to overcome them in cooperation with the Istio community. We will share the results, analytics, real before/after metrics, and give practical advice to teams planning to implement Ambient Mesh in production.

" How to survive with 1 billion vectors and not sell a kidney: our low-cost c...Fwdays

Let's talk about our history. How we started the project with a small vector database of less than 2 million records. Later, we received a request for +100 million records, then another +100... And so gradually we reached almost 1 billion. Standard tools were quickly running out of steam - we were running into performance, index size, and very limited resources. After a long series of trials and errors, we built our own low-cost cluster, which today stably processes thousands of queries to more than 1B vectors.

"Confidential AI: zero trust concept", Hennadiy KarpovFwdays

Synopsys: Can you completely exclude a cloud provider from your "trust domain"? The latest Confidential Computing technology makes unauthorized access to your data, models, and datasets technically impossible — even when they are stored and processed on platforms (including cloud environments) fully owned and controlled (physically and at the hypervisor level) by third parties. Want to know how it works?

"Choosing Tensor Accelerators for Specific Tasks: Compute vs Memory Bound Mod...Fwdays

As an infrastructure provider, we often see that potential clients are somewhat disoriented when it comes to choosing the right accelerators. The technology evolves rapidly, and questions like “What’s out there?”, “How do these cards differ?”, and “Which ones are better?” are completely valid. But the selection criteria are far from simple. In this talk, we’ll explain key concepts such as compute-bound vs memory-bound models, arithmetic intensity, and model quantization—factors that are crucial when choosing the right hardware for your workload.

"Custom Voice Assistants: Infrastructure, Integrations, and Uniqueness", Yeho...Fwdays

"Different Facets of AI: Computer Vision and Large Language Models. How We De...Fwdays

An overview of practical cases in building AI-based systems. In the pharmaceutical industry, we implemented a computer vision solution for automated visual quality control of vial contents. The system detects defects in real time, integrates into existing production lines, and reduces costs compared to traditional inspection machines. In the public sector, we launched a service based on large language models (LLMs) to review applications for participation in international youth exchange programs. This service is integrated into the national registry platform, provides fast feedback to applicants, and sets a precedent for the use of LLMs in products built on the Diia.Engine framework.

"Machine Learning in Agriculture: 12 Production-Grade Models", Danil PolyakovFwdays

Kernel is currently the leading producer of sunflower oil and one of the largest agroholdings in Ukraine. What business challenges are they addressing, and why is ML a must-have? This talk explores the development of the data science team at Kernel—from early experiments in Google Colab to building minimal in-house infrastructure and eventually scaling up through an infrastructure partnership with De Novo. The session will highlight their work on crop yield forecasting, the positive results from testing on H100, and how the speed gains enabled the team to solve more business tasks.

"Using AI to Automate Operational Processes at MK-Consulting", Maxim Korzhene...Fwdays

"AI in the browser: predicting user actions in real time with TensorflowJS", ...Fwdays

With AI becoming increasingly present in our everyday lives, the latest advancements in the field now make it easier than ever to integrate it into our software projects. In this session, we’ll explore how machine learning models can be embedded directly into front-end applications. We'll walk through practical examples, including running basic models such as linear regression and random forest classifiers, all within the browser environment. Once we grasp the fundamentals of running ML models on the client side, we’ll dive into real-world use cases for web applications—ranging from real-time data classification and interpolation to object tracking in the browser. We'll also introduce a novel approach: dynamically optimizing web applications by predicting user behavior in real time using a machine learning model. This opens the door to smarter, more adaptive user experiences and can significantly improve both performance and engagement. In addition to the technical insights, we’ll also touch on best practices, potential challenges, and the tools that make browser-based machine learning development more accessible. Whether you're a developer looking to experiment with ML or someone aiming to bring more intelligence into your web apps, this session will offer practical takeaways and inspiration for your next project.

"Interactive problems", Yuri Artiukh. JavaScriptFwdays

Web Vitals: Try to Improve Me, Oleksandr MostovenkoFwdays

May the blocks be with you – How to Integrate Crypto Payments Without Stress ...Fwdays

Let's break down how to integrate crypto payments into your product without unnecessary headaches. We’ll quickly go through blockchain basics: what blocks and transactions are, the types of networks, and what distinguishes USDT from ETH beyond just their names. We’ll connect to the blockchain via Testnet, Mainnet, our own node, or third-party APIs - examining what’s more cost-effective, faster, and more secure. We’ll create a crypto wallet, learn how to track transactions, sign them, and send them to the blockchain. And, of course, we’ll focus on security: where to store private keys, how to avoid dirty money, and what to do if your crypto is already showing up where it shouldn’t. No fluff - just code, practice, and a bit of blockchain magic.

Від KPI до OKR: як синхронізувати продажі, маркетинг і продукт, щоб бізнес ре...Fwdays

Часто компанії застрягають у постійній боротьбі між департаментами: маркетинг веде мало (або «не тих») лідів, сейли не можуть їм продати, а коли таки продають, то продакти кажуть, що клієнти «не ті» й у нас немає для них продукту… Звісно, що CEO хоче краще RoI і закриті показники вже вчора. В результаті – кожен успішно виконує свої KPI, але компанія не росте. Знайомо? Ця доповідь про те, як об’єднати ключові функції навколо спільних цілей і створити реальну систему завдяки OKR. 💸 Ми розберемо: Чому KPI не допомагають рости, а OKR – можуть. Як правильно формувати цілі і ключові результати, щоб усі працювали в одному напрямку. Як інтегрувати OKR у продуктову стратегію. Як уникнути типових фейлів впровадження OKR. Ну і традиційно живі приклади, трохи сарказму і практичні поради.

"Demand Generation: How a Founder’s Brand Turns Content into Leads", Alex Her...Fwdays