Month: April 2014

Angular.js in XPages #1 – Using the right IDE for development

Marky Roden Angular in XPages, Angular.js, Webstorm, XPages

In this article we will look at Webstorm (a Javascript IDE) and discuss how that relates to the traditional XPages development environment.

Tools

Better Tools make better applications (or something like that). It’s true to an extent, you can’t help a poor developer make a great application but with better tools you can make a good developer more productive, which ultimately makes for a better application (probably). In the XPages development world the tooling we have is all based around Domino Designer in Eclipse (DDE). Eclipse as we all know is an open source tool which while originally designed for Java development has been extended to cover development of many programming languages. There are XML editors, JavaScript editors and many others. In the XPages world we are also “stuck” with quite an old version of Eclipse and are unable to take advantages of newer capabilities and plugins for modern eclipse development. DDE “works” but it is far from a fantastic experience, especially from a “web development” perspective. In these articles I will not be using DDE very much at all. We are going to look at Web Development using Domino Data, not doing web development using Domino.

I am no expert on Java development using DDE but from what I have picked up there are others who are doing their pure java development outside of DDE and then importing it into DDE to run in their applications. For power-developers stability and speed are just as critical as flexibility and practicality.

Web development environments

There are a number of tools currently en vogue for web developers. SublimeText is a very powerful text editor and Github have release a new “Atom” editor which is getting a lot of press right now as well. I am going to use JetBrains Webstorm for these articles. Webstorm is a great IDE and comes with a bonus of having Angular integration built in.

Webstorm

Webstorm is not a free tool – you have to buy a copy – but IMHO it is worth it. $50 for a personal license is about 1/2 hour of your productivity and it will pay for itself inside of a few days. There is a 30 day evaluation period which I encourage you to try 🙂

For a full list of examples check out the demo page – http://www.jetbrains.com/webstorm/documentation/ but here are some of the cool examples:

  • Angular integration into HTML ws2
  • Type ahead JS ws3
  • Type Ahead CSS ws1
  • Code formatting
  • Keyboard shortcuts (TOTALLY AWESOME) – https://www.youtube.com/watch?v=PNZJox8pkls
  • Debugging and live text editing using a Chrome extension

Why not use DDE and XPages?

Well first and foremost because an “XPages” is an XML document and because of that, DDE requires it to be written using correctly formed XML. HTML is not correctly formed XML and causes issues. Let me demonstrate: If I want to create the following HTML inside of DDE I get an error:

<div enter exit>

</div>

ws4 Seems simple enough but we really should use the right tool for the right job.

This is particularly important when we start to look at Angular directives which rely (when not using the HTML5 standards) on the single word attribute in the HTML element.

Secondly, as you will see from the examples in the upcoming articles I will be creating HTML pages not XSP pages. These can still reside inside of the database but are not “XPages”. I will not be using XPages “controls” and in fact not using Dojo either. So there is no benefit to using DDE at all in this case for my front end development. I will be using DDE to create REST services (maybe) and I would use DDE to create Java code to supply data to the user.

Finally –  Eclipse is a large tool and is frankly slower than me. It’s a frustrating when I constantly have to find something to do while a database waits to open, checks mail, Builds something, crashes in a corner quietly. I won’t miss using it.

Working locally

Even if we are not working with a Domino server, we still need to be able to review and test what we are working on.

In Webstorm you can preview your code as Webstorm generates it’s own local basic web server. The web server is configurable and as we will come to see it will help us in our Domino development environment as well.

ws10 ws11

 

Debugging

Webstorm has an internal debugger (similar to chrome dev tools and firebug) and you can debug the code with the JetBrains Chrome extension

ws1

One really nice feature about the debugger is that it allows Live editing, so you can edit and build you code and watch in real time as the code is updated on the screen. This is very cool when you are building out your HTML templates. I this case on a large monitor I have the IDE on the left and the browser on the right. You can see this technique in action on the http://egghead.io angular tutorials.

ws2

Starting to type into the debugger window you see the HTML updated on the right – Angular does not update the {{phone snippet}} because the template has to be redrawn. HTML on the other hand is redrawn immediately

ws3

Hitting F5 refresh in the browser reloads the template without having to save the HTML on the left

ws4

As we will come to see this will allow us to take data from Domino without worrying about CORS issues. For more on the debugger read here – http://www.jetbrains.com/webstorm/webhelp/using-jetbrains-chrome-extension.html

As we get more into the demonstrations we will look at getting data from the notes database and how that works practically on a localhost

In the next we will look at a basic overview of some Angular concepts – in the mean time check out the developer tutorials

Conclusion

