Raible Designs

Life as an Open Source Developer

It's been a little over a month since I started my new gig at Stormpath. I gotta say, life is great as an open source developer! Yes, I did start working for them as a consultant in April, so it's not a huge change for me. However, I only recently realized I haven't written a single line of proprietary code the entire time. My GitHub contributions look pretty good this year. They're nothing like @mojavelinux, or @dsyer, but I'll get there.

It's also been a bit more stress than I'm used to. I think this comes from a couple things: 1) turning my hobby into my job and 2) I've set a lot of high expectations for myself. As a developer evangelist, I get to create my own job. That means I can speak at the conferences I want to, write the code I want to, create the blog posts I want to, and everything else in between.

At the end of September, I finished updating the JHipster Mini-Book for JHipster 3.x. It's gone through tech editing and it's being copy-edited right now. I hope to release it within a week.

In early October, I said I'd commit to writing one blog post per week, develop a JHipster module for Stormpath, and help get their Angular 2 support good enough for an alpha release. I'm happy to report I've been able to accomplish most of these and I hope to show off our Angular 2 support soon.

I then channeled my efforts into integrating Stormpath's Java SDK with their AngularJS directives. You can read about how I did that in Get Started with AngularJS, Spring Boot, and Stormpath. Unlike my previous AngularJS tutorial, this one connects to a backend and shows how to communicate with Spring Boot cross-domain.

If you like to read code more than words, you can look at the example project's commits on GitHub.

1. Create an AngularJS UI: search and edit features
2. Create a Spring Boot app with Stormpath: app from start.stormpath.io
3. Develop an API to CRUD people with Spring Data REST: /api/people
4. Integrate AngularJS and Spring Boot apps: cross-domain
5. Integrate Stormpath into AngularJS for login, registration and forgot password: Stormpath Angular SDK

Last week, I released a JHipster module that integrates Stormpath. This exercise was good because I was able to identify some gaps in Stormpath's SDKs and fix them. Getting something to work made me feel good; having the ability to improve the developer experience was even better! Of course, I blogged about what I learned.

This week, I edited and code reviewed some posts from Karl Penzhorn on React with Spring Boot and using webpack with React. I also got to bang my head against the wall writing Angular 2 tests. If you're writing a module for Angular 2, generator-angular2-module provides a nice starting point.

Last, but certainly not least, I'll be speaking at a few events about Microservices, JHipster, Angular 2 and Stormpath in the near feature.

• Rocky Mountain Software Symposium, November 19
• The Rich Web Experience, December 9
• A joint talk at Denver JUG with the infamous Josh Long, December 14

If you have any questions about developer evangelism, the technologies I mentioned in this post, or Stormpath, please let me know. Otherwise, I hope to see you on the road soon!

Devoxx France 2016: Springtime in Paris

I had the good fortune to visit Paris last week for Devoxx France. When traveling to conferences in exotic locations, I like to bring a travel partner. This time, I asked my daughter, Abbie, to join me. She gladly accepted. Springtime in Paris can be a beautiful event. The grass is green, the flowers are blooming and the sun's rays blanket the city.

We arrived in Paris on Tuesday, April 19 and quickly found our way to our hotel. Its location was ideal: across the street from Le Palais des Congrès de Paris convention center and mall. Since the conference was at the convention center, it made logistics for my talks very convenient. We grabbed a quick bite after settling in, then took a 15-minute stroll to the Arc de Triomphe.

That evening, we joined Ippon developers and friends at a special event for Java Hipsters. Their rooftop location had great views, cold "Java" beer and I met a lot of enthusiastic developers. I especially enjoyed talking with the original Java Hipster and founder of JHipster, Julien Dubois.

The sunset over Paris provided a splendid backdrop for the festivities.

How to Implement a Smart Chunking Bootstrap Carousel with AngularJS

I've been helping a client develop a project management application for the last several months. One of the features I implemented uses UI Bootstrap's carousel directive to display a list of project templates to choose from when creating a new project. Rather than displaying one at a time, we wanted to display as many as the user's screen would allow. That is, if they were on a large monitor, we wanted to display five templates, a medium size monitor would display three and so on. This is a story of how I implemented a smart chunking carousel.

