191 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Azure Machine Learning Studio Office Add-In
Wed, Jan 18th 2017 231
Predictive Analysis and Machine Learning
Tue, Jan 10th 2017 25
19 Jan – Speaking at Northwest Chicago JavaScript meetup – Office.js
Wed, Jan 4th 2017 4
Building Office Add-ins using Office.js – the book, the website
Thu, Dec 15th 2016 7
Sharing data between Office Add-Ins using localStorage
Mon, Nov 21st 2016 7
Using “F12” in Windows to get an Office Add-In development developer console
Mon, Nov 14th 2016 3
Thank you – Microsoft MVP Summit !!!
Thu, Nov 10th 2016 5
Top 10
Azure Machine Learning Studio Office Add-In
Wed, Jan 18th 2017 231
Predictive Analysis and Machine Learning
Tue, Jan 10th 2017 25
Adding your Let’s Encrypt SSL certificate into your Domino keyring file
Thu, Feb 18th 2016 11
Creating an XPages Websockets chat client using Bluemix
Sun, Nov 9th 2014 8
Angular.js in XPages series
Wed, Apr 23rd 2014 7
Sharing data between Office Add-Ins using localStorage
Mon, Nov 21st 2016 7
Building Office Add-ins using Office.js – the book, the website
Thu, Dec 15th 2016 7
Create your own Watson Q and A example with Bluemix, Webstorm and Jazz Hub
Sun, Oct 12th 2014 5
Your customers to be: TEENS REACT TO WINDOWS 95
Wed, Mar 9th 2016 5
PSC and LDC Via – The technical reasons for our strategic partnership
Tue, Aug 23rd 2016 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
2 hits



Recent Blog Posts
231
Azure Machine Learning Studio Office Add-In
Wed, Jan 18th 2017 12:45a   Mark Roden
I am currently in the process of learning more about Azure Machine Learning Studio . Within there you can create and train predictive models. As I am going through some of the examples I came across a great example of an Office Add-In. I am creating a simple weather predicting example based on data I downloaded from … Continue reading Azure Machine Learning Studio Office Add-In
25
Predictive Analysis and Machine Learning
Tue, Jan 10th 2017 1:42a   Mark Roden
A
4
19 Jan – Speaking at Northwest Chicago JavaScript meetup – Office.js
Wed, Jan 4th 2017 2:20p   Mark Roden
A
7
Building Office Add-ins using Office.js – the book, the website
Thu, Dec 15th 2016 2:30a   Mark Roden
I wanted to show some love for the new website and book by Michael Zlatkovsky. Michael is a Software Developer and Program Manager in the Microsoft Office Extensibility team. I met Michael at the MS MVP Summit back in October and we had a great conversation or two about Office Addins and their future development. So Michael’s … Continue reading Building Office Add-ins using Office.js – the book, the website
7
Sharing data between Office Add-Ins using localStorage
Mon, Nov 21st 2016 2:42a   Mark Roden
In this article I will show how the underlying dependence on the browser (in this case IE11 in Windows) allows us to pass data between Office Add-Ins through the use of HTML5 localStorage. At this point this is a theoretical post as I haven’t thought of a good use case yet, I am sure I … Continue reading Sharing data between Office Add-Ins using localStorage
3
Using “F12” in Windows to get an Office Add-In development developer console
Mon, Nov 14th 2016 1:00a   Mark Roden
A
5
Thank you – Microsoft MVP Summit !!!
Thu, Nov 10th 2016 6:55a   Mark Roden
A
2
SharePoint now accessible via the Microsoft Graph beta
Mon, Oct 3rd 2016 8:00p   Mark Roden
A
3
Microsoft MVP for Office Development
Mon, Oct 3rd 2016 8:34a   Mark Roden
This weekend I was thrilled to receive an email from Microsoft announcing that I had been recognized as a Microsoft Most Valuable Professional (MVP) in the Office Development technical community. This is a very natural evolution of my journey over the last two years since I branded out from nearly 20 years in IBM Domino. As I … Continue reading Microsoft MVP for Office Development
2
Speaking at Dreamforce next week :)
Wed, Sep 28th 2016 8:16a   Mark Roden
A




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