193 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Docker Quick Tips
Fri, Apr 28th 2017 3
Notes in 9: Dev Tools Grab Bg
Tue, Apr 4th 2017 9
Custom JSON Serialization With GSON
Mon, Jan 23rd 2017 6
Recapping 2016
Mon, Jan 16th 2017 8
Rebirth: An App of Ice and Fire
Wed, Dec 14th 2016 7
Scripting Server Upgrades
Fri, Nov 11th 2016 4
Everything Old is New Again
Mon, Oct 24th 2016 6
Top 10
Building Java Objects From JSON
Thu, Jan 22nd 2015 13
In Defense of Bower
Tue, Jun 14th 2016 10
Server REST Consumption with Authentication
Mon, Aug 18th 2014 9
Notes in 9: Dev Tools Grab Bg
Tue, Apr 4th 2017 9
XPages Comes to Bluemix
Fri, Jul 10th 2015 8
MWLUG Success
Wed, Aug 24th 2016 8
Recapping 2016
Mon, Jan 16th 2017 8
Notes in 9: Docker + SonarQube
Wed, Feb 24th 2016 7
IoT and Raspberry Pi
Fri, May 20th 2016 7
Rebirth: An App of Ice and Fire
Wed, Dec 14th 2016 7


Rebirth: An App of Ice and Fire
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
   

Intro

If you read my blog for any of the Saga of Servlets series, then I hope that you’re excited I’m returning to the application I put together for it. This time, it’s as a conversation piece in regards to some of the build process modernization I engaged in recently, in order to unify the code base in its git repository. In any case, it’s helping pave the way forward before I update some of the back-end elements, when it will again be a talking point for some additional rework and optimizations.

Rebirth

When my App of Ice and Fire (viewable here: iceandfire.mybluemix.net on Bluemix) was last left off, it had an Angular 1.x application as the front-end, with a gulp driven build process to optimize all the front-end assets, and was backed by some excellent servlets (extending DesignerFacesServlet) which were talking points for the previous entries in the series, which focused more on general premise of servlet construction and application structure with XPages and Domino. Sadly, the application was left to sit for several months, which was approaching the better part of a year now. During this time, several new frameworks came out; specifically the release and popularity of React, Angular 2’s release, and my current favorite, vue.js, not only started gaining popularity, but hit its version 2.0 as well. Additionally, I got on the bandwagon of switching to using npm scripts as the primary build pipeline; an approach that makes the dependencies, builds, and build-related actions all rather self-contained and neat. In other words, it was time for something new.

Hyrkoon the Hero, with Lightbringer in hand

What’s New

  • npm scripts are incorporated for build pipeline, with gulp for build process (for now at least)
  • re-incorporation of the multiple project repositories (the Bluemix implementation had previously been its own repo)
    • the Bluemix version is now in its own branch, bluemix
  • the src/ directory for the front-end application is shared between branches
    • with an npm script to copy from master into the bluemix branch
    • this paves the way for sharing the Java codebase between the master and bluemix branches, to follow on
  • the front-end (UI layer) app is its own branch, for use as a git subtree in the other versions (for single-source development)
  • npm script included as part of install to fix font-awesome, specifically to remove the version number, no more failing CSS references in XPages
  • no more symlinking! it was confusing to those who didn’t know it and wasn’t strictly necessary, so it was removed

Build Pipeline

The largest changes, from the front-end perspective, are in the implementation of the front-end assets and the build pipeline that includes them for use. For a break down, here’s a quick description of my npm scripts, which can be viewed in full here.