Devoxx 2015: A Java Hipster Visits Belgium

I've been excited to show people JHipster and what it can do ever since I started using it in September 2014. I've been using its core frameworks (AngularJS, Bootstrap and Spring Boot) for a few years and believe they do a great job to simplify web development. Especially for Java developers.

When my JHipster talk was accepted for Devoxx Belgium, I told Trish we were headed back to Belgium. She smiled from ear-to-ear. Belgium is one of our favorite countries to visit. In an effort to live healthier prior to Devoxx, I stopped drinking beer a month beforehand. I mentioned this to friends the week prior.

One month ago, I stopped drinking beer. I hoped it'd help me with www.21-points.com and weight loss. Unfortunately, it did not.

I told myself I'd start drinking beer again when 1) The Bus was finished or 2) Trish and I arrived in Belgium for Devoxx. Looks like #2 will win (we land on Tuesday).

We arrived in Brussels late Tuesday morning and hopped aboard a train to Antwerp. After arriving, we were hungry so we stopped at Bier Central for lunch. The mussels and beer were splendid.

Angular Summit 2015

I was in Boston this week, speaking and attending the very first Angular Summit. I had the privilege of delivering the opening keynote on Monday. I spoke about the Art of Angular and used a slide deck similar to last time. I did update the presentation to show the astronomical growth of AngularJS in terms of candidate skills (on LinkedIn) and job opportunities (on Dice.com)¹.

I mentioned the recently announced good news for Angular 2:

• We're enabling mixing of Angular 1 and Angular 2 in the same application.
• You can mix Angular 1 and Angular 2 components in the same view.
• Angular 1 and Angular 2 can inject services across frameworks.
• Data binding works across frameworks.

In related news, Craig Doremus recently posted a state-geo-angular project that shows how you can develop an Angular 1.x application that will be easy to upgrade to Angular 2.x. Thanks Craig!

After my keynote, I attended Pratik Patel's session on High Performance JavaScript Web Apps. Pratik pointed out mobitest.akamai.com for testing an app's performance and seeing its blocking resources. He also mentioned speedgun.io (currently unavailable) for capturing performance numbers as part of a continuous integration process. Finally, he recommended Addy Somani's JavaScript Memory Management Masterclass.

My second presentation was about JHipster. Near the end of the presentation, I mentioned that I hope to finish the JHipster Book this month. Writing presentations for SpringOne 2GX and the Angular Summit occupied a lot of my free time in September. Now that it's October, I'll be dedicating my free time to finishing the book. In fact, I think I can finish the rough draft this week!

For the last session of the day, I attended John Lindquist's session on Angular 2 Components. John showed us how everything is a component in Angular 2. He also said "now is the time to learn ES6" and built an Angular 2 ToDo App using ES6 and a bit of TypeScript. You might recognize John's name; he's the founder of egghead.io, an excellent site for learning Angular with bite-sized videos.

Tuesday morning started with a Angular 2.0 keynote from Peter Pavlovich. I really enjoyed this session and received lots of good tips about getting ready for Angular 2. The tweet below from Ksenia Dmitrieva shows his advice.

My biggest takeaway was to start following John Papa's Angular Style Guide ASAP.

The first session I attended on Tuesday was Judd Flamm's Google Material Design & Angular. I'm using Material Design for Bootstrap on a side project, so I was interested in learning more about its inspiration. We learned that Google Design has everything you need to know about why Material Design exists. We also learned about Angular Material and spent most of the session looking at its components. Judd recommended Angular Material-Start for those looking to get started quickly with both frameworks. Judd was a very entertaining speaker; I highly recommend you attend one of his talks if you get the opportunity.

After being dazzled by Peter's knowledge of Angular 2 in Tuesday's keynote, I attended two more of his talks: one on Meteor and another on Aurelia. I've known about Meteor for a while, but have become more intrigued by it lately with its 1.2 release and Angular support. Meteor's command line tools that auto-inject CSS and JS demoed very well, as did it's installable features like a LESS support and Facebook authentication.

