Dive into Angular, part 5: Experience
-
Upload
oleksii-prohonnyi -
Category
Software
-
view
87 -
download
3
Transcript of Dive into Angular, part 5: Experience
![Page 1: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/1.jpg)
DIVE INTO ANGULAR,PART 5: EXPERIENCE
_by Oleksii Prohonnyi
![Page 2: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/2.jpg)
AGENDA Unit testing E2E testing Angular 2 testing SEO Which version to use Performance measurement Isolated scopes Watchers counter References
![Page 3: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/3.jpg)
UNIT TESTING
![Page 4: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/4.jpg)
UNIT TESTING
Angular comes with dependency injection built-in, which makes testing components much easier, because you can pass in a component's dependencies and stub or mock them as you wish.
Components that have their dependencies injected allow them to be easily mocked on a test by test basis, without having to mess with any global variables that could inadvertently affect another test.
See more: docs.angularjs.org
![Page 5: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/5.jpg)
UNIT TESTING: Tools
Karma is a JavaScript command line tool that can be used to spawn a web server which loads your application's source code and executes your tests.
Jasmine is a behavior driven development framework for JavaScript that has become the most popular choice for testing Angular applications.
![Page 6: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/6.jpg)
UNIT TESTING: Controller
![Page 7: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/7.jpg)
UNIT TESTING: Filter
![Page 8: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/8.jpg)
UNIT TESTING: Directive
![Page 9: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/9.jpg)
angular-mocks
Angular also provides the ngMock module, which provides mocking for your tests.
This is used to inject and mock Angular services within unit tests. In addition, it is able to extend other modules so they are synchronous.
Having tests synchronous keeps them much cleaner and easier to work with.
One of the most useful parts of ngMock is $httpBackend, which lets us mock XHR requests in tests, and return sample data instead.
See more: docs.angularjs.org
![Page 10: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/10.jpg)
E2E TESTING
![Page 11: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/11.jpg)
E2E TESTING
As applications grow in size and complexity, it becomes unrealistic to rely on manual testing to verify the correctness of new features, catch bugs and notice regressions.
Unit tests are the first line of defense for catching bugs, but sometimes issues come up with integration between components which can't be captured in a unit test.
End-to-end tests are made to find these problems.
See more: docs.angularjs.org
![Page 12: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/12.jpg)
E2E TESTING: Tools
Protractor is a Node.js program, and runs end-to-end tests that are also written in JavaScript and run with node. Protractor uses WebDriver to control browsers and simulate user actions.
For more information on Protractor, view getting started or the api docs.
Protractor uses Jasmine for its test syntax.
Note: In the past, end-to-end testing could be done with a deprecated tool called Angular Scenario Runner. That tool is now in maintenance mode.
![Page 13: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/13.jpg)
E2E TESTING: Testing scenario
![Page 14: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/14.jpg)
E2E TESTING: Example
![Page 15: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/15.jpg)
angular-seed
This project is an application skeleton for a typical AngularJS web app. You can use it to quickly bootstrap your angular webapp projects and dev environment for these projects.
The seed contains a sample AngularJS application and is preconfigured to install the Angular framework and a bunch of development and testing tools for instant web development gratification.
See more: docs.angularjs.org
![Page 16: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/16.jpg)
ANGULAR 2 TESTING
![Page 17: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/17.jpg)
ANGULAR 2 TESTING
The Angular Testing Platform (ATP) The Application Under Test First app test Test an Asynchronous Service The Angular Test Environment Test a Component Test a Component in the DOM Run the tests with karma
See more: angular.io
![Page 18: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/18.jpg)
SEO
![Page 19: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/19.jpg)
SEO
The Basics of JavaScript Framework SEO in AngularJS Ajax Crawl Directive Prerenderer.io
Angular 2 optimization:– Making an App Render Server Side– Universal Header Template– Universal Service– Universal ModelSee more: builtvisible.com
![Page 20: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/20.jpg)
WHICH VERSION TO USE
![Page 21: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/21.jpg)
WHICH VERSION TO USE: Angular 1.x Application should be developed in short terms. Team doesn’t know Angular.js at all. CRUD application. Visualizations and advanced user actions handling. Coding guidelines/code review process exists. Not Big Data rendering. Not low performance devices support.
![Page 22: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/22.jpg)
WHICH VERSION TO USE: Angular 1.5.x Application should be developed in short terms. Team doesn’t know Angular.js at all. CRUD application. Visualizations and advanced user actions handling. Coding guidelines/code review process exists. Not Big Data rendering. Angular 2 upgrade will be done. Component architecture. Distributed team. Not Low performance devices support.
![Page 23: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/23.jpg)
WHICH VERSION TO USE: Angular 2 Application should be developed in long terms. Team has experience with TypeScript, ES6. Mobile devices advanced support. Development investigation effort is presented. Experience with React.js
![Page 24: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/24.jpg)
PERFORMANCE MEASUREMENT
![Page 25: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/25.jpg)
PERFORMANCE MEASUREMENT: AUTOMATION
http://jsperf.com/ https://code.google.com/archive/p/jslitmus/ https://duzun.me/playground/js_speed Selenium autotests https://github.com/pkaminski/digest-hud http://github.hubspot.com/BuckyClient/
![Page 26: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/26.jpg)
PERFORMANCE MEASUREMENT: GENERAL
Who should use the process:– Developers - during dev. testing process to see performance
measurements changes;– QA - at the beginning of the project, after performance optimization
features dev. done, at the end of the project. What should be measured:
– Scripting, rendering and painting time for scenario.– $digest/$apply function calls number and execution time.
What should be fixed during testing:– Computer system requirements and resources.– Application configuration, third-party modules configuration.– Testing scenarios
![Page 27: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/27.jpg)
PERFORMANCE MEASUREMENT: Scripting, rendering and painting time
1. Open dev tools in Chrome2. Go to Timeline tab3. Uncheck all the options at the top panel (JS Profile, Memory, Paint,
Screenshots)4. Click to start recording (or ctrl + E)5. Click to finish (or ctrl + E)6. Save timeline data (Open mouse context menu by right mouse button and
select "save timeline data" option)7. Select all the timeline frame (you can do it with mouse scroll)8. Chose Summary tab9. Take a screenshot of Summary diagram
See more: developer.chrome.com
![Page 28: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/28.jpg)
PERFORMANCE MEASUREMENT: $digest/$apply function calls
1. Open dev tools in Chrome2. Go to Profiles tab3. Chose "Collect JavaScript CPU Profile“ in "Select Profiling type" menu4. Click start to start recording (or ctrl + E)5. Click stop to stop recording (or ctrl + E)6. Save Profile data (at the "CPU Profiles" menu click "Save" button near the
snapshot to save it, or use mouse context menu)7. Sort functions by "Total" time of execution (click on 'Total' tab to sort desc)8. Set "Heavy (Bottom up)" mode.9. Take a screenshot of first several functions that includes $.digest and
$.apply (most probably in first 4 functions)
See more: developer.chrome.com
![Page 29: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/29.jpg)
PERFORMANCE MEASUREMENT:3 snapshots technique
There should be done at least 3 snapshots of the system load during the testing to be sure all cases are covered.
Each of them should be captured on fixed data and configuration with fixed time limits.
1st – Idle application state (minimum of user actions). 2nd – Typical application flow (typical user actions). 3rd – High-load application state (all the functionality should be
used, untypical user actions performed).
![Page 30: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/30.jpg)
PERFORMANCE MEASUREMENT:Testing plan – 1st snapshot
1. The application is loaded2. Start capturing3. No actions required from tester (fixed time)4. Stop capturing
![Page 31: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/31.jpg)
PERFORMANCE MEASUREMENT:Testing plan – 2nd snapshot
1. The application is loaded2. Start capturing3. Buy 3 tickets manually, 3 through buy dialog4. Open lobby, switch to another stream5. Switch back6. Wait for presentation7. See whole presentation8. Stop capturing
![Page 32: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/32.jpg)
PERFORMANCE MEASUREMENT:Testing plan – 3rd snapshot
1. The application is loaded2. Start capturing3. Buy tickets manually, buy tickets through buy dialog4. Set autobuy5. Open lobby, switch stream6. Play in stream with all possible prizes7. Switch tickets pages8. Open minigame9. Resize client10. Stop capturing
![Page 33: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/33.jpg)
PERFORMANCE MEASUREMENT:Test report
At the end of performance testing the test report should be created to track results of measurements.
It is propose to use some simple email structure for collecting the results.
It should include:– Full testing scenarios (steps, time, used streams name and
configuration), if they have been changed. – Results of measurements for each scenario. – Saved snapshots and timelines for each scenario (as email
attachments). The place to store timeline and performance logs should be provided separately.
![Page 34: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/34.jpg)
ISOLATED SCOPES
![Page 35: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/35.jpg)
ISOLATED SCOPES
![Page 36: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/36.jpg)
ISOLATED SCOPES
![Page 37: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/37.jpg)
WATCHERS COUNTER
![Page 38: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/38.jpg)
WATCHERS COUNTER
![Page 39: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/39.jpg)
REFERENCES
![Page 40: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/40.jpg)
REFERENCES http://andyshora.com/unit-testing-best-practices-angularjs.html https://www.smashingmagazine.com/2014/10/introduction-to-unit
-testing-in-angularjs/
http://stackoverflow.com/questions/13499040/how-do-search-engines-deal-with-angularjs-applications
http://stackoverflow.com/questions/33225335/angular-js-beginner-what-version-should-i-use
http://stackoverflow.com/questions/23066422/how-do-i-measure-the-performance-of-my-angularjs-apps-digest-cycle
https://egghead.io/lessons/angularjs-understanding-isolate-scope
![Page 41: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/41.jpg)
![Page 42: Dive into Angular, part 5: Experience](https://reader036.fdocuments.in/reader036/viewer/2022062822/587ebee81a28abf37b8b48b7/html5/thumbnails/42.jpg)
Oleksii Prohonnyi
facebook.com/oprohonnyi
linkedin.com/in/oprohonnyi