199 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Office Add-Ins: Working with Tables in Word. Part 1: Creation
Tue, May 30th 2017 5
Interesting new release – Istio service mesh microservices management
Wed, May 24th 2017 2
Office Add-Ins – JavaScript control over the Content Control lock in a Word document
Thu, Mar 30th 2017 1
Calling an external service from your chat bot
Mon, Mar 20th 2017 2
NWCJS Meetup: Creating Bots with JavaScript and the Microsoft Bot Framework
Tue, Mar 14th 2017 2
Setting up the sample Azure bot to work locally with the bot emulator
Mon, Mar 13th 2017 4
Adding your bot code to VSTS for source control and configuring continuous integration
Mon, Mar 6th 2017 3
Top 10
Integrating the Bluemix Watson Translation service into an XPages application
Sun, Oct 19th 2014 8
Using Let’s Encrypt to create an SSL certificate for my Bluemix hosted web site
Tue, Feb 9th 2016 8
Sorting an unsorted XPages document collection based on a date field
Tue, Feb 25th 2014 7
Create your own Watson Q and A example with Bluemix, Webstorm and Jazz Hub
Sun, Oct 12th 2014 7
Creating an XPages Websockets chat client using Bluemix
Sun, Nov 9th 2014 7
Adding your Let’s Encrypt SSL certificate into your Domino keyring file
Thu, Feb 18th 2016 7
Using jQuery to remove Dojo CSS from an XPage
Thu, Feb 20th 2014 6
jQuery in XPages #20 – NProgress – YouTube-like slim progress bar
Wed, Mar 12th 2014 6
Accessing the original element when using Select2-focus
Sun, Aug 17th 2014 6
How to ad icons to individual items in a Select2 multi-value field
Tue, Mar 18th 2014 5


Angular.js in XPages #1 – Using the right IDE for development
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
mark roden    

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).

 

 




---------------------
http://xomino.com/2014/04/27/angular-js-in-xpages-1-using-the-right-ide-for-development/
Apr 27, 2014
4 hits



Recent Blog Posts
5
Office Add-Ins: Working with Tables in Word. Part 1: Creation
Tue, May 30th 2017 6:18p   Mark Roden
A
2
Interesting new release – Istio service mesh microservices management
Wed, May 24th 2017 3:37p   Mark Roden
A
1
Office Add-Ins – JavaScript control over the Content Control lock in a Word document
Thu, Mar 30th 2017 1:30a   Mark Roden
A
2
Calling an external service from your chat bot
Mon, Mar 20th 2017 1:49a   Mark Roden
In this article I will show to how integrate simple commands (intents) into your bot to then integrate with an external service. Introduction In previous articles we have looked at how to create a sample Azure bot and in this article we will be looking into how “intents” work. The microsoft documentation on dialogIntents can be found here (for the … Continue reading Calling an external service from your chat bot
2
NWCJS Meetup: Creating Bots with JavaScript and the Microsoft Bot Framework
Tue, Mar 14th 2017 2:33a   Mark Roden
Next week’s Northwest Chicago JavaScript meetup (23 March @PSCGroup) features our own Adam Lepley speaking about some of the work he has been doing on the Microsoft Bot Framework. https://www.meetup.com/Northwest-Chicago-JavaScript/events/236993059/ “Bots, they are invading our chat apps, now it’s time to learn to develop your own. Come learn how Microsoft’s Bot Framework enables you to leverage … Continue reading NWCJS Meetup: Creating Bots with JavaScript and the Microsoft Bot&#
4
Setting up the sample Azure bot to work locally with the bot emulator
Mon, Mar 13th 2017 2:27a   Mark Roden
In this article I will demonstrate how to configure your local development environment to work with the environmental variables set up within your Azure environment in the sample bot previously discussed, Introduction  In the previous article we looked at how to create a sample azure bot and then how to configure it in VSTS for continuous integration. If you … Continue reading Setting up the sample Azure bot to work locally with the bot emulator
3
Adding your bot code to VSTS for source control and configuring continuous integration
Mon, Mar 6th 2017 3:00a   Mark Roden
A
3
Adding your Azure bot framework bot into Skype
Tue, Feb 28th 2017 2:30a   Mark Roden
A
4
How to create a sample nodejs bot which utilizes Azure Functions in 15 minutes
Thu, Feb 23rd 2017 2:30a   Mark Roden
In this article I will demonstrate how to create a nodejs bot hosted in Azure. The bot will be created from a sample provided from Microsoft. The example bot will use Azure Functions as the trigger for it’s communication. You will need a Microsoft Azure account to be able to follow this process for yourself. This is … Continue reading How to create a sample nodejs bot which utilizes Azure Functions in 15 minutes
5
NWCJS meetup – Angular 2 for beginners
Fri, Feb 10th 2017 1:24a   Mark Roden
A




Created and Maintained by Yancy Lent - About - Planet Lotus Blog - Advertising - Mobile Edition