Even in the short time I have been using Webstorm I have found it to be an exceptionally quick development environment compared to DDE. DDE certainly has its place but even if I am not using angular for future projects I am seriously going to consider doing as much of my development using Webstorm rather than DDE.

Tooling is a very personal thing for a developer, in this case when I am approaching the project from a Web Development perspective and creating web pages without the overhead of the JSF lifecycle, there really is no need to use DDE to build these examples. I am going to use XPages for data sourcing and CRUD.

*Disclaimer*

I do not want this to become a discussion of whether this approach or not this is right or wrong and I encourage everyone to consider their comments before posting. The point of this series is for education and mind broadening, driven by my own selfish desire to learn and broaden my mind.

  • Yes there are many great things I am giving up by not using DDE and XPages controls
  • But I am also going to gain a lot of things which XPages does not allow me to do easily or gracefully

*/Disclaimer*

 

PS

Just so you know Jetbrains also make a Java IDE which is used for android development – http://www.jetbrains.com/idea/ – another alternate to eclipse. Again it isn’t free, but may be worth checking out because free doesn’t mean the best (and visa versa).

 

 

Angular.js in XPages series

Marky Roden Angular in XPages, Angular.js, XPages

Introduction

Angular.js is an Open Source (MIT) JavaScript framework created and maintained by Google. It is designed to help web developers create quick and functional applications, while reducing the overhead of data binding and state management.

If you want to find out more about Angular then look at some of the myriad of great resources around the web.

Angular Developer Tutorial
New To Angular? Start Learning Here
https://www.ng-book.com/
Angular.js the awesome parts (Video)

Front end / Back end

Angular.js is all front-end, 100%, JavaScript based. But as in any useful application there needs to be a back end to provide and manipulate the data. In the XPages case this would be Java.

The ExtLib REST services and the Domino Data Services are written in Java and when we are talking about a world where there are no XPages controls Java is the right way to go. Even if you don’t need full CRUD REST, you need a data source and that’s Domino data serviced by Java. There is of course no reason why you can’t create and pump out data in SSJS, but there is also no compelling reason to do so either.

In the following article series I am going to demonstrate how many of the techniques we use in XPages have analogies in the Angular.js world.

I know there are a number of people already using these techniques with Domino acting primarily as a data stores: Mark Barton, Karsten Lehman, Richard Moy and others. Unfortunately there is very little discussion and/or resource information for the community. I and others are looking to help ease that.

A new Paradigm

What using Angular.js (or Backbone.js or Ember.js or other JS frameworks) really does is change the paradigm of “Domino” development to be potentially much more in line with modern Rails, MEAN stack, and dare I say BlueMix development.

In time I hope to be able to discuss *how* Angular or *why* Angular but before then I just want to learn more about it, demonstrate the possibilities and broaden the discussion.

More to come soon 🙂

 

Adding custom HTTP headers to Domino R9 using IBM HTTP Server (IHS)

Marky Roden IBM HTTP Server (IHS), XPages

IBM HTTP Server (IHS) was added to R9 so that we could have TLS support for HTTPS encryption. For more on how to do that see Russ Maher’s post(s) on the subject.

Under the covers IHS is really a modified version of Apache Web server and comes with some of the Apache options. It gives us the ability to add custom headers to all pages served up by the server.

You can turn IHS on by adding the following to your notes.ini – this does require a full reboot

HTTPIHSEnabled=1

When the server loads you will now see this on the console

ihs1

 

httpd.conf

httpd.conf is a configuration file which is used by the Apache HTTP Server. It stores information on various functions of the server, which can be edited by removing or adding a number sign “#” at the beginning of the line, thus setting values for each directive.

In the picture above you can see that on the Domino server there is actually a “domino.conf” file.

Adding Headers

You can add headers to the whatever.conf file in the following manner

<IfModule mod_headers.c>
Header set MarkyRoden "Was_Here"
</IfModule>

Result

Adding this to the server and restarting gives us the following

ihs2

 Conclusion

Adding custom HTTP Headers can be done a number of ways in Domino, this is a new one to me. I expect there are other things that we can do with IHS, just need to delve into them.

 

An open letter to Mr. NotesIn9

Marky Roden Just Marky

Dear Mr Leedy,

I regret to inform you that your blatant use of child labor has offended my child labor union. They do not feel like you have represented me in the correct light.

I trust that you will find this short response in the same light as your original offense.

yours faithfully,

Your very good friend Marky Roden

 

CC: everyone who has seen this video

http://notesin9.com/index.php/2014/03/31/notesin9-141-java-vs-javascript-throwdown/