Angular :: basic tuning performance

© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved.
ทำไม App ช้า ๆ แก้หน่อยสิ !!

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 2

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 3
Tuning perfomance
Investigate
Fix
Measure

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 4
Code splitting
Preload strategy
Performance budget
Differential loading
Initial load time

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 5
Building

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 6
Building
Development build
$ng build
Production build
$ng build --prod

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 7
Dev vs. Prod build
Dev Prod
Environment environment.ts environment.prod.ts
Cache-busting Only image ref from css All build files
Source maps Generated Not generated
Extracted CSS Global CSS to .js To .css
Uglification No Yes
Bundling Yes Yes
AOT No Yes

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 8
Prod build :: Smaller & Faster
Dev Prod
Environment environment.ts environment.prod.ts
Cache-busting Only image ref from css All build files
Source maps Generated Not generated
Extracted CSS Global CSS to .js To .css
Uglification No Yes
Bundling Yes Yes
AOT No Yes

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 9
Building

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 10
Building with source maps
$npm install source-map-explorer --save-dev
$ng build --prod --source-map
https://angular.io/guide/deployment

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 11
Analyse sources

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 12
Analyse sources

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 13
Tips source maps
angular.json

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 14
Sentry
https://docs.sentry.io/platforms/javascript/sourcemaps/#uploading-source-maps-to-sentry

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 15
Sentry without source maps
https://docs.sentry.io/platforms/javascript/sourcemaps/#uploading-source-maps-to-sentry

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 16
ขอสวย ๆ กว่านี้หน่อยสิ

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 17
Sentry
https://docs.sentry.io/platforms/javascript/sourcemaps/#uploading-source-maps-to-sentry

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 18
เรื่องฮา ๆ แต่เจ็บ

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 19

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 20
Listing

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 21
Using trackBy in ngFor
Ensure only the list element that has changed
will be rendered (Not all)

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 22
Using trackBy in ngFor
Ensure only the list element that has changed
will be rendered (Not all)

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 23
Listing
Using ngFor directive
https://angular.io/api/common/NgForOf#ngForTrackBy

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 24
Common solution from Doc
Using ngFor + trackBy
https://angular.io/api/common/NgForOf#ngForTrackBy

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 25
ทำไมไม่ช่วยกูวะ !!

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 26
เร็วขึ้นนะ

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 27
แต่ไม่ต้องการให้
template render ใหม่ !!

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 28
ทำไมดีหว่า ?

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 29

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 30
Hard code ไปเลย แจ่ม !!

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 31
ไม่น่าเชื่อเร็วขึ้น 30-50% เป็นสุข

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 32
ได้แรงบัลดาลใจ

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 33
ไปค้นหา google ต่อ

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 34
กลับบ้านไปเขียน code

Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 35
กลับบ้านไปเขียน code
เขียน test ด้วยนะ

In the front-end and Node.js ecosystems, we’ve had two extinction-level events: left-pad and pinkie-promise. These events were both caused by something simple - a module became temporarily unavailable. Something seemingly innocuous caused thousands of developers and businesses builds to break and installs to fail. They weren’t prepared, and many were eager to blame npm as the single point of failure of the entire JavaScript ecosystem. In reality, npm has made it dead-simple for developers and organizations to make sure their modules and highly available. The majority of the ecosystem isn’t aware of this, nor do they implement it effectively. In this talk, we’ll go over how the dependency tree works at a high level, how you can get bitten by it, and how you can cover your apps - both as developer and as a business.

Cips Meetup Auckland-Mirko-Kleiner-lean-agile-procurement-201904-1.0

Quality Assurance in fast paced DevOps projects using automation - Patrick Ve...

Neste: How to Build Business Case, Ramp-up and Run SAP Test Automation Factory

AgileSerbia 2019-Closing Keynote by Mirko-Kleiner about Lean-Agile Procurement

Is React The Best Thing Since Sliced Bread?

Synerzip

In this webinar, we’ll cover fundamentals of the React library, including how state is managed and how to combine it with other popular JavaScript libraries to minimize development effort and maximize your capabilities. Covered in this webinar: - What are React’s strengths? - How does it compare to other popular frameworks? - Does React use an MVC paradigm or something else? - What are other popular JS libraries that are often combined with React?

Virgin Media's WebEx Social to Jive Content Migration Story

Sei Mani

Agile Quality Improvement 7: common challenges and good practices - Wouter Ru...

SCK Firestore at CNX

Clean you code

CWIN17 telford application integration and ap is - lisa eckersley

Capgemini