After hearing all the good things about Angular 2 from Peter, it was interesting to hear him downplay it in his Aurelia talk later that day. When he started showing code, it was pretty obvious that Aurelia is doing a great job of simplifying JavaScript MVC syntax for developers. You can develop components with almost half the code that Angular 2 requires, and it uses ES6, jspm and SystemJS. If you're developing JavaScript, learning these tools will help prepare you for the future. It's cool that Aurelia encourages learning things you should learn anyway.

Aurelia and Angular 2 are both still in Alpha, so I'm not sure it makes sense to use them on a project this year. However, I do think it's important to track them both. I especially think it's interesting that the founder of Aurelia, Rob Eisenberg, left the Angular Team in November 2014 and announced Aurelia in January 2015 (Hacker News thread). Peter mentioned several times that Aurelia wants to help developers write apps, while AngularJS is more tied to helping Google write apps.

There were around 400 people at Angular Summit, which I think is pretty good for a first-run conference. As with most No Fluff Just Stuff shows, it ran smoothly, had plenty of time between sessions and was filled with knowledgeable, entertaining speakers. It was fun doing my first keynote and I look forward to speaking again in November (at Devoxx) and December (at The Rich Web Experience).

1. I know Dice.com is probably not a great site, but it makes sense to use it since I've been tracking JavaScript MVC framework job stats on it since February 2014.

SpringOne 2GX 2015: My Presentations on Comparing Hot JavaScript Frameworks and NoXML

Last week, I had the pleasure of traveling to Washington, DC to speak at the annual SpringOne 2GX conference. I was pretty stressed for the last few weeks because I had to create two new presentations from scratch, and both had to be 90 minutes long. I was also hoping to finish the JHipster Book before the conference started. I was able to finish both presentations in the nick of time, but did not find the time to write the last chapter in the JHipster Book.

The first presentation was titled Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js. I started by revisiting the Comparing JVM Web Frameworks talk I did at vJUG last February. I explained how I think traditional web frameworks are no longer relevant in 2015, but I do believe server-side rendering is still very relevant. From there, I used Yevgeniy Brikman’s framework scorecard (from his Node.js vs. Play Framework presentation) to rank each framework by a number of different criteria. You can see the final results on slide 160. Since the scores were so close, I believe you could tweak some scores a bit (or add weights to the different criteria) and make any of the frameworks come out on top.

You can click through the presentation below, download it from my presentations page, or see it on SlideShare.

I started writing the second presentation a week before I had to deliver it. On Thursday, September 10th, I stayed up late, trying to figure out how to create a good presentation on NoXML and finish the last part of the JHipster Book. Then it came to me, I needed to parallelize and do them both at the same time. I decided to compare AppFuse (which is similar to a legacy Spring application with lots of XML) to JHipster (which hardly contains any XML).

I wrote a 10-page Google Doc on how I planned to do this, then went rafting and camping with my family for the weekend. I finished most of the presentation on Monday night, but then realized the presentation wouldn't be long enough to fill 90 minutes. So I hunkered down at midnight, created a new AppFuse application and removed a bunch of its XML. This took me until 3:30am, and I was able to accomplish the following tasks:

• Spring XML to Java
• Spring Security Configuration to Java
• web.xml to WebApplicationInitializer
• Spring MVC to Java
• Migrated to Spring Boot
• Maven to Groovy

I was pretty pumped when I completed my final goal: converting to Spring Boot and getting a test to pass. I made commits to an appfuse-noxml project on GitHub as I accomplished each step. You can see all the changes in the project's commit log. While I'd figured everything out, I still needed to complete the presentation. Luckily, I found time to do this the night before, the morning of, and in the final hour before I had to deliver the talk. You can imagine my relief when I was done delivering both talks.

You can click through the presentation below, download it from my presentations page, or view it on SlideShare.

