This document discusses AngularJS performance and limits. It begins by covering view watches and data bindings, noting that having too many can lag the UI. It recommends using single bindings where possible. It also discusses only displaying visible elements, avoiding polluting scopes, and being aware of the performance of directives and external components. The document notes some technical limits of AngularJS with large dynamic data sets, and that for real-time apps with frequent data changes, a lightweight framework may be preferable. It emphasizes thinking about performance during development and not assuming frameworks are inherently fast. In summary, the document provides tips on optimizing AngularJS performance by reducing watches, only updating visible elements, and avoiding scope pollution.
Building scalable applications with angular jsAndrew Alpert
AngularJS today is one of the most powerful, user-friendly and popular JS frameworks to work on web applications. Surprisingly, one of the main weaknesses of this framework is poorly structured documentation and the lack of ready-made solutions. In this report, we will try to work out the best approach to the organization of large and very large applications. We will also speak about the tools that will be useful at every stage of the application development and tools and practicesthat will help you to work in the continuous delivery mode.
AngularJS performance & production tipsNir Kaufman
This is the companion slides for the AngularJS-IL meetup 9 talk - that took place on January 13 2015 @ Google campus TLV.
Grab the code here: https://github.com/nirkaufman/angularjs-performance-tips
Presented at SCREENS 2013 in Toronto with Nick Van Weerdenburg
Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca
AngularJS is a hot, hot, hot topic. Building web and mobile apps in AngularJS is an ease but there is a learning curve. In this session, you’ll learn the ins and outs of AngularJS and leave the session knowing how to build killer AngularJS apps.
Building scalable applications with angular jsAndrew Alpert
AngularJS today is one of the most powerful, user-friendly and popular JS frameworks to work on web applications. Surprisingly, one of the main weaknesses of this framework is poorly structured documentation and the lack of ready-made solutions. In this report, we will try to work out the best approach to the organization of large and very large applications. We will also speak about the tools that will be useful at every stage of the application development and tools and practicesthat will help you to work in the continuous delivery mode.
AngularJS performance & production tipsNir Kaufman
This is the companion slides for the AngularJS-IL meetup 9 talk - that took place on January 13 2015 @ Google campus TLV.
Grab the code here: https://github.com/nirkaufman/angularjs-performance-tips
Presented at SCREENS 2013 in Toronto with Nick Van Weerdenburg
Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca
AngularJS is a hot, hot, hot topic. Building web and mobile apps in AngularJS is an ease but there is a learning curve. In this session, you’ll learn the ins and outs of AngularJS and leave the session knowing how to build killer AngularJS apps.
An introduction to the complex single page web application framework known as AngularJs. An attempt to overview the high-level aspects of the framework, and to supply references for further exploration.
Checkout our contributions: http://angularify.org/
Angular Best Practices presented at Techcamp Vietnam 2014 (techcamp.vn).
Github source code:
https://github.com/henrytao-me/angular-best-practices
RESOURCES & REFERENCES
AngularJS style guide
https://github.com/mgechev/angularjs-style-guide
Best practices from father of AngularJS
http://www.youtube.com/watch?v=ZhfUv0spHCY
ng-boilerplate
https://github.com/ngbp/ngbp
Airbnb prerender backbone
http://nerds.airbnb.com/weve-open-sourced-rendr-run-your-backbonejs-a/
AngularSEO from yearofmoo
http://www.yearofmoo.com/2012/11/angularjs-and-seo.html
AngularJS full testing with Karma from yearofmoo
http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-karma.html%23testing-controllers
AngularJS Video from egghead.io
http://egghead.io/lessons
AngularJS Best Practices – offically
https://github.com/angular/angular.js/wiki/Best-Practices
AngularJS Experiment
http://www.bennadel.com/blog/2439-My-Experience-With-AngularJS-The-Super-heroic-JavaScript-MVW-Framework.htm
AngularJS - What is it & Why is it awesome ? (with demos)Gary Arora
AngularJS - What is it & Why is it awesome! A quick introduction to AngularJS, its features and some demos. This deck was part of Gary Arora's presentation for the Boston Code Mastery event in December 2013.
A presentation made for the AngularJS-IL meetup group that took place in jan 2014 at Google TLV Campus.
its a demonstration of how to integrate requireJS with AngularJS to achieve lazy loading and registration of angular components after bootstrap.
this slideshow contain a link for a working demo
Testing frontends with nightwatch & saucelabsTudor Barbu
Sooner or later, any application needs to be released. And before that, it needs to be tested. Ideally!
The purpose of this talk is to explore Nightwatch as a testing framework, how to set up an automated CI system using Travis and using SauceLabs as a browser farm.
See for code https://github.com/motanelu/bcn-js-news-widget
AngularJS is a popular JavaScript framework. It is intended to make the implementation of RIA (Rich Internet Applications) easier and convenient. AngularJS is created and maintained by Google. It is relatively, a new JavaScript framework, which is designed to make the front-end development as simple as possible. AngularJS is a useful tool for standardizing the web application structure and it provides a future template to ensure that the client-side applications are developed much effectively.
This document by RapidValue is written by Gourav Ajmani, Technical Lead, who has been working on AngularJS for a while, and has read many tutorials and blogs on it. According to Gourav, he could never find any article which gives a clear, concise and step-by-step guide to create the project structure and execute the project. So, he has written this document which will help you to create the Project structure and then execute it in a simple manner.
What is AngularJS
AngularJS main components
View / Controller / Module / Scope
Scope Inheritance.
Two way data binding
$watch / $digest / $apply
Dirty Checking
DI - Dependence Injection
$provider vs $factory vs $service
Have an upcoming technical interview for a junior front-end developer position at a company that uses AngularJS? Here are 29 AngularJS interview questions for you to practice with!
Angular js - 10 reasons to choose angularjs Nir Kaufman
A presentation made for the AngularJS-ILl that took place in july 2014 at Google TLV Campus (http://www.meetup.com/AngularJS-IL/events/189970902/)
its an overview angularjs features from an architact perspective.
this slideshow contain a link for reference code.
An introduction to the complex single page web application framework known as AngularJs. An attempt to overview the high-level aspects of the framework, and to supply references for further exploration.
Checkout our contributions: http://angularify.org/
Angular Best Practices presented at Techcamp Vietnam 2014 (techcamp.vn).
Github source code:
https://github.com/henrytao-me/angular-best-practices
RESOURCES & REFERENCES
AngularJS style guide
https://github.com/mgechev/angularjs-style-guide
Best practices from father of AngularJS
http://www.youtube.com/watch?v=ZhfUv0spHCY
ng-boilerplate
https://github.com/ngbp/ngbp
Airbnb prerender backbone
http://nerds.airbnb.com/weve-open-sourced-rendr-run-your-backbonejs-a/
AngularSEO from yearofmoo
http://www.yearofmoo.com/2012/11/angularjs-and-seo.html
AngularJS full testing with Karma from yearofmoo
http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-karma.html%23testing-controllers
AngularJS Video from egghead.io
http://egghead.io/lessons
AngularJS Best Practices – offically
https://github.com/angular/angular.js/wiki/Best-Practices
AngularJS Experiment
http://www.bennadel.com/blog/2439-My-Experience-With-AngularJS-The-Super-heroic-JavaScript-MVW-Framework.htm
AngularJS - What is it & Why is it awesome ? (with demos)Gary Arora
AngularJS - What is it & Why is it awesome! A quick introduction to AngularJS, its features and some demos. This deck was part of Gary Arora's presentation for the Boston Code Mastery event in December 2013.
A presentation made for the AngularJS-IL meetup group that took place in jan 2014 at Google TLV Campus.
its a demonstration of how to integrate requireJS with AngularJS to achieve lazy loading and registration of angular components after bootstrap.
this slideshow contain a link for a working demo
Testing frontends with nightwatch & saucelabsTudor Barbu
Sooner or later, any application needs to be released. And before that, it needs to be tested. Ideally!
The purpose of this talk is to explore Nightwatch as a testing framework, how to set up an automated CI system using Travis and using SauceLabs as a browser farm.
See for code https://github.com/motanelu/bcn-js-news-widget
AngularJS is a popular JavaScript framework. It is intended to make the implementation of RIA (Rich Internet Applications) easier and convenient. AngularJS is created and maintained by Google. It is relatively, a new JavaScript framework, which is designed to make the front-end development as simple as possible. AngularJS is a useful tool for standardizing the web application structure and it provides a future template to ensure that the client-side applications are developed much effectively.
This document by RapidValue is written by Gourav Ajmani, Technical Lead, who has been working on AngularJS for a while, and has read many tutorials and blogs on it. According to Gourav, he could never find any article which gives a clear, concise and step-by-step guide to create the project structure and execute the project. So, he has written this document which will help you to create the Project structure and then execute it in a simple manner.
What is AngularJS
AngularJS main components
View / Controller / Module / Scope
Scope Inheritance.
Two way data binding
$watch / $digest / $apply
Dirty Checking
DI - Dependence Injection
$provider vs $factory vs $service
Have an upcoming technical interview for a junior front-end developer position at a company that uses AngularJS? Here are 29 AngularJS interview questions for you to practice with!
Angular js - 10 reasons to choose angularjs Nir Kaufman
A presentation made for the AngularJS-ILl that took place in july 2014 at Google TLV Campus (http://www.meetup.com/AngularJS-IL/events/189970902/)
its an overview angularjs features from an architact perspective.
this slideshow contain a link for reference code.
DEV.BG - Angular 1 and Jasmine (Unit Testing and TDD)Dimitar Danailov
I'd like to share: shares common pitfalls in writing unreadable, unmaintainable unit tests in javascript.
Agenda:
1. My experience with Enterprise projects - good, bad and ugly part
2. What is TDD
3. What is Unit Testing
4. Understanding Mock and Stub Objects
5. TDD - Possible Mistakes
6. Angular and Unit Testing and yohottowel (jpapa.me/yohottowel)
Promises And Chaining In AngularJS - Into Callback Hell And Back AgainHans-Gunther Schmidt
If you have worked with Javascript before you might have been there already - callback hell! But there is an easy & elegant way out to get back control over your code - Promises and promise chaining! This talk will give an introduction to promises and chaining in AngularJS.
This talk was held by Hans-Gunther Schmidt at the Berlin AngularJS Meetup on Oct. 8th 2014 (http://www.meetup.com/AngularJS-Meetup-Berlin/events/182646022/).
Unit testing in JavaScript? There is no such thing.” This is something most of the Java developers would say. With AngularJS coming more and more to scene and Google standing behind it, testing is starting to be core part of all AngularJS project. I would like to show how you can do unit testing in pure JavaScript (AngularJS) application (together with backend mocking…).
Finding and debugging memory leaks in JavaScript with Chrome DevToolsGonzalo Ruiz de Villa
JavaScript applications are increasingly larger and they also tend to execute during longer periods. In these applications, the memory is a scarce and valuable resource that must be taken care of. With the support of the Chrome Dev Tools, we will learn how to analyze memory consumption and how to find and fix memory leaks, making our applications more stable and robust in the way.
These are my slide from talk at PHPDay in Verona 20014.
Forget about classic website where UX is not so important. We are living in time where usability is one of the important thing if you are building some business client oriented web service. In locastic we are working on CRM that is based on Symfony2 as backend and AngularJS as frontend solution.
How to connect this two frameworks? What are best practices? What are disadvantageous? How to take best from both worlds? These are topics I will cover in my talk with real examples.
Java 9 버젼에서 변화된 내용들을 가볍게 정리하는 형태로 만들어봤다.
소프트웨어 캠퍼스 강사팀 4기의 발표자료 이기도 하다.
소프트웨어 캠퍼스(https://www.facebook.com/groups/softwarecamp/)는 강의와 스터디등을 통해 서로를 성장시켜갈 수 있는 커뮤니티가 되려는 곳이다.
Presented at Bucharest Java User Group, http://www.bjug.ro/editii/5.html . Project source code available at: https://github.com/bucharest-jug/dropwizard-todo
Considerations with Writing JavaScript in your DotNetNuke siteEngage Software
Whether you want to take advantage of jQuery, ASP.NET AJAX, or just plain JavaScript, come learn the rules and guidelines for taking advantage of JavaScript within your DotNetNuke site. We'll talk through considerations for enhancing your content, skins, and modules, the best ways to include JavaScript behaviors, and some ways to avoid inconsistencies and frustration.
From Monolith to Modules - breaking apart a one size fits all product into mo...Robert Munteanu
Adobe Experience Manager as the biggest enterprise application built on the Apache Sling stack over the years was built with a monolithic product perspective. Taming the growth over time and tackling upcoming challenges led to a situation were a transition towards a modular product, where large features can be gracefully removed at runtime, becomes unavoidable.
With this talk we want to provide insights on how Adobe uses the available technologies in the stack, extends the stack and transforms the own practices to cut the product in loosely coupled modules with minimal impact on existing consumers. We will be identifying patterns on OSGi, content and scripting side to eliminate and prevent hard wiring and highlight pending challenges and our thoughts on how to resolve that. Last but not least we will share our experience on how such a transition impacts our engineering flow and quality assurance practices.
node.js 실무 - node js in practice by Jesang YoonJesang Yoon
Sharing 4 years of experience about node.js - A google chrome V8 engine javascript based web server technology. This slide covers about wide range of knowledge about node.js learned from 4 years of production, experiment, test & failures
4년 동안 node.js 서버 프로그래밍을 경험한 내용을 간략하게 정리해 보았습니다. node.js 를 접하시는 분들에게 도움이 되었으면 합니다.
Top 7 Angular Best Practices to Organize Your Angular AppKaty Slemon
Learn about Angular best practices to improve the performance of your existing Angular application. Tried and tested clean code checklist for your Angular app.
Modern JavaScript, HTML5 and CSS3 techniques and examples. There’s an endless amount of materials available around these topics so naturally this set doesn’t cover everything there is to know. Instead this is more like a summary of good techniques and practices I’ve encountered while doing web software development.
Modular Test-driven SPAs with Spring and AngularJSGunnar Hillert
Single-page Applications (SPA) are all the rage these days and with them there is an avalanche of new tools, libraries and frameworks we need to know. But what does this mean for us as Spring developers? In this session we will give you an overview of the current landscape and illustrate the choices the Spring XD team has made for its user interface. What do I use to write SPA applications? How do I integrate them into existing Spring-based backends? How do I build them? Can I integrate them into my existing Gradle or Maven build processes in order to achieve complete build automation? How do I integrate realtime messaging using Spring's SockJS/WebSocket support? In this talk we will answer these and many more questions. We will cover frameworks such as AngularJS, Bootstrap, RequireJS; tools like Bower, Grunt, Gulp; and also talk about testing using Karma and Protractor.
Testing Vue Apps with Cypress.io (STLJS Meetup April 2018)Christian Catalan
Presented at the STLJS Meetup (St Louis, MO)
We dive into a Vue application used in semiconductor labs for transistor measurements. We discuss how get started with E2E testing with Cypress.io. And give a crash course into Vue applications.
Video: https://www.youtube.com/watch?v=dpB0YgnFyZQ
Most of the major internet companies have now declared themselves to be mobile first. Smartphones have become ubiquitous throughout the development world. But mobile development is fraught with challenges. There are more Android devices than iOS, but iOS users tend to spend more money. If you build your app for one, it is a complete re-write for the other. You may have heard of Cordova/PhoneGap, but the apps tend to be somewhat clunky looking.
Enter the Ionic Framework, a cross platform framework which combines PhoneGap with AngularJS and super fast CSS3 to make apps which perform at near native levels.
Ilya introduces a new project - CloudStack UI - which is a trial of rethinking and redevelopment of the classic Apache CloudStack UI. With new stack of web development technologies (Angular 4, TypeScript, Material Design Lite). Ilya discusses how and why the project was started, current results and future plans, explains what an average IaaS/PaaS user expects from the perspective of public cloud ISP HelpDesk, and demonstrates the interface of the new UI and its core differences from the native UI.
Apache CloudStack user self-service web interface for IaaS and application delivery services.
Ilya Zolotukhin introduces a new project – CloudStack UI – which is a trial of rethinking and redevelopment of the classic Apache CloudStack UI with new stack of web development technologies (Angular 4, TypeScript, Material Design Lite). He discusses how and why the project was started, current results and future plans, explain what an average IaaS/PaaS user expects from the perspective of public cloud ISP HelpDesk, demonstrate interface of UI and its core differences from the native UI.
Experience our free, in-depth three-part Tendenci Platform Corporate Membership Management workshop series! In Session 1 on May 14th, 2024, we began with an Introduction and Setup, mastering the configuration of your Corporate Membership Module settings to establish membership types, applications, and more. Then, on May 16th, 2024, in Session 2, we focused on binding individual members to a Corporate Membership and Corporate Reps, teaching you how to add individual members and assign Corporate Representatives to manage dues, renewals, and associated members. Finally, on May 28th, 2024, in Session 3, we covered questions and concerns, addressing any queries or issues you may have.
For more Tendenci AMS events, check out www.tendenci.com/events
Globus Connect Server Deep Dive - GlobusWorld 2024Globus
We explore the Globus Connect Server (GCS) architecture and experiment with advanced configuration options and use cases. This content is targeted at system administrators who are familiar with GCS and currently operate—or are planning to operate—broader deployments at their institution.
Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...informapgpstrackings
Keep tabs on your field staff effortlessly with Informap Technology Centre LLC. Real-time tracking, task assignment, and smart features for efficient management. Request a live demo today!
For more details, visit us : https://informapuae.com/field-staff-tracking/
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...Juraj Vysvader
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I didn't get rich from it but it did have 63K downloads (powered possible tens of thousands of websites).
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoamtakuyayamamoto1800
In this slide, we show the simulation example and the way to compile this solver.
In this solver, the Helmholtz equation can be solved by helmholtzFoam. Also, the Helmholtz equation with uniformly dispersed bubbles can be simulated by helmholtzBubbleFoam.
Unleash Unlimited Potential with One-Time Purchase
BoxLang is more than just a language; it's a community. By choosing a Visionary License, you're not just investing in your success, you're actively contributing to the ongoing development and support of BoxLang.
We describe the deployment and use of Globus Compute for remote computation. This content is aimed at researchers who wish to compute on remote resources using a unified programming interface, as well as system administrators who will deploy and operate Globus Compute services on their research computing infrastructure.
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...Shahin Sheidaei
Games are powerful teaching tools, fostering hands-on engagement and fun. But they require careful consideration to succeed. Join me to explore factors in running and selecting games, ensuring they serve as effective teaching tools. Learn to maintain focus on learning objectives while playing, and how to measure the ROI of gaming in education. Discover strategies for pitching gaming to leadership. This session offers insights, tips, and examples for coaches, team leads, and enterprise leaders seeking to teach from simple to complex concepts.
SOCRadar Research Team: Latest Activities of IntelBrokerSOCRadar
The European Union Agency for Law Enforcement Cooperation (Europol) has suffered an alleged data breach after a notorious threat actor claimed to have exfiltrated data from its systems. Infamous data leaker IntelBroker posted on the even more infamous BreachForums hacking forum, saying that Europol suffered a data breach this month.
The alleged breach affected Europol agencies CCSE, EC3, Europol Platform for Experts, Law Enforcement Forum, and SIRIUS. Infiltration of these entities can disrupt ongoing investigations and compromise sensitive intelligence shared among international law enforcement agencies.
However, this is neither the first nor the last activity of IntekBroker. We have compiled for you what happened in the last few days. To track such hacker activities on dark web sources like hacker forums, private Telegram channels, and other hidden platforms where cyber threats often originate, you can check SOCRadar’s Dark Web News.
Stay Informed on Threat Actors’ Activity on the Dark Web with SOCRadar!
Providing Globus Services to Users of JASMIN for Environmental Data AnalysisGlobus
JASMIN is the UK’s high-performance data analysis platform for environmental science, operated by STFC on behalf of the UK Natural Environment Research Council (NERC). In addition to its role in hosting the CEDA Archive (NERC’s long-term repository for climate, atmospheric science & Earth observation data in the UK), JASMIN provides a collaborative platform to a community of around 2,000 scientists in the UK and beyond, providing nearly 400 environmental science projects with working space, compute resources and tools to facilitate their work. High-performance data transfer into and out of JASMIN has always been a key feature, with many scientists bringing model outputs from supercomputers elsewhere in the UK, to analyse against observational or other model data in the CEDA Archive. A growing number of JASMIN users are now realising the benefits of using the Globus service to provide reliable and efficient data movement and other tasks in this and other contexts. Further use cases involve long-distance (intercontinental) transfers to and from JASMIN, and collecting results from a mobile atmospheric radar system, pushing data to JASMIN via a lightweight Globus deployment. We provide details of how Globus fits into our current infrastructure, our experience of the recent migration to GCSv5.4, and of our interest in developing use of the wider ecosystem of Globus services for the benefit of our user community.
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...Anthony Dahanne
Les Buildpacks existent depuis plus de 10 ans ! D’abord, ils étaient utilisés pour détecter et construire une application avant de la déployer sur certains PaaS. Ensuite, nous avons pu créer des images Docker (OCI) avec leur dernière génération, les Cloud Native Buildpacks (CNCF en incubation). Sont-ils une bonne alternative au Dockerfile ? Que sont les buildpacks Paketo ? Quelles communautés les soutiennent et comment ?
Venez le découvrir lors de cette session ignite
Accelerate Enterprise Software Engineering with PlatformlessWSO2
Key takeaways:
Challenges of building platforms and the benefits of platformless.
Key principles of platformless, including API-first, cloud-native middleware, platform engineering, and developer experience.
How Choreo enables the platformless experience.
How key concepts like application architecture, domain-driven design, zero trust, and cell-based architecture are inherently a part of Choreo.
Demo of an end-to-end app built and deployed on Choreo.
How Recreation Management Software Can Streamline Your Operations.pptxwottaspaceseo
Recreation management software streamlines operations by automating key tasks such as scheduling, registration, and payment processing, reducing manual workload and errors. It provides centralized management of facilities, classes, and events, ensuring efficient resource allocation and facility usage. The software offers user-friendly online portals for easy access to bookings and program information, enhancing customer experience. Real-time reporting and data analytics deliver insights into attendance and preferences, aiding in strategic decision-making. Additionally, effective communication tools keep participants and staff informed with timely updates. Overall, recreation management software enhances efficiency, improves service delivery, and boosts customer satisfaction.
Quarkus Hidden and Forbidden ExtensionsMax Andersen
Quarkus has a vast extension ecosystem and is known for its subsonic and subatomic feature set. Some of these features are not as well known, and some extensions are less talked about, but that does not make them less interesting - quite the opposite.
Come join this talk to see some tips and tricks for using Quarkus and some of the lesser known features, extensions and development techniques.
In software engineering, the right architecture is essential for robust, scalable platforms. Wix has undergone a pivotal shift from event sourcing to a CRUD-based model for its microservices. This talk will chart the course of this pivotal journey.
Event sourcing, which records state changes as immutable events, provided robust auditing and "time travel" debugging for Wix Stores' microservices. Despite its benefits, the complexity it introduced in state management slowed development. Wix responded by adopting a simpler, unified CRUD model. This talk will explore the challenges of event sourcing and the advantages of Wix's new "CRUD on steroids" approach, which streamlines API integration and domain event management while preserving data integrity and system resilience.
Participants will gain valuable insights into Wix's strategies for ensuring atomicity in database updates and event production, as well as caching, materialization, and performance optimization techniques within a distributed system.
Join us to discover how Wix has mastered the art of balancing simplicity and extensibility, and learn how the re-adoption of the modest CRUD has turbocharged their development velocity, resilience, and scalability in a high-growth environment.
Navigating the Metaverse: A Journey into Virtual Evolution"Donna Lenk
Join us for an exploration of the Metaverse's evolution, where innovation meets imagination. Discover new dimensions of virtual events, engage with thought-provoking discussions, and witness the transformative power of digital realms."
First Steps with Globus Compute Multi-User EndpointsGlobus
In this presentation we will share our experiences around getting started with the Globus Compute multi-user endpoint. Working with the Pharmacology group at the University of Auckland, we have previously written an application using Globus Compute that can offload computationally expensive steps in the researcher's workflows, which they wish to manage from their familiar Windows environments, onto the NeSI (New Zealand eScience Infrastructure) cluster. Some of the challenges we have encountered were that each researcher had to set up and manage their own single-user globus compute endpoint and that the workloads had varying resource requirements (CPUs, memory and wall time) between different runs. We hope that the multi-user endpoint will help to address these challenges and share an update on our progress here.
2. Our story
From
"We have to rethink this whole module, remove time navigation... it's just too sluggish." ★
to
"It's awesome, really fast, it's like going from night to day!" ★
(★) SOFTVISION customer
3. A few words about me
Dragos Rusu @ SOFTVISION
WEB/ZEND ENGINEER since 2007 (backend, frontend)
ARTICLE WRITER (PHP Architect)
PROJECTS: platforms for airlines (Cathay Pacific, Singapore Airlines, Air Berlin), tourism agencies,
home automation and security, agriculture
4. We will discuss about...
1. View watches / data bindings
2. What you see is what you show
3. The risk of polluting scopes
4. Core directives to avoid
5. Splitting the page
6. Miscellaneous
7. Limits
Q / A
5. disclaimer
PERFORMANCE principles for heavy apps (+500 man days)
* many items are not covered here.
* code samples - only in AngularJS
never used AngularJS before? no problem, principles are general, yet the solutions are particular.
8. GENERAL CONTEXT
"more of 2000 watchers can lag the UI" (angular-tips.com)
"the expressions in curly braces denote bindings" ({{ ... }}) (docs.angularjs.org)
"AngularJS internally creates a $watch for each ng-* directive" (github.com/Pasvaz/bindonce)
"ngRepeat directive instantiates a template once per item [...] each template instance gets its own
scope" (docs.angularjs.org)
11. Every watcher is run at the digest cycle. The digest cycle is repeated until none of the results has
changed value
(Brian Ford - AngularJS contributor)
19. Why? Is double-binding slow?
Not quite. The AngularJS way of implementing it is slow ($dirty flags instead of observable
properties).
pssst: ECMA6: Object.observe()
21. (2) direct function calls from templates are called very often
SOLUTION: pre-compute the values to shown in the view model (default values, totals, etc)
<ul>
<ling-repeat="iteminitems">
//{{item.name}}({{computeTotal(item)}})
{{item.name}}({{item.computedTotal}})
</li>
</ul>
?
22. EXAMPLE
vatTotal will be recomputed on each scope $digest, regardless if the values that vatTotal() depend on
are changed or not (DEMO)
//...controller...
$scope.vat=24;//%
$scope.vatTotal=function(){
return(
$scope.data.item.total*
(1+$scope.vat/100)
);
};
//...template...
{{vatTotal()}}
?
23. (3) iterating over large data sets slows down the page
SOLUTION: create a lightweight iterable view model
angular.module('codecamp').controller('testCtrl',[
'$scope','dm','$q',function($scope,dm,$q){
'usestrict';
$scope._init=function(){
$scope.testViewModel={};
$q.all([dm.getData1(),dm.getData2()])
.then(function(response){
$scope.computeViewModel(response.data);
}
);
};
$scope._init();
}
);
?
24. (4) ng-repeat extra DOM manipulations
SOLUTION: ng-repeat with track by id (DEMO)
<ul>
<ling-repeat="iteminitemstrackbyitem.id">
{{item.name}}
</li>
</ul>
?
25. (5) filters are called very often
SOLUTION: lightweight quasi-independent filters
<span>{{value}}</span>
<ul>
<ling-repeat="iteminitems">
{{item.name|heavyFilteritem.value,$index}}
</li>
</ul>
?
WARNING: avoid touching DOM in filters and watches
26. (6) multiple recursive $watch might cause page flickering
SOLUTION: try to avoid recursive watch, where feasible
$scope.$watch('model.items',
function(newValue,oldValue){
//dosmth
},recursive=true);
);
?
27. (7) direct DOM watch functions might slow down the page
SOLUTION: try to avoid complex valueExpression, where feasible (use the data model instead)
//DirectiveLINKfunction
link:function($scope,$el,$attrs){
$scope.$watch(
function(){return$el[0].childNodes.length;},
function(newValue,oldValue){}
);
}
?
SOURCE: stackoverflow.com/questions/21332671
28. 1. View watches / data bindings
2. What you see is what you show
3. The risk of polluting scopes
4. Core directives to avoid
5. Splitting the page
6. Miscellaneous
7. Limits
30. ng-if vs. ng-show (1)
ng-hide and ng-show makes no speed difference (DEMO)
<ulng-hide="hideCondition">
<ling-repeat="iteminitems">
{{item.value}}
</li>
</ul>
?
31. ng-if vs. ng-show (2)
ng-if/ng-switch might make a difference on more content
(e.g. tabbed page)
<ulng-if="displayCondition">
//CONTENT
</ul>
?
* fewer bindings
* fewer linkers called at startup
32. remove non-visible elements in the scroll (1)
one easy way would be PAGINATION
doesn't always apply though...
33. remove non-visible elements in the scroll (2)
DISPLAY elements, but ONLY THE VISIBLE ones
known as the VIRTUAL/INFINITE SCROLLING problem
34. remove non-visible elements in the scroll (3)
usually occurs when large data sets need to be displayed
OpenSource solutions:
http://binarymuse.github.io/ngInfiniteScroll/
http://blog.stackfull.com/2013/02/AngularJS-virtual-scrolling-part-1/
DEMO / DEMO (with virtual scroll)
35. 1. View watches / data bindings
2. What you see is what you show
3. The risk of polluting scopes
4. Core directives to avoid
5. Splitting the page
6. Miscellaneous
7. Limits
40. (1) relying on multiple $rootScope and appCtrl functions may slow down the $digest
SOLUTION: try to avoid polluting $rootScope/appCtrl/* scopes
angular.module('codecamp').service('appInit',[
'$rootScope',function($rootScope){
'usestrict';
$rootScope.computeStuff=function(){...};
$rootScope.getData=function(){...};
$rootScope.i18n=function(){...};
$rootScope.manageAppStates=function(){...};
$rootScope.manageFormatters=function(){...};
//...andsoforth
});
?
- dispatch to specialized services/factories/filters/*
41. ... and have some privacy in all scopes
angular.module('codecamp').controller('testCtrl',[
'$scope',function($scope){
'usestrict';
$scope._privateMethod=function(){};
functionnotRecommended(){
//...
}
});
?
42. 1. View watches / data bindings
2. What you see is what you show
3. The risk of polluting scopes
4. Core directives to avoid
5. Splitting the page
6. Miscellaneous
7. Limits
50. SOLUTION: write custom directive(s), catch the events you need and...
.directive('customMouseEnter',[
function(){
'usestrict';
return{
restrict:'A',
link:function(scope,elem,attrs){
varfName=attrs.customMouseEnter,
func=function(ev){
scope[fName](ev);
};
elem.on('mouseenter',func);
scope.$on('$destroy',function(){
elem.off('mouseenter',func);
});
//[...]
?
51. ...trigger local $digests (DEMO $digest over $apply)
//TEMPLATE
<trcustom-mouse-enter="ctrlMouseLeave">
//CONTROLLER/DIRECTIVE
scope.mouseLeave=function(ev){
//highlight,etc
//$digest()onlyonthescopeyouneed
scope.$digest();
};
?
52. Seems to be pretty common in the community
http://stackoverflow.com/questions/18421732/angularjs-how-to-override-directive-ngclick
http://briantford.com/blog/angular-hacking-core
(★) if you actually override default directives, remember to set a higher priority
53. 1. View watches / data bindings
2. What you see is what you show
3. The risk of polluting scopes
4. Core directives to avoid
5. Splitting the page
6. Miscellaneous
7. Limits
55. identify what is shareable and what is not
avoid splitting the page in too many sub-components
design your components in a blackbox manner
56. 1. View watches / data bindings
2. What you see is what you show
3. The risk of polluting scopes
4. Core directives to avoid
5. Splitting the page
6. Miscellaneous
7. Limits
58. (1) evalAsync(f) over $timeout(f)
More: http://www.bennadel.com/blog/2605-scope-evalasync-vs-timeout-in-angularjs.htm
59. (2) Watch out for external components performance and their usage
We had a problem with Moment.JS library (20% of the page load time, according to Chrome
Profiler)
60. (3) $eval your code from time to time - PERF wise
Batarang (identify $watchers), Chrome Profiler (memory, performance), performance.now()
64. Ok... but why?
AngularJS 1.2.6 and below ▶ 12-15x difference
AngularJS 1.2.7+ ▶ 1.1x difference
"limit propagation of $broadcast to scopes that have listeners for the event"
(github.com/angular/angular.js/blob/master/CHANGELOG.md#performance-improvements-3)
RECAP: Common sense still says we should use them according to their design
65. 1. View watches / data bindings
2. What you see is what you show
3. The risk of polluting scopes
4. Core directives to avoid
5. Splitting the page
6. Miscellaneous
7. Limits
67. "you quickly reach the end of what Angular can do for you when it comes to structuring
applications, at which point the community fragments transform to best practices, and few people
have figured out how to write large-scale Angular apps" (EmberJS core member)
68. Technical limits
1. + 2.000 dynamic elements on the screen
2. + 3.000 watchers
3. real time apps, where data changes very often
(★) depending on the device
69. Some apps examples:
stocks exchange
google maps
office apps
OUTPUT: screen flickering, low UX, unresponsive screens
And there's nothing you can do about it... except rewriting it in a lightweight framework
70. 1. View watches / data bindings
2. What you see is what you show
3. The risk of polluting scopes
4. Core directives to avoid
5. Splitting the page
6. Miscellaneous
7. Limits
71. Recap? (1)
(1) be aware of too many data bindings (bindonce)
(2) try to minimize the number of $digest cycles
(3) have pre-computed values at template level
(4) display only the visible elements (virtual scroll)
72. Recap? (2)
(5) be aware of core directives PERF problems
(6) don't pollute your scopes and make them TDD friendly
(7) watch out for external components (angular or non-angular) performance
73. What's next?
it's a good habit to think PERF (pre-$compile the code in your head)
don't assume the frameworks are fast, whatever you may write
watch out for memory leaks
REMINDER: AngularJS is quite easy, just try it!
... and last but not least important: find a company that would allow you to grow your skills!