The Angular Mini-Book is a
guide to getting started with Angular. You'll learn how to develop a bare-bones application, test it, and
deploy it. Then you'll move on to adding Bootstrap, Angular Material, continuous integration, and authentication.
Spring Boot is a popular framework for building REST APIs. You'll learn how to integrate Angular with
Spring Boot and use security best practices like HTTPS and a content security policy.
This book shows you how to build an app with JHipster, and guides you through the
plethora of tools, techniques and options you can use. Furthermore, it explains the UI and API building blocks
so you understand the underpinnings of your great application.
Welcome to the final article in a series on my experience developing with AngularJS. I learned its concepts, beat my head against-the-wall with and finally tamed it enough to create a "My Dashboard" feature for a client. For previous articles, please see the following:
The last mile of development for the My Dashboard feature was to spice things up a bit and make it look better. We hired a design company to come up a new look and feel and they went to work. Within a week, we had a meeting with them and they presented a few different options. We picked the one we liked the best and went to work. Below are screenshots that I used to implement the new design.
On July 27, 2013, in the late afternoon, Trish McGinity and I were married at the Holland Lake Lodge, in the town I grew up in. The Lodge was a favorite childhood place and getting married there, to the awesomest woman ever, was a glorious experience. There were several planned activities (e.g. horseback riding, rafting, golfing) the week before our wedding day, and many of our friends and family joined the fun. While we couldn't capture every smile, giggle, or loving moment, this is an endeavor to document our matrimony month, our wedding week, and the day we sealed the deal.
We started our month in Montana on Sunday, June 30th. We're officially calling it Raible Road Trip #18. We packed up our pets, raft and golf clubs and left Denver around happy hour.
To read more about our rafting adventures, our wedding week festivities and our delightful wedding day, please click the link below. You can also skip directly to the wedding week or wedding day.
This is the 3rd article in a series on my experience developing with AngularJS. I used AngularJS for several months to create a "My Dashboard" feature for a client and learned a whole bunch of Angular goodness along the way. For previous articles, please see Part I: The Basics and Part II: Dialogs and Data.
Angular offers several ways to interact with data from the server. The easiest way is to use the $resource factory, which lets you interact with RESTful server-side data sources. When we started the My Dashboard project, we were hoping to interact with a REST API, but soon found out that it didn't have all the data we needed. Rather than loading the page and then making another request to get its data, we decided to embed the JSON in the page. For communication back to the server, we used our tried-and-true Ajax solution: DWR.
In Angular-speak, services are singletons that carry out specific tasks common to web apps. In other words, they're any $name object that can be injected into a controller or directive. However, as a Java Developer, I tend to think of services as objects that communicate with the server. Angular's documentation on Creating Services shows you various options for registering services. I used the angular.Module api method.
A couple of days ago, I wrote an article on how I started developing with AngularJS. I used AngularJS for several months to develop a "My Dashboard" feature for a client's product and learned a whole bunch of stuff along the way.
This article provides an overview of how I changed some of My Dashboard's features to use Angular instead of jQuery. After finishing the prototype work in January, we started moving bits and pieces into the main application. We kept the same file names for our Angular-related files and copied them into the project.
All these files are packaged up into a dashboard.js file that's included at the bottom of our Dashboard page. While our prototype used jQuery 1.9 and jQuery UI 1.10, the application's codebase used jQuery 1.7.1 and jQuery UI 1.8.3. Luckily, this didn't present a problem as everything continued to work as expected.
Around this time, we also had many discussions with the Product Team about charts. Since Highcharts required we purchase a license, we took at look at AnyChart, which we were already using. We were able to get AnyChart to work with our existing chart directive with minimal changes. Most changes were in the JSON itself.
We committed the first pass (with sample data still hard-coded) in mid-February.
There's many, many different introductions to AngularJS available on the internet. This article is not another introduction, but rather a story about my learning experience. It all started way back in January of this year. I was working as a UI Architecture Consultant at Taleo/Oracle, my client for the last 21 months. My gig there ended last month, but they agreed to let me publish a series of articles about the knowledge I gained.
Project Background
The Director of Product Management had been working on the concepts for a new project - codenamed "Visual MyView". Below is a mockup he created for our kickoff meeting on January 4th.
From his original email about the above mockup:
The intent here is that one of the columns has rows that have a similar width. The rows could be dragged and dropped into a different order – or potentially the two columns could also be reordered. The rows will basically be comprised of similar widgets. You can see in the mockup how the first two rows might look – and sample widgets. The widgets shown can be configured by the end user, as well as the order in which they are displayed. Other requirements given to us were the following.
Row 1 is comprised of 'summary' widgets that are 'todo' items. Reviews needing done – approvals required – etc.
Row 2 will be a graph row – having graphs and charts to display information – larger squares will build this row.
Row 3's content was not determined yet.
I started the initial layout with static HTML and CSS and had a wireframe to show by mid January.
By the end of January, we'd renamed the project to My Dashboard and had a working prototype using CoolClock and moment.js for the clock in the top right, AngularJS to display widget data, jQuery UI for drag-n-drop of rows and widgets, Bootstrap's Carousel for holding charts and Highcharts for rendering charts.
For the past several years, I've written "farewell to ski season" posts at the end of April. This year, I intended to as well, but I never knew it was going to end!
A lot's been going on since I last wrote here. First of all, the end of the ski season was fantastic! The last week in Winter Park was the best skiing of the year. The first (Tuesday) afternoon, I started skiing around 1pm and it snowed all afternoon - resulting in several inches by the end of the day. The next day was smooth and empty, followed by a day of deep powder and knee-deep runs down Eagle Wind. I had one of the best runs of my life that day.
While the snow was great at the end (and far better than last year), I didn't get as many days as I'd like. Only 22 this year. Most of them with Trish, Abbie and Jack. Next year, we'll be getting Abbie a Colorado 5th Grade Free Ski Pass and trying to hit all the ski resorts in the state. Below are some of my favorite pictures from this year's season - can't wait for next year!
The Bus Project
The last time I wrote about The Bus, it was in October. Since then, its rear suspension and wheels/times have been installed. In February, I bought a brand-new 911 racing engine and it's been installed as well.
There's still quite a bit of suspension, drivetrain and steering work to do, but it's in good hands. Last week, I removed it from Motorworks Restorations and I've started finishing it myself. I don't have welding skills and equipment, so I'm contracting that out, as I will most of the finishing touches. I'm also thinking of writing a letter to one of those Body Shop shows on TV and seeing if I can get them to finish it.
New Gig
If you've seen my LinkedIn Profile lately, you'll know I was looking for a new gig. I found one in mid-May and started consulting at Travelport in June. It's a nice 11-mile bike ride (uphill on the way there, downhill coming home) that I've thoroughly enjoyed. Takes me about an hour each way and is much better than sitting in traffic for 45 minutes. The project is interesting and fun to work on, and it ends in a couple weeks.
The Wedding and Honeymoon
In July, we're heading up to The Cabin in Montana to vacation and get ready for our wedding. We'll be enjoying the outdoors (rafting, biking, fishing), visiting with my folks and getting ready for the big day. After that, we'll be heading on a whirlwind honeymoon that takes us from Ireland to Italy to Thailand to Fiji. We're very much looking forward to the whole adventure.
And with that, I must go. It's Craft Cruisers night and there's beer to drink.
Last year, I worked on a huge redesign of Taleo's UI with HTML5, Twitter Bootstrap and CSS3. Management thought it would take 6-9 months and my colleague (Vladimir Bazarsky) and I finished it in just over 3 months. Yes, we encountered many, many cross-browser compatibility issues in the process. While in QA, we found and fixed over 750 issues. This was no small feat since the app was over 2 million lines of code and contained 1700 JSPs.
After writing about working with Bootstrap, I was contacted by my good friends, David Geary and Scott Davis to speak at the HTML5 Denver Users Group. Scott was very persuasive with his words (a.k.a. lots of trash-talking) and I chuckled as I read one of the best emails I've ever received. I replied that his strategy worked, I'd come up with a excellent topic and agreed to speak in April.
Much of the Bootstrap content comes from Dan Vega. He built a Bootstrap presentation last August using the HTML5 slide template for Google I/O 2012 and put it on GitHub. In an email to the Bootstrap mailing list, he wrote "feel free to use the slide deck if you plan on telling others about this awesome product" and that's exactly what I did.
Speaking at HTML5 Denver was a real treat. The venue, Casselman's, was awesome. It has a huge room with a proper stage, sound system and lighting. If you've done something cool with HTML5 lately, I encourage you to signup for a 10-minute lightning talk next month.
Not only was the venue great, but the cold Guinness while speaking was delicious. It was also a nice networking opportunity. I met several folks afterwards and talked about what's next for me. My contract with Taleo/Oracle ends May 31st, hence the reason "Free Agent" is listed on my LinkedIn profile. I've got a few good opportunities so far, but nothing that I've agreed to yet. I expect negotiations to heat up in the coming weeks, so please let me know if you'd like a seat at the bargaining table.
In February 2012, Trish and I traveled
to
Stockholm on Icelandair. We were immediately impressed with the
airline's
excellent service. Trish was also a bit miffed that we had a layover in Iceland without an opportunity to get out
and see the sites. You see, Iceland is a Photographer's Paradise, and she's the
best photographer I know.
This year, when planning our trip to Devoxx
France, I set out to correct this missed opportunity. Since Icelandair now flies direct from Denver, and offers
free stopovers, our planning was easy.
The conference was in Paris; one of the most magnificent cities to photograph. Trish has some great photos from 2011.
She'll be showing many of these photos at an upcoming exhibit at Paris
on the Platte in Denver. However, she wanted more.
We arrived in Paris for Devoxx France on Tuesday, March
26th. The first day's excursion started with visiting the Latin Quarter, the
Panthéon and Notre Dame.
We had a nice dinner that evening while watching the Fútbol match between France and Spain.
On Wednesday, we hung around the hotel in the morning, then took the metro to
La Basilique du Sacré Coeur de Montmartre and Moulin Rouge.
From there, we journeyed to the Eiffel
Tower for a hike. We climbed the stairs to the second floor and enjoyed the spectacular view.
Wednesday evening, we attended the Devoxx Speakers Dinner. We had a great time chatting and drinking wine with Martin Odersky, Guillaume Bort, the many Nicolas', James Ward and Josh Long.
On Thursday, I delivered my talk on Comparing JVM Web Frameworks in the early afternoon and did
Play vs. Grails Smackdown with James Ward in the evening. I published an
article about these talks
the next day.
While I was talking about frameworks, Trish was galavanting around Paris taking some amazing photos.
Thursday night, we had a wonderfully authentic French dinner with many of the folks from the conference. Around
midnight, Trish captured the beauty of Les Invalides.
On Friday, we slept in a bit and then headed to the airport for our flight to Iceland. A few hours later, we were
snuggled into the cozy bar at Hotel Reykjavik Centrum. A few hours after
that
and we were bouncing up and down on a Super Jeep tour to see the Northern Lights.
Our
driver kept telling us "if you believe, it will happen". And boy oh boy, did it ever. The green and purple lights
dancing in the sky overhead were mind-blowing!
Saturday came quickly after a late night, and we opted for a scenic tour of the area by helicopter.
Easter Sunday was our last day in Iceland and we enjoyed most of it at the Blue
Lagoon. Despite the plethora of tourists, the hot springs, saunas and cold beer were a lovely way to prepare for
the long road home.
Visiting Iceland and photographing the Aurora Borealis
was an awesome experience. Speaking at Devoxx France, photographing Paris and having lots of good times with new
(and old) friends was equally delightful. For more pictures of our travels, see my Paris and Iceland
Album or Trish's Devoxx France,
Iceland or Northern Lights albums.
This week, my lovely fiancé and I traveled to the City of Light. Our journey was designed around some speaking engagements at Devoxx France. Devoxx is one of my favorite conference franchises and Devoxx France has been special to me ever since the Devoxx (Belgium) I spoke at in 2011.
2011 was the year I spoke about my experience with Play, Scala, CoffeeScript and Jade. I wrote the presentation on my flight over, composed the demo video the night before and made it all happen in the nick of time. Of course, this was after 120 hours of research and preparation, so the presentation composition process had all the data I needed. You can imagine my sense of relief after pulling off that talk and getting an enthusiastic applause from the audience for my efforts.
One of the first audience questions I received was from Nicolas Martignole, asking if I'd speak at Devoxx France the following year. I whole-heartedly agreed to do it and was excited for the opportunity. It was with great disappointment that I later found out I couldn't attend Devoxx France in 2012. My client didn't like me taking so much time off and I agreed to scale my two week vacation back to 1 week. This year, I was determined to go, so I submitted some of my favorite talks: Comparing JVM Web Frameworks and The Play vs. Grails Smackdown with James Ward. I was extremely pleased when they both got accepted.
Side Story: I met Martin Odersky shortly when he sat down next to me for the Java Posse presentation in Belgium in 2011. After shaking his hand and introducing myself, I had to politely ask him to leave because it was Trish's seat. Talk about awkward; but Martin was very gracious and promptly found a new seat close by.
Comparing JVM Web Frameworks
Both talks required a bit of updating. For Comparing JVM Web Frameworks, I started reading The Paradox of Choice and found many parallels to the agony that developers experience with choosing a web framework. I described how I didn't think good framework decisions were based on the many, many features that frameworks have, but often on pre-defined constraints. There's those lucky developers that get to choose a Full Stack Framework because they're doing greenfield development. Then there's those that want a better Pure Web Framework that replaces something (e.g. Struts) that's not satisfying their needs. And lastly, there's those that've found it possible to leverage a SOFEA and use a JavaScript MVC framework with an API Framework on the backend. I don't think it makes sense to compare all web frameworks and I tried to use these pre-defined constraints (language, platform and application type) argument to separate into categories and help make choosing easier.
I took out the parts of the presentation that've pissed people off in the past - particular the JSF bashing by James Gosling, the Rails gushing from Craig McClanahan and the Pros and Cons sections of each framework. I added the history of web frameworks and research from InfoQ and devrates.com.
The best part of the JVM Web Frameworks talk was the audience's reaction and enthusiasm. Devoxx always seems to attract passionate developers and Devoxx France was no different. Developers packing the room, clapping after your intro, laughing at your jokes, signifying that they agree with you about JSF. As a speaker, it's an unbelievable experience.
You can view my Comparing JVM Web Frameworks presentation below or on Slideshare.net.
Play Frameworks vs. Grails Smackdown
To prepare for James Ward and my Play vs. Grails Smackdown, we had a number of goals. First of all, we wanted to update our apps to use the latest versions of each framework. I documented what it took for Grails, James just checked in his code to GitHub. It was interesting to see that Grails 2.0.3 -> 2.2.1 caused a number of issues with testing, while Play 2.0.3 -> Play 2.1.0 required API changes, but nothing for tests. Secondly, we updated all the stats for our pretty graphs and ran load tests again.
This is where the fun started. On Tuesday evening, I decided to challenge the notion that Play was twice as fast as Grails. James had proven this with Apache Bench tests. With Play 2.0 and Grails 2.0 (last summer), we clocked Play at 251/requests per second and 198 for Grails. After upgrading each app to the latest releases, we found the numbers to be 233/second for Play and 118 for Grails.
However, Apache Bench only tests until the first byte is received. Since I've done a lot of browser optimizations recently, I fired up whichloadsfaster.com, captured a screenshot and added it to our presentation. The next day, James added a CDN and a bunch of caching to his app and re-ran his AB tests.
Now he was smoking Grails, so I added a CDN and caching as well. However, the best I could do was just over 1000/requests per second, while he was around 2200/second. When he ran live tests during our talk, Play was around 2800/sec and Grails was around 900.
It was great to see how much better performance we could get with caching and a CDN. The best part is this should be available to most applications, not just these frameworks. By adding a CDN (we used Amazon CloudFront) and caching, we were both able to 10x the performance of our apps. You can find our presentation here or view it below.
Summary
This was a very enjoyable conference to attend as a speaker. First of all, it was in one of the most beautiful cities in the world, but it's also a very special place for Trish and I. We got engaged just outside of Paris in Versailles after the last Devoxx conference I spoke at. Trish has some amazing photos from that trip. Secondly, the Devoxx conference attracts a special kind of developer - one that is passionate about and eager for knowledge. Lastly, speaking with my good friend James, in an exotic city about something we love - that was special. Asking for beers and having them brought to us at the start of our Smackdown. That was magical (thanks Nicolas!).
To all the Devoxx organizers and crew - well done on a great show!
In preparation for my Grails vs. Play Smackdown at Devoxx France next week, I recently upgraded my Grails version of Happy Trails from Grails 2.0.3 to Grails 2.2.1. I ran into a few issues along the way and figured I'd document them here to help others out.
Fixing the source The first issue I ran into was Spock and Groovy 2 incompatibilities.
| Resolving plugin JAR dependencies
| Error WARNING: Dependencies cannot be resolved for plugin [mail] due to error: startup failed:
Could not instantiate global transform class org.spockframework.compiler.SpockTransform specified at jar:file:/Users/mraible/.grails/ivy-cache/org.spockframework/spock-core/jars/spock-core-0.7-groovy-1.8.jar!/META-INF/services/org.codehaus.groovy.transform.ASTTransformation because of exception org.spockframework.util.IncompatibleGroovyVersionException: The Spock compiler plugin cannot execute because Spock 0.7.0-groovy-1.8 is not compatible with Groovy 2.0.7. For more information, see http://versioninfo.spockframework.org
I posted the problem to StackOverflow and got a response almost immediately. While this pull request helped me quite a bit, it was ultimately caused by my vision: I had two "geb-spock" dependencies listed in BuildConfig.groovy with different groupIds.
At this point, I also moved all my plugin dependencies from application.properties to BuildConfig.groovy.
The next problem I ran into was a unit test and functional tests failing. The unit testing issue was caused by my Direction model not being in the tests @Mock annotation. After I added it, validation kicked and I recognized my test was invalid. I added @Ignore and continued.
The functional test seemed to be seemed to be caused by Geb and it trying to use the Chrome Driver. One of my tests didn't work with the default HtmlUnitDriver, so I used the ChromeDriver for the one test.
| Running 11 spock tests... 6 of 11
| Failure: signup as a new user(happytrails.AuthenticatedUserSpec)
| org.openqa.selenium.WebDriverException: Unable to either launch or connect to Chrome. Please check that ChromeDriver is up-to-date. Using Chrome binary at: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome (WARNING: The server did not provide any stacktrace information)
Command duration or timeout: 45.66 seconds
Build info: version: '2.27.0', revision: '18259', time: '2012-12-05 11:30:53'
System info: os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '10.8.2', java.version: '1.7.0_04'
Driver info: org.openqa.selenium.chrome.ChromeDriver
at org.openqa.selenium.remote.ErrorHandler.createThrowable(ErrorHandler.java:187)
at org.openqa.selenium.remote.ErrorHandler.throwIfResponseFailed(ErrorHandler.java:145)
at org.openqa.selenium.remote.RemoteWebDriver.execute(RemoteWebDriver.java:533)
at org.openqa.selenium.remote.RemoteWebDriver.startSession(RemoteWebDriver.java:216)
at org.openqa.selenium.remote.RemoteWebDriver.(RemoteWebDriver.java:111)
at org.openqa.selenium.remote.RemoteWebDriver.(RemoteWebDriver.java:115)
at org.openqa.selenium.chrome.ChromeDriver.(ChromeDriver.java:161)
at org.openqa.selenium.chrome.ChromeDriver.(ChromeDriver.java:107)
at happytrails.AuthenticatedUserSpec.signup as a new user(AuthenticatedUserSpec.groovy:25)
Even when running "grails -Dgeb.env=chrome test-app", this still happened. This was caused by the fact that I had GebConfig.groovy in test/functional/happytrails. Move it to test/functional solved the problem. I also discovered that I know longer needed Chrome to get this test to pass. Apparently, the HtmlUnitDriver has issues with Grails 2.2, but it seems to work for me.
After getting the Geb configuration fixed, I ran into a functional test failure:
| Running 11 spock tests... 5 of 11
| Failure: click signup link(happytrails.AuthenticatedUserSpec)
| org.openqa.selenium.ElementNotVisibleException: Element must be displayed to click (WARNING: The server did not provide any stacktrace information)
Even though I could see the "signup" link when I ran "grails run-app", I could see that it didn't show up when running tests in Chrome. This turned out to be caused by an extraneous <div class="nav-collapse"> I had in my main.gsp. Removing it solved the problem. It's strange that this never showed up with Grails 2.0. My only guess is that Geb someone didn't look at the visibility of the element.
The last testing-related issue I ran into was a InvalidElementStateException:
| Running 11 spock tests... 7 of 11
| Failure: add new route to region(happytrails.AuthenticatedUserSpec)
| org.openqa.selenium.InvalidElementStateException: Element must be user-editable in order to clear it. (WARNING: The server did not provide any stacktrace information)
I was able to fix this by changing AddRoutePage.groovy from:
And then referencing name, distance and location accordingly (form.name, etc.) in AuthenticatedUserSpec.groovy.
CloudBees
After I had everything working locally, I logged into Jenkins on CloudBees. Since I hadn't used it in a while, I had to wait a bit while my Jenkins server was re-commissioned. Once it was up, I tried to select Grails 2.2.1 to build with, but found it wasn't available. After a tweeting this, I learned about Grails Wrapper, found that the latest Grails Jenkins plugin supported it and got everything working. I later discovered that CloudBees does support Grails 2.2.1, I just needed to setup another Grails installation to automatically download and install 2.2.1.
Heroku
The last two issues I ran into were with Heroku. Since I was upgrading everything, I wanted Grails to build/run under Java 7 and use Servlet 3. I changed the appropriate properties in BuildConfig.groovy, configured Heroku and deployed. No dice.
Error Compilation error: startup failed:
Invalid commandline usage for javac.
javac: invalid source release: 1.7
Usage: javac
use -help for a list of possible options
Sidenote: I tried building with Java 8 on CloudBees, but discovered the searchable plugin doesn't support it.
Compile error during compilation with javac.
/scratch/jenkins/workspace/Happy Trails - Grails 2/work/plugins/searchable-0.6.4/src/java/grails/plugin/searchable/internal/compass/index/DefaultUnindexMethod.java:94: error: reference to delete is ambiguous
session.delete(query);
^
both method delete(CompassQuery) in CompassOperations and method delete(CompassQuery) in CompassIndexSession match
As far as Servlet 3, it was pretty obvious that the Jetty version Heroku uses for Grails doesn't support it. Therefore, I reverted back to Servlet 2.5.
java.lang.NoClassDefFoundError: javax/servlet/AsyncContext
at org.codehaus.groovy.util.LazyReference.getLocked(LazyReference.java:46)
at org.eclipse.jetty.util.component.AbstractLifeCycle.start(AbstractLifeCycle.java:59)
at java.lang.Class.privateGetDeclaredMethods(Class.java:2444)
I sent the Java 7 issue to Heroku Support a few days ago but haven't heard back yet.
Summary
While upgrading Grails from 2.0 to 2.2 wasn't as easy as expected, it is understandable. After all, Grails 2.2 ships with Groovy 2.0, which has a bunch of new features itself. All the issues I ran into were fairly easy to solve, except for Java 7 on Heroku. But hey, what do you expect from a free hosting service?
If you're at Devoxx France next week, I look forward to sharing our research on Grails 2.2.1 vs. Play 2.1.0.
