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 [email protected]
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 | [email protected]
Top Related