Category: Geek Table

jHipster, My New Super-Friend

I mess with a lot of things. Well, a lot of programming languages, libraries, apps, etc. Basically, if it something to do with computer, I will try to or eventually try to play with it. Since I don’t have a lot of time, with a day job and trying to fool around with some may things, I do have to pick my battles. Sometimes, I am lucky, and other times not.

Recently, I landed on JHipster. It is a tool, specifically an opinionated stack of applications for creating Single-Page-Applications (SPA) web applications using AngularJS for the client-side and Spring boot (and friends) for the backend.

Nothing in the stack is really new to me. The entire things is bundled up in a nice Yeoman generator called ‘jhipster’. And it uses Node, NPM, Gulp on Node, and of course AngualrJS and Spring to name a few. All of these I have used in my own pet projects and even launch an AngularJS take over at my last job. We had a web app to re-write and there was noway I was going to do it again without some kind of framework. I like AngularJS personally, and people are free to disagree or bicker about the choice. But we need something to help organize the code.

Anyway, back to my new friend. Well, a new friend with all the familiar attributes and characteristics I liked in some other friends. I should really call this jHipster my super-friend.

jHipster take a lot of the tedium you would have to do in any decent modern web app with a db (either SQL or NoSQL) backend, security, monitoring, etc. Really, when you want to write an app, you have your billion dollar idea. You can either spend time doing what you have done before or everyone else have done, the drudge work. Or you can pick up jHipster or something like it, and get to solving your problem.

Now, jHipster is no silver bullet. You will still have to spend some time to learn it. Fortunately, if you read the documentation on their website, you should be through it in about an hour or two and be good to go. Again, depending on your level of familiarity with some of the other technologies in the stack. The you know about the other pieces in the stack, the easier it is to put the jHipster image together.

I have played with many such app stack, like MeteorJS, Deployd, Hapi, Express, and MEAN. I might even have forgotten a stack or two there too. Either way, they all have their strengths and weaknesses.  jHipster is fairly new to the scene, so it is benefiting from fresh smell and fixing a few pain points with some of the earlier ones. But I am sure it is not the last or will it fix everything. The trajectory so far however, is looking really good. It really just what you would have done had you had to write a decent web app using AngularJS and Spring technologies.

Point Not Across

I mentioned recently how a friend proposed that we do some data import by scraping a website. I tried to explain, that that was very difficult, time consuming, and error prone. Well, I didn’t do such a good job of getting the point across. So let me try here, not, again. Hopefully, this should be understandable by both techies and non-techies.

The best way I informed, was to be able to import the data directly from one computer storage to another. For people in computer technology, they would understand this as computer interchange or exchange format. It is best, if data will be produce by one computer for the consumption by another computer, that the data be in a binary or otherwise encoded form. There really isn’t any reason to move data from one computer to another in a human readable format. UNLESS we want to ensure that at some future date, we can still use it.

So writing a program to scrape data off a website. Sure, that is doable, but what would be a lot easier is to just have the data exported. Even if we go for some intermediate format like CSV, JSON, or XML.

As an example, here are three ways of passing the same information between computer:

Example 1: HTML

<html>

<head>

</head>

<body>

<div>

<person>

<name><b>John Smith</b></name>

<age><i>33</i></age>

<ssn><i>011-11-1234</i></ssn>

<dob><i>1982-03-04</i></dob>

</person>

</div>

</body>

</html>

All we really wanted to send was John’s information. Notice all the extra stuff like how it presented, name bolded and the other bit italicized. Yet, quite a bit was stripped out that would usually be there. So if you had to get this data from one computer to the other, why put in all that extra?

Now here is example two, slightly better, using JSON and CSV

Example 2: CSV

name,age,ssn,dob

John Smith,33,011-11-1234,1982-03-04

Example 2: JSON

{“name”:”John Smith”, “age”:33, “ssn”:”011-11-1234″, “dob”:”1982-03-04″}

NOTE: Even if JSON was spread out over several lines, it is still more compact than HMTL.

Finally, here is the same data, encoded in “some” binary form. I won’t go into the details of it. But let’s assume that both sending and receiving computers knew they were exchanging data about a person. Example 3: Binary

 

0a4a6f686e20536d69746801210b3031312d31312d313233340a313938322d30332d3034

It is basically [length:data] repeated. So for example, the number 33 takes up 1 type and is ’21’ in hexadecimal. So you see 0121 some where that run of characters. The name “John Smith”, is 10 chars long, and turning each char into a byte and then their hex value, you ‘0a’ followed by the ‘4a6f686e20536d697468’.

This is certainly harder for a human to read. But it wasn’t meant for a human, not yet anyway. We wanted the most efficient way of passing some data between computers to be processed by computers. And since the binary form only have [length:data] repeated, without the ‘:’ by the way. We only send what we need and save a ton of space and time. Not to mention less opportunity for error in try to parse the data on the other end.

And that is why it is so clear to me that we should be doing things either using Example 2 or 3, but not 1.

More Scripting