While I didn't get to spend much time at the conference, I did have a lot of fun while I was there. I got to meet some new folks, reconnect with old friends, and enjoy beers and dinner with a smiling crew on Thursday night. The Broncos victory late that night was the icing on the cake.

Grails + Angular vs. JHipster

I recently received an email from a long time follower of my comparing web frameworks research and presentations. He asked some interesting questions:

I am starting on a new venture to build a direct to consumer web application. I am planning to leverage Cloud services to build my CI/CD pipeline. I am very strong with Java Backend/middleware and learning Javascript Front-end frameworks. I love Spring and SOFEA. Having said that, I am wondering if I should use Grails + Angular or JHipster? My primary concern with JHipster is there is hardly any ‘community', there is Julien and whatever he says/thinks goes! Can you give me some pointers?

I imagine there's other JVM developers with similar questions, so I figured I'd publish my response for all to see.

Yes, I'm probably a bit biased since I'm writing a JHipster book. However, it's been easy for me to introduce and use Spring Boot at my last few clients. They were already using Spring, so the transition to using a Spring simplifier was a no-brainer. I haven't had as much luck getting clients to adopt Grails, even though I've suggested it. That could change now that it's based on Spring Boot.

What's your experience? Would you recommend Grails + Angular over JHipster? If so, why?

Getting Hip with JHipster at Denver's Java User Group

Last night, I had the pleasure of speaking at Denver's Java User Group Meetup about JHipster. I've been a big fan of JHipster ever since I started using it last fall. I developed a quick prototype for a client and wrote about solving some issues I had with it on OS X. I like the project because it encapsulates the primary open source tools I've been using for the last couple of years: Spring Boot, AngularJS and Bootstrap. I also wrote about its 2.0 release on InfoQ in January.

To add some humor to my talk, I showed up as a well-dressed Java Developer. Like a mature gentleman might do, I started the evening with a glass of scotch (Glenlivet 12). Throughout the talk I became more hip and adjusted my attire, and beverage, accordingly. As you might expect, my demos had failures. The initial project creation stalled during Bower's download all JavaScript dependencies. Luckily, I had a backup and was able to proceed. Towards the end, when I tried to deploy to Heroku, I was presented with a lovely message that "Heroku toolbelt updating, please try again later". I guess auto-updating has its downsides.

After finishing the demo, I cracked open a cold PBR to ease my frustration.

I did two live coding sessions during this presentation; standing on the shoulders of giants to do so. I modeled Josh Long's Getting Started with Spring Boot to create a quick introduction to Spring Boot. IntelliJ IDEA 14.1 has a nice way to create Spring Boot projects, so that came in handy. For the JHipster portion, I created a blogging app and used relationships and business logic similar to what Julien Dubois did in his JHipster for Spring Boot Webinar. Watching Josh and Julien's demos will give you a similar experience to what DJUG attendees experienced last night, without the download/deployment failures.

You can click through my presentation below, download it from my presentations page, or view it on SlideShare.

You might notice my announcement on slide #32 that I've signed up to write a book on JHipster.

I haven't started writing the book yet, but I have been talking with InfoQ and other folks about it for several months. I plan to use Asciidoctor and Gradle as my authoring tools. If you have experience writing a book with these tools, I'd love to hear about it. If you've developed an application with JHipster and have some experience in the trenches, I'd love to hear your stories too.

As I told DJUG last night, I plan to be done with the book in a few months. However, if you've been a reader of this blog, you'll know I've been planning to be done with my '66 VW Bus in just a few more months for quite some time, so that phrase has an interesting meaning for me.

Best Practices for using Foundation with AngularJS Revisited

A couple weeks ago I wrote about using Foundation with AngularJS. Based on research I'd done, I concluded that it was best to use Foundation for Apps for any webapps my client created and Foundation for Sites for any websites (e.g. a WordPress-based intranet).

After doing my initial research, I did some prototyping with Foundation for Apps (F4A). What I discovered is that F4A does not include all the same components as Foundation for Sites (F5). For example, the top-bar and dropdown functionality are missing. I posted my issues to the Foundation Forums.