"scripts": {
  "postinstall": "node ./node_modules/bower/bin/bower install -s && npm run fix-fa",
  "fix-fa": "npm run fix-fa:ver && npm run fix-fa:ie",
  "fix-fa:ver": "replace '\?v=4\.7\.0' '' ODP/WebContent/libs/fontawesome/css/*.css -s",
  "fix-fa:ie": "replace '\?#iefix&v=4\.7\.0' '' ODP/WebContent/libs/fontawesome/css/*.css -s",
  "build": "gulp build",
  "build:watch": "gulp",
  "dev": "concurrently --kill-others "npm run json-srv" "npm run bs-srv" "npm run build:watch"",
  "bs-srv": "browser-sync start --port 8000 --proxy localhost:3000",
  "json-srv": "json-server --quiet --id unid db.json --watch --routes routes.json --static ODP/WebContent/",
  "clean": "del-cli 'ODP/WebContent/*' '!ODP/WebContent/WEB-INF' '!ODP/WebContent/lib'",
  "test": "echo "Error: no test specified" && exit 1"
}

You can see the postinstall script, which runs immediately after install; so when a user runs npm install and pulls in the dependencies, it will be kicked off immediately following it, without need for the user’s intervention. One major thing of note is that while bower is still in use, this makes it more seamless, unobtrusive, and easy to switch to an alternative solution some day.

The fix-fa scripts perform the removal of both the ?v=4.7.0 (the currently specified version) and ?#iefix&v=4.7.0, which have been known to cause issues with being loaded from XPages. They are split apart into fix-fa:ver and fix-fa:ie, run together by the “parent” task. Of note, I had to escape both the special characters and also the escape character, as that’s how the replace tool I implemented needs it.

The build and build:watch tasks both do what you would expect, but now my gulpfile.js is considerably cleaner, with only the build specifics defined as gulp tasks.

The most complex npm script is the dev script, which:

Aside from being a bit of a populist move at the moment, it’s good in that you can boil down your npm scripts to just a small handful of truly worthwhile scripts. A user can generally remember that npm run dev will run the watch and live-reload environment, with npm run build being the one-off build task, and npm run clean the clean command to remove the built assets. If nothing else, they’re more easily documented in a project’s ReadMe file.

There is absolute benefit to being able to make use of both the npm ecosystem for the various packages to perform the required tasks involved. I didn’t have to write my own cross-environment supported script to do any of what goes on in the npm scripts, let alone something as complex as concurrently, which manages the task of performing simultaneous commands or npm scripts. Anything I can run from the host (and require as a dependency) from the CLI is available to be used. This is quite powerful and, once properly configured, should seem somewhat straightforward.

What’s Missing?

In the future, I have plans to refactor the front-end portion of the app, along with addressing some of the concerns such as my copying all the library assets into ODP/WebContent/libs/, which is inelegant. This should set up a blog post or two covering these topics. All in all, it’s a rather usable scenario at the moment.

How to Check it Out

The repository itself is the best place to have a look. You can also find the v1.0.0 release information a decent place to look.

Summary

This may just be a node fan’s nerd-ing out, but I think it shows how to improve the build pipeline for a given application over time, to make it more manageable and easily run by the user/developer. I’m sure I’ll come back to this app in the future, so stay tuned, as there are good things ahead.



---------------------
https://edm00se.io/xpages/rebirth-an-app-of-ice-and-fire/
Dec 14, 2016
8 hits



