203 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Develop a Domino applications using any modern tools
Sun, Nov 12th 2017 82
Modern Notes like UI using ReactJS
Thu, Nov 9th 2017 28
Universal Data Replication
Wed, Oct 18th 2017 11
The power of Domain Specific Languages
Thu, Jun 15th 2017 3
Darwino as the IBM Domino reporting graal
Sat, Mar 11th 2017 4
Schemaless GraphQL
Fri, Mar 3rd 2017 5
Get your apps integrated with IBM Connections, cloud and on-premises!
Fri, Feb 17th 2017 4
Top 10
Develop a Domino applications using any modern tools
Sun, Nov 12th 2017 82
Modern Notes like UI using ReactJS
Thu, Nov 9th 2017 28
ReactJS or AngularJS? What about something else?
Wed, Jan 25th 2017 12
When your Domino app meet the cloud, IBM Connections or Microsoft Azure!
Thu, Sep 22nd 2016 11
Universal Data Replication
Wed, Oct 18th 2017 11
Why AngularJS sounds familiar to XPages developers...
Tue, Jan 3rd 2017 6
When SQL meets NoSQL, you get the best of both worlds!
Thu, Jan 26th 2017 6
Running Android apps for development purposes
Thu, Aug 21st 2014 5
Schemaless GraphQL
Fri, Mar 3rd 2017 5
Connecting to the IBM social platform from a Domino Agent
Thu, Aug 14th 2014 4


Modern Notes like UI using ReactJS
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
   

The world is evolving fast, and so technologies are. Today, for now a little while, when we talk about building a new web UI or a mobile hybrid one, we think about using pure client technologies without markup generation on the server side. JSF, JSP, ASP.NET are being replaced by Angular, ReactJS, VueJS and services...  I personally think this is a great evolution. But, are these technologies easy enough to use? Can a developer be as productive as he/she is with XPages, for example? Well, the quick answer is no, at least without any addition to these core libraries, in term of components and tooling.

This is the problem we are currently tackling with Darwino: let's make it easy to consume these new JavaScript technologies without compromising their power. For these, Darwino 2.0 is featuring a brand new ReactJS component libraries as well as some new templates (or boilerplates, or pods, ...) that make the creation of a project easy.

The components should give you all the necessary UI constructs to create a form based application. Of course, all of this is responsive to adapt to mobile devices. In short, everything you need to build Notes/Domino like applications in minutes, but with pure standard ReactJS.
Curious? Have a look a running instance here http://playground.darwino.com:8080/contacts-react (use demo/demo to log in)

The applications should also be data source agnostic, in a sense that the same application should,  almost seamlessly, connect the Darwino JSON store, or to Notes/Domino backend, or even other DB like LiveGrid data store. With this architecture in mind, these applications can work online, connecting to any server data, but also offline, connecting to the locally Darwino replicated data in your mobile device.

There are different steps in this journey. Let's go through them.

Choosing the JS library/framework

There is nothing wrong picking up one of the major library currently available. In a previous post, I explained why we choose VueJS for ProjExec and how our developers quickly became productive using this library. It was great with this goal in mind.
Darwino has different goals. As a development tool, it should target the broader set of use cases. This implies using a library with a bigger eco-systems, a large set of third party additions, several rendering libraries (bootstrap, material design...). For these reasons, we choose ReactJS, as it is adopted by the many vendors like IBM or Microsoft. The later is interesting, as we can quickly create apps with the Office look & feel, thanks to the Office UI Fabric

ReactJS it is.

Choosing the right ReactJS components

