199 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Goodbye Evernote
Tue, Jan 17th 2017 8
Merry Christmas!
Sun, Dec 25th 2016 9
Visual Studio Code Editor
Fri, Nov 11th 2016 9
Work with Rich Text from DDS
Fri, Oct 21st 2016 10
A Polymer Avatar component
Wed, Oct 12th 2016 10
MWLUG Recap
Sat, Aug 20th 2016 9
Red Pill is the MWLUG Sponsor of the Week
Fri, Aug 12th 2016 8
Top 10
Polymer app-layout Elements
Fri, Jul 1st 2016 16
Re-usability is the Goal!
Tue, Jun 14th 2016 11
Domino svg support
Fri, Aug 12th 2016 10
A Polymer Avatar component
Wed, Oct 12th 2016 10
Work with Rich Text from DDS
Fri, Oct 21st 2016 10
XMage, your XPrentice will surely miss you
Mon, May 12th 2014 9
2 Days with Domino 9.0.1 Mobile Controls – And I’m not happy
Wed, Oct 30th 2013 9
MWLUG Recap
Sat, Aug 20th 2016 9
Visual Studio Code Editor
Fri, Nov 11th 2016 9
Merry Christmas!
Sun, Dec 25th 2016 9


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.

Conclusion

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.



---------------------
http://keithstric.me/2016/05/1-5-years-with-polymer-web-components/
May 29, 2016
5 hits



Recent Blog Posts
8
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
9
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
9
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
10
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
10
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
9
MWLUG Recap
Sat, Aug 20th 2016 11:27p   Keith Strickland
I had a great time at MWLUG this year. It was great to see so many familiar faces and friends, most of which I only see at the user groups. But, I just got home and thought I would share some of my thoughts and observations about the event and my take away about the state of our beloved Notes. As usual Richard Moy put together a great conference, so many thanks to him for making that event possible. The tone of the event was that most everyone is starting to realize that the Notes client is qui
8
Red Pill is the MWLUG Sponsor of the Week
Fri, Aug 12th 2016 12:21p   Keith Strickland
Red Pill Now is the Sponsor of the Week for MWLUG. Check out our video in the top right corner of the site. .huge-it-share-buttons { border:0px solid #0FB5D6; border-radius:5px; text-align:right; } #huge-it-share-buttons-top {margin-bottom:0px;} #huge-it-share-buttons-bottom {margin-top:0px;} .huge-it-share-buttons h3 { font-size:25px ; font-f
10
Domino svg support
Fri, Aug 12th 2016 12:09p   Keith Strickland
I’ve been messing with the Polymer vaadin-grid. If you enable hidable columns, a little graphic svg icon shows in the top right hand corner of the grid that produces a drop down menu of all the columns in the grid. You click one and it’ll hide that column. This was working great when running from my local gulp server. However when I put it on Domino, the little icon wasn’t showing, but the button was there (you couldn’t see it tho) and the menu worked when clicked. I di
7
Setting up a Polymer development environment
Fri, Jul 29th 2016 11:35a   Keith Strickland
When working with Polymer you’ll need a development environment. Google has created some great tools for doing this, mainly the Polymer-CLI. This is a command line interface for creating elements, applications, building applications (though I prefer a Gulp build system), a web server and some other misc. tools. This should be your starting point for setting up your development environment. To setup the polymer-cli you’ll need a few dependencies: Git Node.js (4.x) Bower Once those a




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