Living in AngularJS for a few months

What is it like for a Java / Objective C / Mobile guy to live in Angular for a few months? It has been an interesting ride for sure.

The mobile work, which I dearly miss, is at a stand still while marketing decides on various issues such as it being free or having a price. This means I need to help out in other coding areas and for right now. They decided to toss me into AngularJS.

It takes some time to get your head wrapped around Angular. What is a service, controller, directive or manager? How does this magical binding work? Where is the GET call for the REST service?

I was using the 30 day trial of WebStorm as that seemed to be the tool of choice for every video I watched doing a demo of Angular code. I like the IntelliJ product line. I use AppCode for iOS work and Android Studio for by Android projects. We get a multiple user site license of IntelliJ which includes the WebStorm plug-ins so I switched to that. WebStorm 8.0 EAP has better Angular integration which will be merged into IntelliJ at some point. For my personal use I am waiting on the next IntelliJ sale to pick up a copy for home use.

Using IntelliJ allows me to run our Java based application server too. That code is a Maven project making it easy to import as an IntelliJ project. Nice having one IDE for both of those projects and I especially like the Dracula theme. I run a dark theme in Eclipse but it has some minor UI issues.

IntelliJ ties in to our JSHint settings as well. The Jenkins integrated build system will kick out the project as failing to build if you don't follow our JSHint settings. Having the IDE show them to you as errors before you run the GRUNT process is very nice.

Using GRUNT SERVE allows me to start the web process and then have any changes I make to the HTML, CSS, SCSS or JS files automatically built and pushed out to the web. I am using Chrome which also integrates with IntelliJ for JavaScript debugging. I also use the integrated Chrome web developer tools but the IntelliJ debugger is more feature rich to track down the harder issues.

I run GRUNT before I set up a STASH pull request. That runs JSHint, Unit Tests, Minification and all the other fun which is the same process Jenkins runs. I try to always check in clean code.

How is Angular? It appears to be a really solid API with a lot of helpful features. The live data binding is one of them. You set up {{ variable_name }} in the HTML and if that variable is defined in the controller the HTML will automatically update when you change the variable value in your JavaScript. There is also all sorts of boolean logic you can apply to show and hide HTML elements using ng-??? tags.

Angular is like Android in a number of ways. You need to understand 3 or 4 objects before any one thing works. In Android you would need to know the Activity houses a Fragment and they are both using a layout defined in XML that pulls data from strings.xml and the List in the Fragment is using another java class that uses one or more other XML layouts to display the data. Very confusing at first. Angular has a similar tie in of controllers, HTML layouts, CSS styles, etc.

I did not write the initial version of the Angular app. I got to wade into the deep end with a list of bugs and feature requests to see how much damage I could do. Took a few weeks to start knowing where to look and the initial project did not follow the best file naming conventions, which has since been cleaned up.

Now I have a pretty good idea of what is possible, what bootstrap widgets are available, how to look up and use underscore.js helper methods, available moment.js methods and how to get around the other 3rd party code bits we pull in via BOWER.

Of course general programming knowledge always applies. There are loops and IF statements and all that fun. It was basically learning a new framework. The fun comes in when you get to test in various browsers. So far the Angular side has not caused any issues but HTML and CSS play a different ballgame. I am on a Mac as I do iOS programming. Things were working fine in Chrome, where I spend most of my time. The UXD staff uses FireFox and ran into various minor issues that I was able to quickly fix. I also test in Safari and have not had to do anything special in there yet.

The real fun begins in Internet Explorer. I have a VM set up with Windows 7. Things were not looking so good in there. Turns out we have some bad HTML which the other browsers ignored. Specifically an extra end tag of
. IE gave me a non-helpful error message deep in the bowls of Angular for that. The other browsers just blew it off. Simple fix. The other changes were setting some bonus CSS styles for the modals - commonly called dialogs in other frameworks. All the changes I made did not affect the other browsers so I was not required to put IF statements around them just for IE.
I went ahead and set up a pretty full environment in the Windows VM which included GIT, GRUNT, Ruby, BOWER, NPM, Node.JS and Sublime text editor. I did not set up IntelliJ on that side as I would have to kill it on the Mac side and start it on the PC side each time. I am generally making small changes for IE so that has not been a big deal.

The web tools in IE are not as full featured as FireFox or Chrome but are servicable. I was able to change CSS styles live and see the effects which is very happy. CSS seems to be a lot of trial and error to get things right. Not a big fan of that mode of development. When I see something out of place in my Android layout XML I generally know why it is messed up and I can quickly fix it. With CSS the whole team plays the "throw stuff at it until it works" approach. Try setting margin, now set DIV to overflow = auto; or toss in a float: left. When it works I am happy but I always want to know why that made it work. Plus the CSS has a lot of inheritance which is not obvious when the styles are defined in multiple CSS or SCSS files. At least the web tools in the browsers will show you where various things came from and what overrides what.

