This document discusses strategies for using third-party libraries in Angular applications. It provides examples of wrapping third-party directives like ui-Grid and jsTree to encapsulate common customizations. The document also recommends evaluating libraries based on required features, performance, flexibility, community, and potential regrets. It emphasizes destroying jQuery plugins on scope destruction to prevent memory leaks.

1. THIRD-PARTY
LIBRARIES
Adam Klein

2. Adam Klein
- Developer for 18 years
- Two years in Angular
- Used to have hair
CTO @ 500Tech

4. https://github.com/nirkaufman/angular-webpack-starter

5. ENCAPSULATION

6. UI-Grid example
https://github.com/adamkleingit/3rdParty-uiGrid
http://ui-grid.info/

7. Why wrap an Angular directive?
Default values
Common customizations
Single place of knowledge

8. SEPARATE
DATA FROM UI

9. jsTree
https://github.com/adamkleingit/3rdParty-jsTree
http://jstree.com

10. Use an existing wrapping directive?
Read at the source code
Look for $watch’es
ng-js-tree — meh… Let’s wrap it ourselves

11. Plugins use DOM, we want data
Use data services
Transform the data from/to plugin
Bi-directional link from DOM to data

12. JQUERY PLUGINS
MEMORY LEAKS

13. Always destroy the JQuery plugin on
$scope.$on(‘$destroy')
Live DEMO in Chrome Inspector

14. HOW TO CHOOSE
A LIBRARY

15. Required features
How flexible is your product person

16. Is the library written for angular
For example:
ui-select
ui-grid
ui-bootstrap

17. Performance
Test the plugin on big data sets
Test on the intended devices
Example: Leaflet vs. Google Maps on mobile

18. Look at the source code
The library becomes part of your code base
Example: jsTree & depth first search

19. Flexibility
Are there ways to bypass the impossible?
Example: completely overriding the row/cell template in ui-grid

20. How easily can you style it?
Which classes does it use?
Where are the elements placed?
Does it work a lot with JS calculated dimensions?

21. Community
Ask around
Github activity
People behind it

22. Think what will make you regret you
chose this library

23. Fork → Fix → PR
https://github.com/500tech/ng-grid
https://github.com/500tech/jstree
https://github.com/500tech/ui-layout
https://github.com/500tech/angular-selectize
https://github.com/500tech/angular-google-maps
https://github.com/adamkleingit/god
https://github.com/adamkleingit/acts_as_tree
…

24. WE ARE HIRING

25. Check the slides:
Read our blog:
http://blog.500tech.com
Adam Klein
http://www.slideshare.net/AdamKlein7/3rd-party-50766946
adam@500tech.com