Recently, I tried to write a script to parse the output of the log file created by Cloudera Manager. Unfortunately, I had to abandon the script after a week and and quite a number of hours invested. Parsing text is hard. It is not that CM created bad log entries or anything like that. It is just what you might expect in a log, might now be there to make the decisions you want. That was the case for me, the answer I wanted couldn’t be derived easily from the logs.

Fast forward a few days later. My buddy calls me and ask me about scraping website for product info. My first question was, “is this the only option”. If we can engage with the website owner, we can get them to give us access to the products and related tables. Especially, since the project was contracted by the owner of the website.

He said consider, that this is our only option. That getting access to the actual data would mean talking to different teams, and the teams haven’t been responsive so far. I laid out for him, the details of why getting data from the primary source is preferable than trying to parse web pages.

When people look at a web page, they see structure and something that is easy to digest. But they are not seeing what the code looks like. A web page is coded so a browser can render it for the consumption by human, not by machine or another programming language. When developers want data to be consumed by machine or another programming language, it is much more efficient to use binary or some other format. Even if you want it to be human ready. Even JSON, XML, or CSV is not meant to be the presentation format for humans, it just means that it is more open.

What he was asking, wasn’t about even some text interchange format like JSON/XML, etc. but parsing a number of pages for product details. That would be such a nightmare of a project. So here to hoping that we really don’t have to do that.

AngularJS – Up and Running In Minutes

So I have written about Single-Page-Applications (SPA) frameworks like Ember before.  I have even mentioned that there were others like Backbone and AngularJS.  Recently, I have been doing more and more AngularJS, and I have to say, I love it. I know, I said that too about Ember too.  🙂 Color me silly.

But what I thought was so easy with Ember, that remains true, is even easier in AngularJS.

Take for example, the dependencies you need for Backbone or Ember, there is none, absolutely none for AngularJS.

And there is more, quite more.  With AngularJS, you get 2-way binding automatically can easily defined your won directives (elements, attributes, classes, and comments).  None of the other SPA frameworks offers 2-way binding or directives like AngularJS.  To see how useful those things are and why they are so awesome, I will show two every simple examples.

One key concept in AngularJS is a “directive”.  A directive is what you use in your HTML just like you would an element, attribute, class, or comment.  One of the easiest to use ‘directive’ that comes with angular is the ‘ng-model’ directive.  This directive is used to create 2-way bindings, so let’s see how it is used.

<input type=”text” ng-model=”myVar” />

<h1>{{ myVar }} </h1>

That is it, you now have an input textbox, into which anything you type will show up between h1 tags.  How easy was that?  Why is this 2-way binding? If you change ‘myVar’ anywhere in code, then the UI will also update in as many places as you are using ‘myVar’.  Similarly, if the UI change, that is the input textbox, the ‘myVar’ is updated.  So your UI and model is always in sync automatically by AngularJS.

He is a full example you can put in a text editor and load up in your browser:

<html ng-app="">
  <body>
    <input type="text" ng-model="myVar" />
    <h1>{{ myVar }}</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" />
  </body>
</html>

If this is exciting to you, then come back soon for my next post on creating your own directives.  You will see just how easy it is and may be start to see why AngularJS is different from the rest.

Ember JS – Round Two – Adding A Route

In the last post Ember JS – Single Web Application, we jumped right in. We downloaded Ember JS and fired up our own modified version of the application.  So let’s go a bit deeper.

Ember JS take a lot, a whole lot, from Ruby on Rails and other Convention Over Configuration (CoC) Web Application frameworks.  It is important to note just how important CoC is.  For one thing, you code faster and less, because you dont’ have to think about configuration and since you use a convention over and over, you don’t even have to think about what to name certain things.  All of that, mean you save time, and can be more productive.

In the last post on Ember JS, we saw one of the most minimalist application.  We have a .js file (app.js) which created our Ember JS application and added a Route (more on route later). That file looked like this:

App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return [‘red’, ‘yellow’, ‘blue’];
}
});

The function ‘model’ in the IndexRoute is there from the original Ember Starter Kit code.  We didn’t change that.

Then we had our .html file which included the app.js file and several other js files before it.  Those other js files are a constant in your Ember JS application, because they are the dependencies (jQuery and Handlebars) and Ember JS itself.  This was all we had in the HTML file, index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Ember Starter Kit</title>
<link rel=”stylesheet” href=”css/normalize.css”>
<link rel=”stylesheet” href=”css/style.css”>
</head>
<body>

<script type=”text/x-handlebars”>
<p>{{input type=”text” value=name}}</p>
This is my name: {{name}}
</script>

<script src=”js/libs/jquery-1.9.1.js”></script>
<script src=”js/libs/handlebars-1.0.0-rc.3.js”></script>
<script src=”js/libs/ember-1.0.0-rc.3.js”></script>
<script src=”js/app.js”></script>
</body>
</html>

 

 

 

Zookeeper – Distributed Configuration and State Container

I don’t know if the title correctly captures all that Zookeeper is.  But, I think it is close.  Zookeeper is not a Message Queue or Message Broker like Apache ActiveMQ, RabbitMQ), Mule, Active Camel, etc.  Actually, there is quite a long list there, ZeroMQ could be added to the list too.