We plan on turning most of the HTML and CSS manipulation over to the CSS team. I believe they will do a better job laying things out in the CSS files getting more object reuse there and they can keep track of how changes will affect various areas on different screens. They won't touch the binding areas or the i18n areas.

Like most of the projects I have worked on we have done the i18n work and have had the project localized into Spanish and Korean. A member of the sales staff plans on doing a French localization for us when the code is closer to complete. I always put strings into separate resources just in case someone wants to localize the product.

For QA to test this we generally hijack a rarely used locale and do a simple reverse English version of our test. That way QA can quickly see on any screen if the text is not reversed then we have not pulling it from the resource but they can still read everything on screen. Reading backwards is tricky but sure is a lot easier than guessing at a language you don't know at all.

I wrote a small Java utility to reverse the strings for this file. Big deal right? Reverse a string, grade school 101 that task. The issue is you don't want to reverse macro replacement text. The string "You have {{carrot_count}} carrots\nBuy more!" is reversed to "!erom yuB\nstorrac {{carrot_count}} evah uoY".  Don't want \n to be n\ and the variable name cannot change.

In the end I am not minding my time in Angular but would really like to get back into mobile. Anytime you learn a new framework it opens your toolbox even if it to steal ideas on how to do things differently in your "old language and framework". The Angular app is not large but it looks good and is very functional. It beats the heck out of the previous JQuery app I helped out on.

What don't I care for? JavaScript is not statically typed so a number of programming errors don't appear until you run the project in a browser. IntelliJ does its best to keep you honest but it can't catch everything. Misspelling a variable in HTML that is bound to a JSON field will burn you more than once. Dynamic variables of this type, that type, array or not at different times will also burn you. It also causes havoc with the intellisense / autocomplete features of the IDE. You end up keeping multiple files open just so you can reference variable names. Refactoring is a lot tougher too.

The worst part is browser differences. Sure, in Android land you deal with different SDK versions and screen sizes. Under iOS you have a couple of different screen sizes and some hardware differences. Here I sit on a single computer and I have to test in 4 browsers minimum. It appears IE is the pickiest of the bunch so I should start in there but it has the least useful web tools and I would be working in the Windows VM all day long which does not add to the fun factor.

Like every new program language and framework it has been an experience. Some good, some bad, some fascinating. I will steal as many ideas as possible from this experience when I get back into mobile land.

Let's have some IDE fun

During any given day I might be in 6 different IDEs. Eclipse, IntelliJ, Android Studio, Xcode, AppCode, and Aptana. Generally I have an instance of Sublime text editor running too. I use them for the following things:

Eclipse - Java server side work (our REST services)

IntelliJ - Java one off utility work

Android Studio - Java Android mobile development

Xcode and AppCode - Objective C iOS mobile development (some Mac work too)

Aptana - JavaScript with AngularJS, bootstrap and other libs

Sublime - taking notes, small file edits including .gitignore and other system type files

At times it can drive you crazy. I use a Mac at work due to my iOS needs and depending on the IDE I might use CMD+S to save or Ctrl+S. Since I have a PC background and I switch to Ctrl+S at home in any IDE I am in when there. I screw up the keystrokes at times but generally have a feel for which IDE I am in at any given moment.

Eclipse is the old standby I have use for years. There are a ton of plugins for it to do nearly anything but you can't always get them to work as expected or even together. We just switched from SVN to GIT at work. Probably need to throw out the SVN plugins as I will not be using them and no real need for them to load up each time. Also the menu system gets a bit cluttered. Heck it might be a good time to start with a fresh Eclipse install as I also have the Android plug-ins running and I have switched to Android Studio for that work. Code completion works ok but is not spectacular. Refactoring works and has not crashed on me. The editor is fast and has a ton of features.

IntelliJ has a great Dracula dark theme built right in. I run a dark theme in Eclipse too but it does not theme everything perfectly. I handle one off programming in IntelliJ. Testing code bits, working on small stand alone utilities. I could do some of that in Eclipse too but I tend to have the server stuff open there and switching workspaces in Eclipse is slow as it is a full reload of the IDE. I could use workspaces in Eclipse and I do at times but our server stuff is rather large so I prefer to leave it sit by itself.

Android Studio is an IDE I like a lot as it is IntelliJ based. There have been some growing pains with the constant updating to the newest version of gradle but in general the IDE is superior to Eclipse. It has better code completion, a better preview window for your XML based layouts, shows the colors and icons in the gutter, makes it easier to convert string into the string table, shows the replacement string in code instead of the string ID and a bunch of other smaller bits of "thanks for doing that" areas. I would say that Eclipse is faster at building and getting the code on a device but I am willing to forgo that speed for all the other features Android Studio offers. It works well with Genymotion, the device emulator I use.

