Health to the Web

Am stoked to be part of the team here doing a blog post series on Angularjs to the AppNexus TechBlog. Click here to see the posts (2 so far, more coming)

We're building a large scale angular app at twixt.it. So  Angular for Large Scale Applications is very interesting to me. Thanks to the presenters for sharing all this information, some good ideas here. Below are my notes & thoughts on each presentation (still working through all). Code Organization Patterns  Important for scaleability because Controllers grow as size of app grows Many DCM controllers have thousands of lines of code Avoid long controllers. Increase complexity. not Dry, not single responsibility Shows example of a Controller with over 3500 lines of code after moving "a ton of code out"..probably had 7k lines of code before reducing. Identified 5 patterns for reuse Regular Javascript 1. Inheritance - good for shared behavior but easy for hierarchy to become too deep and hard to share common code; How? a. use injector below in child controller and then         $injector.invoke(ParentController, this, {$scope, $scope}) ...

I love this awesome tool web sequence diagrams for creating sequence diagrams was introduced to me by a colleague about 6 months ago and loved it within an hour so easy to create and edit diagrams, just type in text and see the diagram appear, like magic! fast enough to use in design collaborations with colleagues if you need examples, then click examples on left and it will add that text yuml.me looks very useful too, especially for diagrams other than sequence diagrams their use case drawing tool seems feature rich likewise for class view (inheritence, cardinality etc.) I've used gliffy.com  quite a bit but I prefer web sequence diagrams because faster, besides gliffy are beginning to charge now plantuml looks rich and comes recommended by an eclipse user. I have not tried myself and it does require an install. Thankfully theres other good free ones out there. I used TogetherJ many moons ago and it looks like thats now provided by Borland (they still around?) a...

angularjs ui-router is pretty cool, we use it in our app now but have not yet used query string parameters (e.g. ?p1=age&p2=height). But now we need to. we're now adding a feature which is basically a report generator and its a good use case for query string parameters once on the page then you're basically in that ui-router "state" users can select filters etc. from dropdowns which will reload the data but should not destroy/recreate any controllers or ui widgets (we stay on the page and do not state transition) yet we do want to update the url for deep links and back button support we don't know the complete list of possible filter choices, but know it should be data driven and will change by report  urls to support this report feature are will be something like thus /reports  /reports/sales  /reports/sales?region=west&time=weeks so we need to use query string parameters Below are some of the things I discovered with ui-router query strin...

We support IE9+, Chrome, FF and Safari but not mobile or Opera..we want to warn users on unsupported browsers Understand browser sniffing is bad (too volatile: opera is webkit, IE11 is not IE etc), feature detection is better check this ou:  IE11 pretends not to be IE (I'd probably do same if I had family like that!). So you can't browser sniff for "MSIE" since its not there any more in IE11. Our solution, we do a mix of feature detection and browser sniff 1. first feature detect: check for window.performance which is supported in IE9+, Chrome and FF ..great! but also Opera and wekbit mobile...but not Safari So we browser sniff to exclude Opera and Mobile 2. if no window.performance then check for Safai by browser sniff navigator.userAgent I don't like it and its not ideal but best thus far.

I needed to add a hover glow effect to a font icon, we use flatui which uses fonticons (bootstrap v3 has switched to using font icons now) I tried box-shadow on the font icon span, but there was some spacing above and below the span with the font icon. It did not look good.         &:hover .icons-bar a > span {             box-shadow: 0px 0px 5px 5px #fff;        }      <div class="icons-bar">        <a ng-click="toggleOpen()">         <span class="fui-mail">         <span>         </span>         </span>        </a>    </div> ....sooo I pinged a colleague who had the bright idea of using text-shadow instead of box-shadow. That worked! text-shadow takes 4 values: - x co-ordinate -...

Anti-patterns are patterns you should not be implementing. There are already a number of guidelines such as use directives only for dom manipulation, use of modules etc. Here's my running list for angularjs of ones I also feel are important. I'm no saint when it comes to these, I've probably implemented all of them at one stage or another. Controllers doing too much (thin Controllers fat Services) In angularjs, its easy to make behavior available from Controllers by adding functions to scope. Need to delete someone from a list? easy add a method on scope and call the delete. Plus models in angularjs are often portrayed as simple plain old javascript objects. Again easy to put the model on scope as use as an ng-model on the page. Many examples and tutorials show this; partly as a shortcut just to illustrate something else but none the less people see it enough times and it can become in-grained Here's the problem with that. Your controllers can quickly contain ...