Javascript for Enterprise Application

Soham Dasgupta

Automatic for the People

Allon Mureinik

Being a maintainer, or even a notable contributor in an open source project is a damn hard job. Not only are you expected to tackle the hardest programming tasks, but suddenly you're also expected to do all these "softer" things - review other people's work, provide feedback, ramp up other contributors, etc. In this talk from DevConf.us 2018, I've shown how your gut instinct as an engineer - to automate everything - can actually work here too (at least to a certain degree), and take a lot of the load off your shoulders.

Modernizing Service Management Processes with Self-Service Access

ITSM Academy, Inc.

Webinar - Nick Schneider - Driven by a range of initiatives: DevOps, Digital Transformation, Modern Operations, etc - today Infrastructure and Operations organizations are experiencing growing pressure to modernize established ITSM processes and practices. The impetus is help streamline and accelerate software and service delivery to safely improve their organization’s speed, agility and responsiveness to the market. This presentation will provide real world experiences and practical guidance on how to modernize key processes with Self Service Access to safely empower software developers with autonomy, feedback loops and visibility across the end to end SDLC (Software Development Lifecycle).

Sitecore and the Future of Web Development

Adrian IORGU

What's hot

Wordpress for Newbie

Sck Agile in Real World

vTalk#1 Microservices with Spring Boot

Your Flight is Boarding Now!

MeetupDataScienceRoma

Microservices and APIs

Puneet Sachdev

CWIN17 telford api management, practical implementation experience - david ru...

Capgemini

Intro to service mesh & Istio

Rinor Maloku

Cover Your Apps While Still Using npm

Tierney Cyren

Cips Meetup Auckland-Mirko-Kleiner-lean-agile-procurement-201904-1.0

Quality Assurance in fast paced DevOps projects using automation - Patrick Ve...

Neste: How to Build Business Case, Ramp-up and Run SAP Test Automation Factory

AgileSerbia 2019-Closing Keynote by Mirko-Kleiner about Lean-Agile Procurement

Is React The Best Thing Since Sliced Bread?

Synerzip

Virgin Media's WebEx Social to Jive Content Migration Story

Sei Mani

Agile Quality Improvement 7: common challenges and good practices - Wouter Ru...

What's hot (15)

Wordpress for Newbie

Sck Agile in Real World

vTalk#1 Microservices with Spring Boot

Your Flight is Boarding Now!

Microservices and APIs

CWIN17 telford api management, practical implementation experience - david ru...

Intro to service mesh & Istio

Cover Your Apps While Still Using npm

Cips Meetup Auckland-Mirko-Kleiner-lean-agile-procurement-201904-1.0

Quality Assurance in fast paced DevOps projects using automation - Patrick Ve...

Neste: How to Build Business Case, Ramp-up and Run SAP Test Automation Factory

AgileSerbia 2019-Closing Keynote by Mirko-Kleiner about Lean-Agile Procurement

Is React The Best Thing Since Sliced Bread?

Virgin Media's WebEx Social to Jive Content Migration Story

Agile Quality Improvement 7: common challenges and good practices - Wouter Ru...

Similar to Angular :: basic tuning performance

SCK Firestore at CNX

Clean you code

CWIN17 telford application integration and ap is - lisa eckersley

Capgemini

Javascript for Enterprise Application

Soham Dasgupta

Automatic for the People

Allon Mureinik

Modernizing Service Management Processes with Self-Service Access

ITSM Academy, Inc.

Sitecore and the Future of Web Development

Adrian IORGU

【Primer】WebApp release in 3 hours! Programming from scratch Rails course

DIVE INTO CODE Corp.

Magento Cloud - Introduction

Oleg Posyniak

Cloud Foundry Summit 2017

Yahoo!デベロッパーネットワーク

Elevate Your Application Security Program with Burp Suite and ThreadFix

Denim Group

Burp Suite is the premier software for web security testing, allowing organizations to deploy cutting-edge scanning technology to identify the very latest serious application vulnerabilities. ThreadFix is the industry leading vulnerability resolution platform that provides a window into the state of application security programs for organizations that build software. The combination of ThreadFix and Burp Suite allows organizations to efficiently identify security vulnerabilities, correlate and trend test results, and prioritize application risk to resolve vulnerabilities more quickly and more efficiently. This webinar will demonstrate how organizations can use ThreadFix and Burp Suite together to integrate application security into DevOps CI/CD pipelines and to track organization-wide metrics on progress finding and resolving web application vulnerabilities.

AgileDays 2019 Moscow Procurement on Disruption