THIRD-PARTY LIBRARIES

Adam Klein

Adam Klein

- Developer for 18 years - Two years in Angular - Used to have hair

CTO @ 500Tech

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

ENCAPSULATION

UI-Grid examplehttps://github.com/adamkleingit/3rdParty-uiGrid

http://ui-grid.info/

Why wrap an Angular directive?Default values

Common customizations

Single place of knowledge

SEPARATE DATA FROM UI

jsTreehttps://github.com/adamkleingit/3rdParty-jsTree

http://jstree.com

Use an existing wrapping directive?Read at the source code

Look for $watch’es

ng-js-tree — meh… Let’s wrap it ourselves

Plugins use DOM, we want dataUse data services

Transform the data from/to plugin

Bi-directional link from DOM to data

JQUERY PLUGINS MEMORY LEAKS

Always destroy the JQuery plugin on $scope.$on(‘$destroy')

Live DEMO in Chrome Inspector

HOW TO CHOOSE A LIBRARY

Required featuresHow flexible is your product person

Is the library written for angularFor example:

ui-select

ui-grid

ui-bootstrap

PerformanceTest the plugin on big data sets

Test on the intended devices

Example: Leaflet vs. Google Maps on mobile

Look at the source codeThe library becomes part of your code base

Example: jsTree & depth first search

FlexibilityAre there ways to bypass the impossible?

Example: completely overriding the row/cell template in ui-grid

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?

CommunityAsk around

Github activity

People behind it

Think what will make you regret you chose this library

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

…

WE ARE HIRING

Check the slides:

Read our blog:http://blog.500tech.com

Adam Klein

http://www.slideshare.net/AdamKlein7/3rd-party-50766946

adam@500tech.com