ReactJS by itself is low-level: let's consider it as a powerful, core engine that can be extended through components. For example, ReactJS has *no* built-in data binding capabilities like the one you'll find in Angular or VueJS. You should either implement them yourself, or use a third party library.
To get a decent set of capabilities without reinventing the wheel, you have to pick-up libraries from one of the large JavaScript repositories. Nowadays, I would advise you to use npm (or eventually yarn) and leave tools like Bower to the historian.
Gasp, this is where the troubles come in: the npm repository features a plethora of libraries designed for the same job. How would you pickup one over the others? Number of downloads? Stars on Github? Recent activity? Return on experience from other developers? Making the right choices takes time as there is no obvious ones.

For Darwino, we choose the following:
  • react-redux
  • react-router
  • redux-form
  • react-intl
  • react-data-grid
  • react-bootstrap (or eqv for other UI targets)
  • ... and a few others

Project boilerplates

If, for you, building an app if about saving a design element in an NSF, then your life is good. The JavaScript world is way more complex! Even if JavaScript is an interpreted language, you'll quickly feel the need of running build tools to use the latest JS specifications, consume libraries, produce an optimized/compressed version of the code... Again, you 'll have to make some choices between Grunt, Gulp, Webpack, Browserify, ... and many other tools. This is another time consuming research.
Once your choice is made, you have to configure the tools, generally using a JavaScript based DSL (e.g. a JavaScript piece of code driving the tool). This is fairly complex as the DSLs feature many options. To get started, developers created templates, also called boilerplates. They contains the configuration files with default behaviors that you then have to customize. But again you have many available, with some clearly developed by people without a deep knowledge of the technology. Furthermore, they are generally tailored for a particular version of the tool and will not function properly with yours...
Ok, we spent many days of try/fail/redo and we are coming with our own template. Well, it is even easier: go to the Darwino studio, create a new project, select the target technology and voila, you're ready to go. Pfuuuu...

Component library

As we'd like to make the developer experience as smooth as possible, we are providing a series of ready to use components covering most of the developer needs. What started as a demo library became a very useful set of components, covering:

  • Forms with document access (load, save, validation)
  • Data binding controls, including read-only mode, multiple values, pickers, rich text, attachments upload & download
  • Computed fields (yes, not that obvious with ReactJS!)
  • Data grid with Notes view like behaviors: categorization, totals, response doc
  • Navigators, action bars, sub-forms
  • Dialogs, messages
  • Easy access to server side business logic using micro services

And more... But again, these components are just regular ReactJS components, that any ReactJS developer would consume without fear. They do not carry any idiosyncrasies from the original Notes ones. They exist to create Notes like UI for Web and Mobile, not to replicate 1-1 what the Notes UI does.

Ah, I foresee a question: can you automatically convert an existing Notes UI to this technology? The answer is... yes! Feel interested?



---------------------
http://blog.riand.com/2017/11/modern-notes-like-ui-using-reactjs.html
Nov 09, 2017
29 hits



