197 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
Latest 7 Posts
Thoughts on TypeScript
Wed, Sep 6th 2017 11
Replacing Lotus is…. complex
Fri, Sep 1st 2017 5
Web Component Thoughts….
Fri, Aug 25th 2017 4
Just…. NO,NO,NO
Fri, Aug 11th 2017 3
Goodbye Evernote
Tue, Jan 17th 2017 7
Merry Christmas!
Sun, Dec 25th 2016 4
Visual Studio Code Editor
Fri, Nov 11th 2016 5
Top 10
Thoughts on TypeScript
Wed, Sep 6th 2017 11
XMage, your XPrentice will surely miss you
Mon, May 12th 2014 10
Work with Rich Text from DDS
Fri, Oct 21st 2016 10
Re-usability is the Goal!
Tue, Jun 14th 2016 9
Polymer app-layout Elements
Fri, Jul 1st 2016 9
Domino svg support
Fri, Aug 12th 2016 8
A Polymer Avatar component
Wed, Oct 12th 2016 8
Setting up a Polymer development environment
Fri, Jul 29th 2016 7
Goodbye Evernote
Tue, Jan 17th 2017 7
On SocialBizUg - Web Worker Basics
Sun, Apr 13th 2014 6

1.5 Years with Polymer Web Components
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
Keith Strickland    

For about the last 6 to 8 months I’ve been doing a lot of development using Polymer Web Components. I started with the 0.5 developer release version. My experience so far has been a little bitter sweet.  Using version 0.5 I had to jump quite a few hoops to get things working, but once I figured out the patterns all was well with the world.

In the Beginning

I had chosen to use Backbone Marionette for the MVC architecture for my apps. I already knew Marionette so I felt the logical choice was to stay productive and just use what I already knew and use the web components in my templates. If I needed a custom component, so be it, I created it. But I tried not to create too many, but still quite a few were created. This was especially the case when version 0.8 came out which was the first breaking change and a pre-cursor to the future. By using Marionette I felt like it worked pretty well. I really couldn’t take advantage of Polymer’s data binding, but I had a Backbone Model for that anyway.

I was able to create some really cool applications and our customers were thrilled with the outcomes (delight your users). Everything worked as it should, it even looked and behaved great on a mobile device. These apps actually looked and felt like they were designed for mobile.

Then Came Version 1.0

Then version 1.0 came out production ready. I had already figured it would be a breaking upgrade after version 0.8 so it really wasn’t a shock, just a nuisance. Nothing from 0.5 worked with version 1.0 so I had to convert my custom components to work with 1.0 and I had to revisit all the apps I had created. While this experience was certainly on the bitter side, it gave me a chance to learn more about Polymer and how things worked.  That learning curve wasn’t as steep as the initial intro into Polymer was, but it really revealed any bad decisions I had made in the previous version.

I started using Polymer everywhere and started creating more and more custom components. I was still using these components with Backbone Marionette and just learned the limitations, what I could and couldn’t do because of the way that Marionette handles regions and View (The Backbone kind, not Notes kind) elements. If these “rules” I had discovered weren’t followed, weirdness ensued with the Polymer components. Things like having to wait for animations to finish, or render a View and then transition to a page. So a lot of setTimeout commands started showing up in the code. Sometimes it was only a 1ms wait, but still it presented complications. Also, a lot of CSS hacks had to be incorporated when weirdness was involved, again it was centered around the way Marionette handles putting HTML templates into the DOM.

Since some hacks were starting to appear in the CSS and JavaScript, performance started to suffer. We also started encountering a lot of browser compatibility issues. Surprisingly IE 10 & 11 handled Polymer much better than Safari, but they still had their issues. Firefox was also becoming a pain and really started to cement my thoughts around maybe we’re approaching this wrong.

Some spare time appears

While I was waiting for some backend and design changes I ended up with some spare time. With this spare time I decided to start implementing our portal as a totally all Polymer application as a pure learning experience and was totally meant to be an experiment. What I found was that a LOT of weirdness just disappeared, even tho I copied the existing HTML templates and logic I then just replaced the relevant bits. It was still very pleasurable to see that weirdness just go away. I also found that the browser incompatibility issues just disappeared. Sure, there were some CSS (mainly what I had written) that IE didn’t like, all the other browsers looked and behaved great.