Recent Blog Posts
3
Docker Quick Tips
Fri, Apr 28th 2017 3:00p   Eric McCormick
Docker If you have been living under a rock, Docker is pretty much amazing. If you haven’t been living under a rock, you may be getting used to the idea of Docker, but still have the occasional question. I’ve found myself using Docker in increasing amounts and complexity over the last year or so. I’ve recently decided to start recording some of the tasks I’ve found useful, some of which may be less familiar to a beginner. If you’re so inclined, check out the playlist, embedded here.
9
Notes in 9: Dev Tools Grab Bg
Tue, Apr 4th 2017 1:00p   Eric McCormick
Intro I’m on Notes in 9 again, with a “grab bag” of a couple of tools I’ve put together recently that may be of a varying degree of useful for other Domino + XPages developers. You don’t need these to do development, but for the right person, they may help with their development workflow. Also of note, with the upgrade to Swiper with the FP8 release of Notes + Domino Designer, the limitations previously mentioned are no longer there! This means that my second tool I talked about, node-
6
Custom JSON Serialization With GSON
Mon, Jan 23rd 2017 2:00p   Eric McCormick
Intro Here’s a curious one, in which I found myself with a limitation of not being able to output JSON with scientific notation values. wait, what? If you’re wondering why that is, since both JSON and JavaScript allow scientific notation of number values, you are absolutely correct and that’s a great question. The strange thing was that I found myself outputting perfectly valid JSON to be consumed by something specific which didn’t allow scientific notation. I’m not entirely sure wh
8
Recapping 2016
Mon, Jan 16th 2017 3:00p   Eric McCormick
Intro Per usual, I’ve had a little break between things and decided to catch up with a bit of a summary of some recent things that each didn’t necessitate their own post. 2017 IBM Champion For starters, I’m honored to be named an IBM Champion in Collaboration Solutions (/ Social Business) for the third time. This would be a hat trick in (ice) hockey 🏒. I’m happy to be recognized with a group of people, developers and more, who are passionate about both their work and the plat
8
Rebirth: An App of Ice and Fire
Wed, Dec 14th 2016 4:00p   Eric McCormick
Intro If you read my blog for any of the Saga of Servlets series, then I hope that you’re excited I’m returning to the application I put together for it. This time, it’s as a conversation piece in regards to some of the build process modernization I engaged in recently, in order to unify the code base in its git repository. In any case, it’s helping pave the way forward before I update some of the back-end elements, when it will again be a talking point for some additional rework and
4
Scripting Server Upgrades
Fri, Nov 11th 2016 2:00p   Eric McCormick
Intro This one might be slight departure from my usual, but those that have followed my blogging this past year will have noticed a bit more of a leaning towards DevOps in some of my posts. This echoes a lot of what I’ve been concluding as increasingly a necessary part of development; that we need to consider a picture large enough to encompass the themes surrounding development functions and, like any good developer (DRY ~= “lazy”), automate the heck out of it. Overview I had p
6
Everything Old is New Again
Mon, Oct 24th 2016 8:00p   Eric McCormick
Intro Every so often, it’s good to reassess one’s position. This is good from both a standpoint of being inquisitive and even interrogative, but when it comes to the ever changing landscape of the front-end development space, it’s not only inevitable, but must be embraced for what feels the need to “stay afloat”. I’m changing theme of my blog, hopefully for the better. The previous theme was good and did a great job of getting things started, but while I had forked a copy of a good
4
Git Squash
Thu, Oct 20th 2016 8:00a   Eric McCormick
Intro If you’re just here to learn a little about how to “squash” commits with git, skip down a ways. Otherwise, hold on, and I will catch you up on a couple of personal notes before we get there. On the Blog It’s been a little while since I blogged last. This has been due to a combination of reasons; specifically, I’ve been busy with: my family, it was the end of summer with lots of things going on a number of projects around the house (a deck removal and basement remodel
8
MWLUG Success
Wed, Aug 24th 2016 8:37a   Eric McCormick
Intro MWLUG was a great success as far as I’m concerned. Each time I’ve gone I’ve had the great enjoyment of being able to attend some high quality sessions, meet with lots of colleagues and friends from the community, and get a view into products and solutions many people are undertaking, over conversations and interactions outside of the sessions. This is always a great way of interacting with others who were able to make it. Unlike the IBM conference of Connect(EDsphere), this is purel
5
Manually Renewing HTTPS w/ Let's Encrypt
Wed, Jul 27th 2016 10:40a   Eric McCormick
Intro A while back, I rolled a personal project, which is a Node app, to Bluemix for lightweight use. I managed to make use of Let’s Encrypt for the HTTPS certificate, but only after realizing that there was a bit of a manual aspect to it that is the antithesis of an automated script for such things. Ultimately, after finding some information in a blog post form Marky Roden (of all people), I was able to get moving. The only downside wound up being that time passed, and it came time to renew




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