But but Zookeeper is something that fits a nice itch one might have when writing distributed applications and wanting to share information amongst them.  Surely, a MQ can be used, but what if the data is just configuration or changes to values?  A message queue seems a bit heavy.  And that is exactly why Zookeeper limits the size of messages.

I like the idea of Zookeeper for apps that have to present life data or share state changes.  For example, you have several distributed applications and you want them to know what the other is doing.  Or you want them to synchronized on some work, Zookeeper makes this very easy.  I don’t know a lot about it yet, but I am getting into it now for my current task.

I will be looking Spring XD and Spring Reactor projects too, so look forward to even posts soon won my adventures in these new technologies.  Hopefully I will get my hands on Hadoop too.

WaveMaker – A Really Productive Way To Create Java Web Apps

I first started creating Web applications using JSP/JSF pages and Servlets.  I really followed the J2EE standard on creating Web apps.  Then I thought that was too cumbersome and started looking for alternatives.

I landed on Apache Struts 2, Apache Wicket Framework, Symfony, PHP Zen, and quite a bit more. Even tried Ruby on Rails for a little bit.  Eventually, I was back at the J2EE way of doing things, except using Grails.

With Grails,  things were so much easier than having to deal with all the issues you have when creating a web application.  There is the routing, services, db integration, and just wiring up the whole thing.  That is not what you are trying to solve. So Grails made all of that go away nicely, while staying with Java.  So no need to learn another language.

a UI library called Zk and Grails to back it up.  It was fairly easy to construct a UI in Zk.  Even though it was xml and mostly by hand. But I manage to force my friends to use it and we created an application for a client.  I think using Grails too was a stretch for them, as they didn’t have the background in Spring.

I kind of regret using that so extensively, when there were other things that might have worked just as well with less pain.

I enjoyed the Grails way of things without Zk and did my own thing, while my friends pursued using Jdev extensively.  For them, having been burned with Zk and a lot of hand coding of forms and configuration, they wanted a WYSIWYG type of development.

I have tried Jdev, I really have.  It is a steep learning curve and I still don’t seem to get it.  So when I got really busy with my new job, well. It was just impossible to continue on that road.

At worked, we do things the ‘harder’ way some might say. We have embraced using the Spring framework and JSF 2 via PrimeFaces UI JSF library.  A few teams have taken an exception to this, and started doing things using NodeJS and Single-Web-App.

I really enjoyed using Spring a long time ago, but just couldn’t convinced my buddied to embrace it when we did apps.  So now, I am back in Spring land at work and at home, as I jump head first into WaveMaker.  I already see that WaveMaker today, does not solve all my problems, and there is one frustrating thing, using external JAR libraries.  To use an external jar, you have to write a Java class, which both exposes methods to WM and delegates to the JAR library.  This is just too much extra work.  WM should find some way to generating delegating calls for straight calls.  But that is basically my only complaint at the moment.

Cool Tech – LightTable

Every now and then, it seems that new and interesting technologies just come out of nowhere. A buddy of mind sent me a link today and simply said, something like “check that out”.  I didn’t know what it was and he didn’t say much.

When I had some time to look at it, which I just did like 20 minutes back, I was really really excited.  You see, I have been trying to cultivate some interest in programming in the young family members, cousins, nephews, nieces, and even my youngest sister.  One of the problems you have, when you start thinking or even embark on teaching someone to program, are the following: which language would be easiest while being fun and eventually usable (you don’t want to tell someone they are learning to program, but can’t create even simple interesting app), and how quickly you can go from coding to seeing results.  There are other issues too, like how good is the development tool and the help system.

Fortunately, HTML and JavaScript fit the bill almost perfectly. They are not the greatest languages, but they are easy to learn, you can use tools and utils already on your computer (without the need to download anything else), and you do get to see impressive result.  I always get oh and ah when I show people who have never programmed, just how easy it is to write some text and have the looks of it modified with just a few simple tags.

So when I went to check out LightTable, and just read a bit about it, I was immediately interested.  Then I watched the first YouTube video.  Then I realized that this is something that I can use to teach young people and people new to programming how to program in JavaScript. They get instance feedback in the Web browser tab.

So here is to LightTable and I hope they keep developing it. There have been so many good things coming my way in the last few weeks.  Not too long ago, it was Ember JS and Handlebars.  Before that was Backbone (which lead me to Ember JS).  I found out about the Foundation CSS library while researching even more Ember JS.  And while cool, but not web centric, I have been learning quite a bit about OpenStack cloud platform.  It is a great day to live very long.

.v

Updated: May 01, 2013 @ 5:04 AM PT

Forgot to add few other things to the list. Not necessarily in the correct reverse order, but pretty close.  So there was Sublime Text 2, Notation Velocity, and TreeJS (JavaScript 3D library), and a slew of new features in Spring 3.2.0 that made your life in Spring that much more fun and easier. I really like the JavaConfig stuff and Spring Data (repository), which adds Grails like dynamic finders.  Hopefully I am not forgetting anything else.