I also found that the speed at which everything was coming together was greatly faster than using Marionette. When using Marionette there are a LOT of moving parts. You’ve got to manage the order modules are fired up, need to ensure require.js is working properly, need to create the router, router controller, app and ensure that is all working before you write a single line of code. A page rendered by Marionette also required at least 4 files. A controller, view, HTML template and model. Depending on what was being rendered you may also have had to create a collection and item views. So a lot of logic was required to get everything working and this all takes time and planning.

The outcome so far

So that was about a month ago since I’ve been working on this “experiment” in my off time and usually 1 day a week. I’ve put in about 80 to 90 hours of development time. In our current version we’re doing dynamic forms, views, a new user profile and person cards. This requires us to toss out a lot of older work to incorporate these new things. Since I was replacing these things anyway, the goal this past week has been to catch up the Polymer only site to include everything that isn’t going to be tossed out. I’ve pretty much been able to do that, plus on top of that, we’re freeing up one person on my team from doing weirdness control and browser compatibility work.

As far as infrastructure, I was able to cut down the number of network requests by more than 60%. Polymer’s data binding makes this possible, why fetch something when you’ve already got it. In the build version, I’m now delivering one file to the browser instead of many. The initial page load is doing half the number of requests as the Marionette version. It’s also blazingly fast when compared to the Marionette version, so much so that you can feel the difference. Usually with performance gains you really can’t feel the difference, but with these you certainly can.

The amount of code to maintain has also drastically been reduced. For example, in the Marionette version the sidebar was around 1400 lines of code spread across about 12 different files and was it’s own module. In the Polymer version we’re well under 1000 lines of code spread across 3 different components and the majority of the code is HTML and CSS, not JavaScript. Also, maintainability has increased as it’s now fairly obvious where the logic for something lives since it’s all contained within custom components. For example, the sidebar, there is the sidebar-list component, sidebar-item component and sidebar-avatar component.

On the device front, the site behaves great on a desktop browser including Safari, IE and Firefox. On a mobile device, it looks and behaves great, just as you would expect it to. The performance is noticeably better and no animation weirdness, for the most part (IE runs the animations slower, but they aren’t broken). Not to mention a quote from someone previewing the work so far, “The Animations just make me happy”. We were able to get rid of all the setTimeout commands and all the CSS hacks. With Polymer’s custom CSS features there’s even minimal CSS where in the Marionette version the CSS was HUGE.

Looking to the future

Since the switch to Polymer only, we can now look at enabling the offline capabilities of a Polymer app. While most would say this isn’t such a big deal, with old notes apps sometimes it is a deal breaker. Also enabling offline, performance should increase substantially, with things being delivered from the cache if possible instead of the network on subsequent network requests. The Polymer team is making great strides in getting things into the W3C specs for CSS Variables, templates and the HTML spec. The work being done in Polymer is also being used in Angular2 and vice versa. There is also a growing open source community around making custom web components. There are some absolutely beautiful date pickers being created, along with very robust components like the vaadin-combo-box, vaadin-data-grid and others that are totally re-usable and capable of just being dropped into your project.

When creating custom components, we can now use the tools made available by the Polymer team just for this purpose. No more hacking the build process to get it to work with Marionette. The Polymer Starter Kit comes with it’s own build process that just works. You may have to change it a little to get your code to the Domino server, but other than that, it’s good to go.

There is also a lot of work being done by the Angular2 team and Microsoft to get TypeScript functionality included. The ability to use TypeScript makes writing JavaScript a lot more object oriented and closes the gap of transitioning from Java to JavaScript.


My experience so far I feel has been a pretty positive one. A year ago this was bleeding edge technology and it felt like it. Today, this has moved back to cutting edge technology with improvements being made by leap and strides instead of creeping. The Polymer team has announced that breaking changes will be announced by major version number revisions. Version 1.x.x should always be compatible with version 1.x.x however version 2.x.x may include breaking changes, which actually makes perfect sense.

I’m really looking forward to working with this technology and adding new features and functionality to our software just got a lot easier. Sometimes new features cause a feeling of dread and anxiety when I might have to touch something that was fragile to begin with. As long as I create stable components, nothing should end up being fragile, and that’s a good thing.

May 29, 2016
4 hits