The response I received:

It should work. You would need to copy over all the Scss and global mixins that you used in top-bar or at least all the output CSS from it. Otherwise there is no reason the components won't fit into the grid.

I was able to import Foundation for Sites into my project by adding it to bower.json:

  "dependencies": {
    "foundation-apps": "~1.0.2",
    "foundation": "~5.5.1"
  }

After doing this, I added the new path to Gulpfile.js:

var sassPaths = [
  'client/assets/scss',
  'bower_components/foundation/scss',
  'bower_components/foundation-apps/scss'
];

After making this change, the top-bar rendered and my dropdowns worked. Since there was no jQuery in the page, I thought this might be a viable option. However, Jason Demitri quickly pointed out it probably wouldn't work with mobile. He was right.

While using F4A, I noticed that its components, and much of its look-n-feel, was different than F5. If you look at its Email App template, you'll see it looks kinda like a mobile app, even in a desktop browser. After trying F4A myself, I decided that F4A wasn't for us. First of all, it doesn't seem to provide a consistent look and feel with a website that's written using F5. Furthermore, F4A only supports IE10+. In the healthcare industry, there's a lot of older browsers out there, so my client needs to support IE9 as a minimum.

For these reasons, I decided to try Angular directives for Foundation. I took a prototype I'd written with F5, removed its JavaScript, added Angular Foundation + Foundation dependencies to bower.json, added references to the respective scripts in index.html and added 'mm.foundation' as a dependency in app.js. The experiment worked beautifully and I was quite happy with the results. I shared my findings with the team and we decided Angular Foundation is the best way to integrate Foundation and AngularJS.

F4A is pretty new and I imagine it'll add more of F5's features as it evolves. However, I don't know if the two will ever be so similar that they can live side-by-side and allow a seamless experience for users. If you're interested in mixing F4A and F5, you might want to watch Jason Demitri's foundationUltra. This project combines Angular Foundation, Foundation for Sites, Foundation for Apps and Font Awesome. You can see a demo at http://relutiondev.github.io/foundationUltra/.

Converting an Application to JHipster

I've been intrigued by JHipster ever since I first tried it last September. I'd worked with AngularJS and Spring Boot quite a bit, and I liked the idea that someone had combined them, adding some nifty features along the way. When I spoke about AngularJS earlier this month, I included a few slides on JHipster near the end of the presentation.

This week, I received an email from someone who attended that presentation.

Hey Matt,
We met a few weeks back when you presented at DOSUG. You were talking about JHipster which I had been eyeing for a few months and wanted your quick .02 cents.

I have built a pretty heavy application over the last 6 months that is using mostly the same tech as JHipster.

• Java
• Spring
• JPA
• AngularJS
• Compass
• Grunt

It's ridiculously close for most of the tech stack. So, I was debating rolling it over into a JHipster app to make it a more familiar stack for folks. My concern is that it I will spend months trying to shoehorn it in for not much ROI. Any thoughts on going down this path? What are the biggest issues you've seen in using JHipster? It seems pretty straightforward except for the entity generators. I'm concerned they are totally different than what I am using.

The main difference in what I'm doing compared to JHipster is my almost complete use of groovy instead of old school Java in the app. I would have to be forced into going back to regular java beans... Thoughts?

I replied with the following advice:

JHipster is great for starting a project, but I don't know that it buys you much value after the first few months. I would stick with your current setup and consider JHipster for your next project. I've only prototyped with it, I haven't created any client apps or put anything in production. I have with Spring Boot and AngularJS though, so I like that JHipster combines them for me.

JHipster doesn't generate Scala or Groovy code, but you could still use them in a project as long as you had Maven/Gradle configured properly.

You might try generating a new app with JHipster and examine how they're doing this. At the very least, it can be a good learning tool, even if you're not using it directly.

Java Hipsters: Do you agree with this advice? Have you tried migrating an existing app to JHipster? Are any of you using Scala or Groovy in your JHipster projects?