Raible Designs

How to ReactJS and Tooling is Awesome at HTML5 Denver

Last night, I had the pleasure of attending the HTML5 Denver Meetup with two talks by Will Klein. I was motivated to attend because React has been on my radar for a while and Will's first talk was titled How to ReactJS. Will's presentation doesn't show the real meat of this talk, which contained lots of live coding. Will started with a static webapp, then converted it to use React bit-by-bit. His live coding was greatly helped by the fact that he had 3-4 co-workers in the room, so there was a sense of pair programming when things didn't work. During the presentation, he mentioned the JavaScript Jabber Podcast on React. I listened to it this morning, and I recommend it if you want to learn about the history of React.

Will's second talk was titled Tooling is Awesome. In this presentation, he showed us how to use npm and webpack. Again, the presentation doesn't capture the vast amount of knowledge demonstrated during the live-cli session. I hadn't heard of webpack before, so I was pumped to learn about it. If you need to complete/translate to JavaScript or CSS from another language, chances are that webpack will work well for you. During this demo, Will converted the previously developed React code to require/export modules, as well to do transpilation using webpack's jsx-loader. He also mentioned Keith Cirkel's How to Use npm as a Build Tool. If you're just getting started with JavaScript development and don't want to learn tools like Grunt or Gulp, this article will help you use npm as your only build tool.

Even though you can't experience the live-coding that happened last night, the code has been posted to GitHub. If you're looking to have talks about developing with React, I'd suggest contacting Will. He delivered great talks on subjects I've been keen to learn more about. Thanks Will!

In other Denver-related tech news, ThingMonk is coming March 3-4 and HTML5 Denver has lightning talks on March 23rd. ThingMonk is "a meeting of the tribes for people building the Internet of Things" and is sure to be a great conference. The Redmonk crew is always fun to hang out with and knows how to create a conference. Did I mention it's at a distillery?! The lightning talks in March are always a great time too. You can really learn a lot in a short period of time and it's a great way to share knowledge about cool technology you've recently used. Heck, you could attend ThingMonk, then create a lightning talk about what you learned for HTML5 Denver!

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?

Harry Gates Hut Trip in the Roaring Fork Valley

It's been several years since my last hut trip. When my friend Brad Swanson invited me this year, I jumped at the opportunity. Trish skipped this trip and my good friend Ryan joined in her place. It was Ryan's first hut trip. As a snowboarder, he opted to snowshoe with his snowboard on his back.

Our journey to Harry Gates Hut began early last Friday morning. Our Syncro had just returned from the body shop the night before and was ready to head for the hills. We arrived in Basalt, Colorado (in the Roaring Fork Valley) around 11am and were on the trail at 12:30pm.

From experience, I knew it was going to be a long slog uphill. I rented telemark skis, with NTN boots/bindings, from Confluence Kayaks. We both quickly realized we'd packed too many supplies, as our packs were quite heavy. Nevertheless, we trudged on, one foot in front of the other.

Best Practices for using Foundation with AngularJS

I was recently tasked with doing some research to figure out the best way to use Foundation with AngularJS. Goals for this research included:

1. Identify use cases of Foundation for Sites vs Foundation for Apps and recommend when to use each.
2. Look at pros and cons of using AngularJS with Foundation for Sites.

I'm writing this blog post to get feedback from you, fellow web developers, on your experience with Foundation. Have you tried using Foundation for Sites with AngularJS? If so, did you experience any pain?

From what I can tell, it looks like Foundation for Apps (FA) was created because folks had issues making AngularJS and Foundation 5 play nicely together. The Next Foundation explains why FA was created. Reddit's web_design zone has quite a few comments related to this article.

From there, I found a few ZURB blog posts that describe FA's three main advantages over Foundation for Sites (FS):

1. A New Grid
2. Motion UI
3. AngularJS Integration