Recent Blog Posts
Thoughts on TypeScript
Wed, Sep 6th 2017 9:25p   Keith Strickland
Over the past few months I’ve started working pretty extensively with TypeScript. For those of you who don’t know what TypeScript is: TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It provides strong types to JavaScript. It allows for the creation of classes and enforces those classes in your code. If you define a Redpill.Widget class, you can then use that class in your code and the editor enforces the rules you define within that class. For example,
Replacing Lotus is…. complex
Fri, Sep 1st 2017 9:44p   Keith Strickland
If you followed Peter’s series on replacing Lotus he outlined some of the pitfalls, processes and decision points to undertake for success. I wanted to point out the technical side to a lot of those decisions. The short answer is that you need a tool to surface your domino data en-masse until such a time when decisions are made on each application. I have been working on that solution for quite some time now and I have to say, it’s complex. First you need to make a fundamental decisi
Web Component Thoughts….
Fri, Aug 25th 2017 8:55p   Keith Strickland
The past 1.5 years I’ve been working exclusively with Web Components and specifically Polymer. The more I use this technology the more convinced I am that this is the technology I should be using. Now, I’m not saying that Web Components and Polymer are hammers and every problem/project is a nail. However it’s quite refreshing that Polymer’s goal is to make itself irrelevant. What does that mean, Polymer is there temporarily until the browsers decide upon common standards
Just…. NO,NO,NO
Fri, Aug 11th 2017 7:45p   Keith Strickland
This week I attended MWLUG in Alexandria, VA. This was an awesome event, so many good speakers, good content and excellent camaraderie. I can’t say it enough, but Richard Moy and his team put on such a good event. So, I spoke to a couple of developers who are writing client JavaScript in Domino Designer. While Domino Designer is capable of allowing you to write JavaScript, all I can say is STOP! Stop torturing yourself, Stop making it harder on yourself to write good JavaScript. There are
Goodbye Evernote
Tue, Jan 17th 2017 5:22p   Keith Strickland
I’ve been using Evernote for a few years now and have enjoyed it’s feature set and the ability to plan and document a complex project (namely home/shop projects) with shopping lists, ideas, etc. But recently every time I attempt to use Evernote to create a quick note or maybe just jot something down, I’m presented with a request to upgrade to a pay plan, or to update or just general advertising. I can no longer just open it and create a note. Because of this, I have now backed
Merry Christmas!
Sun, Dec 25th 2016 10:57p   Keith Strickland
Merry Christmas!! I hope everyone is having a great holiday. I thought now might be a good time to look back over the year and review some of the technology I’ve dealt with. Surface Pro 4: Last year I got a Surface Pro 4 tablet. I started the process of switching to it instead of my aging MacBook Pro. While I REALLY like the hardware and how everything works there were just a few issues which got on my nerves so bad I couldn’t ever completely make the switch. As far as performance, I
Visual Studio Code Editor
Fri, Nov 11th 2016 3:42p   Keith Strickland
I’ve been using the Visual Studio Code editor for the last couple of weeks and thought I would share my experience. I’ve mainly used this in a plain ‘ole polymer application which consists of html files. Using the editor this way has shown some of it’s shortcomings. Don’t get me wrong, I think it’s a fine editor and has a lot of features I really like. However with CSS, HTML and JavaScript all residing in the same file, a lot of the typeahead features just don
Work with Rich Text from DDS
Fri, Oct 21st 2016 5:33p   Keith Strickland
So you’ve created your shiny new web application using DDS and everything is really cool, except for the display of rich text. You’ve figured out that there is a multipart MIME object in the JSON delivered by DDS, and it has the HTML in that, but it still looks crappy. It has tags littered throughout and just doesn’t look good. Well, I think I’ve got the solution for you. If you look at that multipart MIME Object and find the ‘text/html’ entry you’ll not
A Polymer Avatar component
Wed, Oct 12th 2016 5:50p   Keith Strickland
At MWLUG a lot of people seemed surprised that I would create a component just for an avatar. My response to that is why wouldn’t you build an avatar component? So, in this post I’m going to show you how to build one for your applications. Let’s start out with the use case. We want to show an avatar for a person in various locations throughout our application. This avatar should do a few different things: Should show a picture of a person if one is attached to their person do

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