Игорь Фесенко "web apps performance & javascript compilers"

Igor FesenkoSoftServe Inc.

Let's Build a Web Application (and Talk About Ways to Improve Bad Parts)

• Engineer<T> where T : C# | JavaScript | Azure• Passionate about continuous

improvements • Leading software development projects• Design cloud ready software solutions

@ky7m ifesen@softserveinc.com

Who Am I?

• Development bad parts• Continuous Delivery bad parts• Post Production bad parts• Real world mitigation scenarios

For the Next 40 Minutes…

• HTML• JavaScript• CSS• SQL• PHP / Java / ASP.NET

Rockstar Web Developer in 2003. Skills needed:

Typical Web Developer in 2016. Skills needed:

JavaScript

TypeScriptES2016

ES2015

JSX/TSX

Three.js

RxJS

jQuery

Handlebars Angular /

React / KO / Ember …

Flux

MVC

Redux

System.js

CJS

JSPMBower

AMD

ES2015 Module Webpack

BabelSource Maps

Brunch

BrowserifyRollup

Grunt/Gulp Traceur

Minifiers

BootstrapCSS resetCSS/LESS/SASS

NPM

CSP

SEO

MobileNode.js

Isomorphic / Universal

1. Get the T-shirt2. Wait for T-shirt to wear out3. Start using framework if it still exists

Criteria for new JS frameworks

Solution?

• First do no harm• I will apply, for the benefit of the

application, all measures which are required, avoiding those twin traps of anti-patterns and bad practices• I will not be ashamed to say "I know not,"

nor will I fail to call in my colleagues when the skills of another are needed for an application's recovery• I will prevent a problem whenever I can, for

prevention is preferable to cure

Hippocratic Oath

Development

https://www.tutorialspoint.com/software_engineering/software_development_life_cycle.htm

• NO Intellisense• NO Type safety• Lack of modularity• Verbose patterns (IIFE)• ECMAScript 2015/2016+ features only in

modern browsers

JavaScript and Development

• Superset of JavaScript• Optionally typed• Compiles to ES3/ES5• No special runtime• Well supported • Open Sourced• May even find problems in existing JS!

TypeScript

JavaScriptfunction logFetch(url) {  return fetch(url)    .then(response => response.text())    .then(text => {      console.log(text);    }).catch(err => {      console.error('fetch failed', err);    });}

TypeScriptasync function logFetch(url) {  try {    const response = await fetch(url);    console.log(await response.text());  }  catch (err) {    console.log('fetch failed', err);  }}

• Helpers for typical server/client integration• Embrace client & server JavaScript• Streamlined dev experience

So what can Backend do to help?

• AngularJS 2• Aurelia• Knockout• React Redux• React• … your template

ASP.NET Core JavaScript Services

• Build helpers• Development middleware• Hot module replacement (HMR)• Efficient production builds

• Server-side pre-rendering • Server-side and client-side routing

integration• Server-side and client-side validation

integration• "Cache priming" for Angular 2 apps• "Lazy loading" for Knockout apps

ASP.NET Core JavaScript Services

• yarn• npm-check-updates• slow-deps• imageoptim-cli• source-map-explorer

Node.js based tools

Browser based tools

Continuous Delivery

https://www.atlassian.com/continuous-delivery/business-case-for-continuous-delivery

• Developer commits code to source control• Code is built by a build server, tested, and

packaged• Ready for deployment• Semantic versioning

• Package is pushed to Release Management Tool• Configuration• Packages are deployed

Continuous Delivery - Process

Release Management Tool

• Build your assets once• Make distinction between "releases" and

"deployments"• Leave configuration for deploy time, not

build time• Use the same (or very similar) deployment

process for each environment• Do NOT copy only the files that changed

Continuous Delivery - Good Practices

What do you need to understand after Release?Business Health

High level metrics to track user acquisition, subscription, engagement, etc. Intended to inform the overall business health of the product.

System HealthCaptures the health of the client or the system in which the product is installed or used. Contains performance, reliability related metrics as the key constituents.

Experience HealthMeasuring the usage patterns of the product at various levels (command, activity, scenario), as well as key engineering metrics like success/engagement metrics, productivity metrics.

Extracting Knowledge from Data

Just take a one tool for your liking

and even more: https://haydenjames.io/50-top-server-monitoring-application-performance-monitoring-apm-solutions/

Application Insights

• Detect • Proactive alerts, synthetic tests and real time metrics

• Triage • Application dependencies analysis and real user impact investigations

• Diagnose • Failures and performance issues diagnostics, log analytics

• Operationalize• Alerts, dashboards and ALM integration

Detect, Triage, Diagnose & Operationalize

Application Insights - Browser

Application Insights – Enriched Logs

• Proactive failure rate diagnostics• Expected rate of failed requests, correlating with load and other factors• If the failure rate goes outside the expected envelope, send an alert

• Proactive performance diagnostics• Search for anomalous patterns in response times and failure rates • Correlate with properties such as location, browser, client OS, server

instance, and time of day.

What if power of machine learning could...

Proactive Detection

Page load performance

• Developer ecosystem matters• Know your tools• Without analytics, you could spend hours

looking and still miss so much

Summary

• Async functions - making promises friendly• Continuous Learning using Application Perfo

rmance Management & Monitoring• Application Insights for web pages• Application Insights SDK to monitor your No

de.js app• Smart Detection in Application Insights

Additional Resources

Questions

@ky7m | ifesenko.com | ifesen@softserveinc.com