This thread on the Foundation forums seems to indicate that FA would be good for developing applications while FS would be good for an intranet built on WordPress (since it's more of a website than a webapp).

The Art of AngularJS in 2015

I've been tracking statistics on jobs and skills for JavaScript MVC frameworks ever since I Compared JVM Web Frameworks at Devoxx France in 2013. At that time, Backbone was the dominant framework.

Last year, I updated those statistics for a presentation on AngularJS at Denver's Derailed. Angular had a similar amount of jobs as Backbone and a lot of people added it to their LinkedIn profiles. I found that Ember had grown around 300%, Backbone 200% and Angular 1000%!

Before presenting on AngularJS at last night's Denver Open Source Users Group, I updated these statistics once again. The charts below show how the number of jobs for Angular has doubled in the last year, while jobs for Ember and Backbone have fallen slightly. As far as skills, developers learning Ember and Backbone has increased 200%, while skilled Angular folks has risen 400%.

Yes, AngularJS has experienced huge growth in the last couple of years. You might even say it's the Struts of the JavaScript world.

For the presentation I delivered last night, I made a number of improvements over last year's. I added a live coding demo based on my Getting Started with AngularJS tutorial. I used IntelliJ's live templates to make it look easy. However, since the audience was quiet, and some were falling asleep, I skipped over the testing demo.

Testing AngularJS Applications

This article is the second in a series about learning AngularJS. It describes how to test a simple AngularJS application. In a previous article, Getting Started with AngularJS, I showed how to develop a simple search and edit feature.

What you'll learn

You'll learn to use Jasmine for unit testing controllers and Protractor for integration testing. Angular's documentation has a good developer's guide to unit testing if you'd like more information on testing and why it's important.

The best reason for writing tests is to automate your testing. Without tests, you'll likely be testing manually. This manual testing will take longer and longer as your codebase grows.

What you'll need

• About 15-30 minutes
• A favorite text editor or IDE. We recommend IntelliJ IDEA.
• Git installed.
• Node.js and NPM installed.

2014 - A Year in Review

2014 was destined to be a spectacular year. When I wrote my thoughts down last January, I thought the Broncos would win the Super Bowl and my VW Bus restoration project would be finished by summer. To focus on finishing the bus project, I didn't submit any talks to conferences. Instead of traveling to exotic locations, we opted to visit a bunch in our own backyard instead.

For this Year in Review post, I'll use the format I've used the last couple of years.

• Professional
  • Speaking
  • Devoxx4Kids
  • Projects
• Personal
• 2015

Professional

I had three different clients throughout the year, all in the health care industry. I continued working on a project with John Muir Health where we developed a hybrid mobile app. I wrote about what I learned in Documenting your Spring API with Swagger and Developing an iOS Native App with Ionic. Since I wrote the article about Swagger's Spring MVC support, it has become much easier to integrate; now it only requires an @EnableSwagger annotation.

In April, I started consulting with a small company in Alabama. I helped them modernize their tech stack and implemented a number of web services with Apache Camel. I wrote about this in a four-part series in September and October.

Getting Started with AngularJS

I was hired by my current client in November to help them choose a technology stack for developing modern web applications. In our first sprint, we decided to look at JavaScript MVC frameworks. I suggested AngularJS, Ember.js and React. Since most of the team was new to JavaScript MVC, I decided to create a tutorial for them. I tried to make it easy so they could learn how to write a simple web application with AngularJS. I thought others could benefit from this article as well, so I asked (and received) permission from my client to publish it here.

What you'll build

You'll build a simple web application with AngularJS. You'll also add search and edit features with mock data.

What you'll need

• About 15-30 minutes
• A favorite text editor or IDE. I recommend IntelliJ IDEA.
• Git installed.
• Node.js and NPM installed.

Integrating Node.js, Ruby and Spring with Okta's SAML Support

Security has always piqued my interest, ever since I first developed AppFuse and figured out how to make J2EE security work back in 2004. I hacked AppFuse to have Remember Me functionality, then moved onto Acegi/Spring Security. Spring Security had the features I needed, even if it did require almost 100 lines of XML to configure it. These days, it's much better and its JavaConfig - combined with Spring Boot - is pretty slick.

That was the first part of my security life. The second phase began the night I met Trish, and learned she sold security products. She knew of OWASP and their top 10 rules. It was Trish that inspired me to write my Java Web Application Security presentation. I really enjoyed writing that presentation, comparing Apache Shiro, Spring Security and Java EE's security frameworks. I followed up the first time I presented it with a number of blog posts and screencasts. Hmmmm, maybe I should update the presentation/screencasts to use Java configuration only (#NoXML) and submit it to a couple conferences this year? I digress.

I had to do a security-related spike over the last couple weeks. I was trying to get SAML authentication working with Okta and my client's Active Directory server. Luckily, someone setup the AD integration so all I had to do was try a few different languages/frameworks. I searched and found ThoughtWorks' okta-samples, which includes examples using Node.js and Sinatra (Ruby + JRuby). I also found a Spring SAML example that includes one of my favorite things in JavaLand: Java-based configuration.

I'm happy to report I was able to get all of these applications working with my client's Okta setup. This article will tell you how I did it. For each application, I created a new application on Okta using its "Template SAML 2.0 Application" and added myself in the application's "People" tab. Each section below contains the configuration I used for Okta. The instructions below assume you're similar to me, a developer that has Java 8, Node and Ruby installed, but none of the specific frameworks. As I write this, I have everything working on my Mac with Yosemite, but I wrote the instructions below using one of my old laptops, fresh after a Yosemite upgrade.

THE BUS IS PAINTED!! HOLY CHRISTMAS PRESENT BATMAN!

I asked Jim Verhey at ReinCARnation to stop working on my bus in mid October. I didn't have a client lined up for November and couldn't afford to keep paying for it.

Today, I journeyed to Colorado Springs to talk with Jim. I hoped to convince him to give me a fixed bid to finish the project. When I got there, he surprised me with a finished paint job! You can imagine the look on my face when he opened the door and I saw this beauty!! HOLY SHIT - I LOVE IT SO MUCH!! The colors are perfect and paint job is exquisite!!

Jim said he felt bad for all I’ve been through with this project and finishing it was my Christmas Present. BEST CHRISTMAS PRESENT EVER!!

There's still more work to be done before it's street legal. However, Jim did give me a fixed-bid price to finish it. If I can afford it, the bus will be done on April 1, 2015. Then it's off to the stereo shop (1 week) and the interior shop (2 weeks). That means I could be driving it in May! YIPPEEE!! Thanks Jim - you are an awesome human being.