Xcode is my least favorite IDE of the bunch. I have to use it for iOS development but it is behind the times in areas like refactoring and its code completion tends to not be as helpful as other IDEs. Sure, you get a full list of what is possible but it does not move the most commonly used ones to the top of the list. It also crashes on me more than any of the other IDEs especially when it comes to refactoring. I have had it crash when refactoring a variable that only appears twice in a 20 line method. It makes you scared to use it. It was also terrible when it comes to using SVN. GIT is much better. I wish it would offer to automatically include needed H files instead of my manually moving to the top of the file to type them in.

AppCode is also from IntelliJ. I use it when I am doing heavy Objective C coding when I already have the UI in place. So far its refactoring has worked every time crash free. It has more intelligent code suggestions, if you add a reference to an object it will prompt to add the proper H file, it handles CocoaPods nicely. There are so so many areas where it is coder friendly. Sadly it does not have an Interface Builder replacement so you end up back over in Xcode to handle those chores. They sync together without a hitch and both use the same project files making moving between them relatively painless.

Aptana has some nice code completion aspects for CSS and HTML along with a solid JSHint tie in. Since our server build does not allow JSHint errors to pass it makes it so much easier to catch them before you push to master. It is Eclipse based but focused on JavaScript which means I could end up cluttering it with plugins but so far I have kept it down to the minimum I need for JS programming. I have used this IDE flavor for the least amount of time of those listed but with my heavier involvement in JavaScript I have been very happy with it.

Sublime is my go to editor. I leave multiple tabs open with "To Do" lists for each of the projects I have going at any time. This allows me to type in quick notes so I don't forget something because people tend to drift in and out of my office with suggestions the mobile app, to share some tidbit of useful information about the server, a GIT command or something else helpful. I have a file for general work info, one for Android and one for iOS info open all the time and then I open and close other files as needed. The color coding support in Sublime for a multitude of file formats is awesome. I also use it to pretty print XML and JSON when I copy / paste server responses out of the Chrome web tools window. 

It can fry your mind to shift in and out of so many programming languages and IDEs in any given day. Of course I try to keep it to a minimum but that is not always in my control. My preference would be to stick in the world of mobile doing Android and iOS development. Right now that is on hold so I am helping out on the JavaScript team. Lots of time on Stack Overflow and doing web searches as my brain does not have a solid cache of JavaScript programming idioms and patterns. Looks like Aptana it is for the next few months.

Back as solo mobile developer - not easy

Being the solo mobile developer at a job is not easy. I had just gotten used to having a couple of developers around me at my previous contract position. Everyone had bits and pieces of experience in different areas so you would quickly get answers to questions without doing a Google search. They might have some sample code laying about from another project or just know how to do it.

Sure the big boss here wrote the initial iOS code that I have been cleaning up and adding features against but I rarely get to speak with him and he has no Android background. I have been working on the Android port this week getting stuck on silly things that the guy I worked with at the last place would have handled with ease as he had a lot of background in those areas. Now that the core networking is in place I can start moving forward at a pretty good clip.

A real feeling of isolation when you have developers all around you but they either don't know the language (Objective C) or the framework (Android SDK) thus you can't really bounce any ideas off of them. Sure I can hit them up for general business knowledge or Java questions but not for the meat of the development cycle.

For my Android work I have been using Android Studio. I know it is a 0.1 release but that is really just the Android plug-in side of things. The over all IDE is at version 12 and I have enjoyed using IntelliJ in the past. I like the dracula theme as far as colors go.

The ability to edit layout XML and see the results side by side in the preview window is super handy. I have gotten that to generate crash reports from time to time but they did not kill the IDE or lose any of my work.

What I miss from Eclipse is the new class wizard. It asks for the base class and interfaces and lets you quickly build things out. I have asked about this on the IntelliJ forms and they basically stated you can do all of that via a number of steps. I want a Wizard. I also want the auto add of the Activity to the manifest. I should not have to do all that work manually every time I add a new activity to the project. Since this is a new project that has been happening a lot.

The Log Cat filter seems pretty iffy too. I turn it on to filter out things but it forgets about that between program runs so I have to go back to "No Filters" then back to my filter again. It is silly how much junk the emulator kicks out into Log Cat. Since I am using the HAX high speed emulator I get a ton of extra stuff.

I was happy to get the upgrade to 0.11 this morning. Good to know there is active work on Android Studio and I am sure it will continue to improve. I have been using it at home on my Win7 64 bit PC and my Macbook Pro at work. Both seems to run equally well.