Recent Blog Posts
82
Develop a Domino applications using any modern tools
Sun, Nov 12th 2017 9:00p   Philippe Riand
In my previous post, I talked about a ReactJS library of components that can be used to create Notes like UI. It allows developers to create modern web and mobile UIs in a flash. Fine but, if Domino Designer is a great tool for rapidly developing applications, it is unfortunately not designed to create such modern applications, mostly because: It does not integrate with the modern tool chain required by these libraries, like maven, npm, babel, webpack...It has a very limited JavaScript editor
29
Modern Notes like UI using ReactJS
Thu, Nov 9th 2017 6:21p   Philippe Riand
The world is evolving fast, and so technologies are. Today, for now a little while, when we talk about building a new web UI or a mobile hybrid one, we think about using pure client technologies without markup generation on the server side. JSF, JSP, ASP.NET are being replaced by Angular, ReactJS, VueJS and services... I personally think this is a great evolution. But, are these technologies easy enough to use? Can a developer be as productive as he/she is with XPages, for example? Well, the qu
11
Universal Data Replication
Wed, Oct 18th 2017 7:21p   Philippe Riand
One of the Darwino piece of code that I'm the most proud of is the replication engine. If a majority of our customers see it as a Domino to JSON replication engine, it goes far beyond that. In reality, it can replicate between virtually any data sources. It is a true, two ways, multi-point replication engine, borrowing some ideas from IBM Domino but going beyond its venerable ancestor in multiple places. The architectureThe main idea is that any data set can be represented as a set decorated J
3
The power of Domain Specific Languages
Thu, Jun 15th 2017 11:03p   Philippe Riand
We are all used to configuration files, whenever they are XML, JSON or simply text based. If this is ok for simple configurations, but it falls short when the complexity increases. The biggest issue is that they cannot provide more than what they are designed for, basically static values. Let's suppose, for example, that we have an XML configuration file exposing a property like: trueOk, simple enough. This property can be true or false. But now what if I want a more dynamic value, like true
4
Darwino as the IBM Domino reporting graal
Sat, Mar 11th 2017 8:31p   Philippe Riand
Reports, dashboards, data analytics... have been the conundrum of IBM Notes/Domino since the beginning. Its proprietary data structure, the absence of standard APIs and its deficient query capability make it very difficult. This has been ranked as one of the top need for any for business applications. I know several business partners who created great Domino solutions but struggling with poor reporting capabilities. Of course some attempts were made to fix it: LEI, DB2NSF,.. all incomplete and
5
Schemaless GraphQL
Fri, Mar 3rd 2017 11:56p   Philippe Riand
FaceBook officially introduced a few months ago a new technology called GraphQL. Well, rather than really being new, FaceBook made public and open source their internal graph query engine. It starts to be widely used for exposing APIs. For example, IBM Watson Worskpace makes use of it. I also heard that IBM Connections will also use it. In a nutshell, it allows powerful, tailored queries including navigation between the data sources, in a single query. As a result, it minimizes the number of re
4
Get your apps integrated with IBM Connections, cloud and on-premises!
Fri, Feb 17th 2017 4:51a   Philippe Riand
I've been using this blog to share some of the techniques we use in ProjExec to get tightly integrated with the Connections platform. I got a lot of feedback from developers who wanted to know more, so I'm moving a step further: Jesse Gallagher and I will describe these techniques in a breakout session @Connect 2017! DEV-1430 : IBM Connections Integration: Exploring the Long List of Options Program : Development, Design and Tools Topic : Enterprise collaboration Session Type : Breakout Sessio
6
When SQL meets NoSQL, you get the best of both worlds!
Thu, Jan 26th 2017 11:46p   Philippe Riand
At the heart of Darwino is an advanced, portable JSON document store, implemented on top of any relational database. I'm often being asked the following question "why did you implement that on top of an RDBMS?". Behind the scene, the real question is: "why are you not using MongoDB or another nosql database?" Well, I'm generally answering it with multiple arguments:It leverages all the RDBMS well known capabilities: transactions, data integrity, security, backups, performance, reporting, a
12
ReactJS or AngularJS? What about something else?
Wed, Jan 25th 2017 9:25p   Philippe Riand
So far, ProjExec has been a really good citizen in the IBM/ICS world as we tried to reuse the core Connections stack as much as can (Dojo, OneUI, ...). But these technologies start to age while the browser technologies evolved a lot in the past years: what required a whole bunch of JavaScript using Dojo/JQuery can now be squeezed in a few lines using new libraries! It is time to change gears. We started to look at what technology would better fit our needs. The main requirements are: Make the d
6
Why AngularJS sounds familiar to XPages developers...
Tue, Jan 3rd 2017 5:53p   Philippe Riand
When I started to look at AngularJS a few years ago, I surprisingly found myself quickly comfortable with this technology. One of the reason is that many of its concepts are shared with XPages. Of course, there are fundamental differences, the most obvious being AngularJS a pure client technology while XPages, based on JSF, is a server side one. But still, they share a lot! If you know XPages, your experience understanding AngularJS should be similar to mine. I'm basing my experience on Angul




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