Cross-origin resource sharing on IBM Bluemix

Update: A newer version of this post has been published to the IBM Bluemix blog.

The IBM Bluemix Platform-as-a-Service (based on Cloud Foundry) naturally supports applications that are composed of many services that are in turn deployed to different hostnames.

For example, if you push an application to Bluemix, the name you provide will be prepended to .mybluemix.net resulting in an address such as:

  • http://my-sample-app.mybluemix.net

If your cloud-native app follows the best practices of a microservices architecture you’ll probably have two or more subcomponents that live on discrete hostnames like this.

But what if you have a JavaScript based front-end that needs to aggregate information from the disparate hosts? By default you won’t have access to data on these other subdomains.

The solution is to take advantage of the HTTP headers that are available to allow you to control cross-origin resource sharing (CORS).

To illustrate the problem and the solution, consider the simple Ajax application here:

If you click the red box, you’ll initiate an asynchronous HTTP call in JavaScript to a servlet on another host at:

The source of this servlet shows that no particular HTTP headers are set, thus the JavaScript call never reaches it.

However, if you click the blue box, you’ll initiate a call to a different servlet on that host:

This time the Ajax call will successfully consume data from the service, because the HTTP headers allow services from a different domain to access the servlet.

response.setHeader(
  "Access-Control-Allow-Origin",
  "http://krook-service-consumer.mybluemix.net"
);

response.setHeader(
  "Access-Control-Allow-Methods",
  "POST, GET, DELETE, PUT"
);

response.setHeader(
  "Access-Control-Allow-Headers",
  "x-requested-with,Content-Type"
);

If you need to allow access to all client hostnames, replace the whitelist with a wildcard:

response.setHeader(
  "Access-Control-Allow-Origin",
  "*"
);

There you have it; a simple way to build dynamic JavaScript applications composed of several microservices on IBM Bluemix (or any other Cloud Foundry PaaS).

I used Java in this example, but the same HTTP headers apply whether you’re using Ruby, Node.js, PHP, Python or any other runtime.

On cruft, or, channeling Lao-Zi

I discovered this insightful nugget over on Slashdot.

It was posted in response to a disillusioned “Ask Slashdot” submitter pondering whether such a thing as “Pretty Code” exists.

Cruftiness is the quality of having cruft. Cruft is the stuff that accumulates on code over time. Cruft has no odor, but it stinks. Cruft has no mass, but it weighs the code down. Cruft can’t be seen, but it’s ugly. Cruft cannot be young, it’s always old. Cruft can’t be deliberately added, it only appears when you’re not looking.

Cruft can’t be explained to managers, except through awkward car analogies. They still won’t get it because managers drive well-maintained elegant foreign cars like BMW’s, which gather no cruft. Programmers understand, because their Fords and Chevys are practically built of cruft. Harley motorcycles should have cruft, but noise dissipates cruft. Cruft is mysterious.

Cruft is never present on code which hasn’t had enough work. Cruft only appears on code which has been worked too long, by too many people.

Brilliant.

New to Ajax development? Want to get better?

18 July 2007 » Ajax, JavaScript, Web development

There’s a solid “guide for the perplexed” that’s been published recently over at IBM developerWorks.

It’s well-written, task-based, and full of links. You could call it a recommended reading list spliced with a recommended todo list.

Despite the title, it’s useful to those looking to upgrade their Ajax development toolbox with new debugging aids, IDEs, toolkits and testing utilities, as well as folks new to Ajax.

All in all a nice article.

A new ibm.com

IBM unveiled a significant upgrade to its Web site earlier this month. There were many folks who drove this successful launch and we’re all pretty proud of the result.

Beyond the aesthetic touch ups and usability improvements seen in the new v16 and v15 templates (Here’s a v14 page for comparision), there were quite a few personalization features packed in.

Visitors can now:

  • Add a given page to their interest areas based on the subject or topic indicated in the meta tags. For example, by clicking Add to My Interests.
  • Navigate based on those interests and country/language preference.
  • Sign in anywhere and share content with others via “E-mail this page” links always available in the masthead and footer.
  • Save time with forms that are pre-filled with information from their profiles when logged in.

My team’s contributions were to the client-side JavaScript and server-side Java functionality, which comprised the overall asynchronous, services-oriented architecture.

This system design enables customization to be plugged in regardless of the underlying hosting infrastructure of the existing Web site.

For example, areas of ibm.com that are hosted on static file Web servers or those which only use CGI are still able to use the new features provided by the central WebSphere application since they are enabled via a single new JavaScript file and use the id of elements in the DOM of the new HTML templates.

I had the opportunity to work with a new team and learned quite a bit over the short run of the project. I was able to pick up or improve my skills with asynchronous JavaScript programming, JSON, DOM, Java build tools such as Ant, high-performance WebSphere hosting, and the CMVC version control system.

The services-oriented architecture was probably the most fundamentally different part of this Web application from others I’ve been involved with and I’m pretty excited about applying that pattern in future projects now that I’ve seen the value of a real world implementation.

Chris Shiflett at NYPHP April 24th

23 April 2007 » Ajax, Apache, DB2, JavaScript, MySQL, PHP

New York PHP has officially lined up its next four monthly presenters:

The RSVP system for the April meeting tomorrow night is still open till 6pm EDT tonight. Hope you can make it.

Update: The RSVP deadline has been moved to midnight tonight.

Ten Years of JavaScript

10 April 2007 » Ajax, JavaScript, PHP

This spring marks a decade since I first used JavaScript.

My initial exposure to programming, and computer science in general, was through an introductory course for non-computer science majors called “Computers in a Modern Society.”

The class filled us in on the history of the Internet, the World Wide Web, and HTML. JavaScript seemed tacked on to the syllabus at the last minute, given the buzz surrounding its release the year before.

It was a massacre. Less than half of the hundred or so political scientists, economists, psychologists, and philosophers survived that course, even though JavaScript had been touted as an easy-to-learn, high-level, “toy” of a language.

Thus began my love/hate relationship with JavaScript. The beast that slew so many of my friends introduced me to C-like syntax, showed me functional programming, and provided the leverage I needed to start my career a couple of years down the road.

Tin or aluminum is the traditional 10-year anniversary gift, and it befits my tribute to this lightweight staple of the modern Web, waiting in the sand to slice your foot open.

Following is a short history of my relationship with JavaScript.

  • 1997
    My first Date() with JavaScript. Original programs, later cleaned up in 2000: Reflection Cipher Encryption, EU Currencies Converter.
  • 1998
    Went through my “Select menu choose a link from the dropdown and you’ll go to the address you don’t even need to click submit!” phase. This carried through most of the year.
  • 1999
    Interned at the Federation of American Scientists, Arms Sales Monitoring Project. Rebuilt the site (it’s still up!). Ten percent HTML, 90% JavaScript to provide cool roll-over effect in masthead image links. Oddly, masthead JavaScript is no longer used.
  • 2000
    Built the TLD Lookup tool to see where my Web site visitors were coming from. Discovered server-side scripting such as ASP and PHP, began to look down upon front-end coders like I was until the month just prior. Like every other developer working at a health-oriented Web site, I wrote a Body Mass Index calculator.
  • 2001
    Lots of front-end workarounds since the platform of the site I worked on full-time went from ASP to ATG Dynamo, robbing us of any server-side logic we lowly front-end developers could script. Seeds of bitterness towards MVC planted. Besmirched JavaScript’s good name via pop-unders at behest of higher ups. Ug.
  • 2002
    Continued to mock those with functions beginning with “MM_” in their source.
    Did lots of date related things on the client-side to work around lack of server side scripting. Came up with ill-conceived “scrambleCard(strCC)” function to mask credit card numbers (Fortunately the site was served via HTTPS anyway).
  • 2003
    Worked with some folks at NYPHP to develop an airline ticket booking site. Chris Snyder opens up a whole new world for us by implementing a pre-Ajax technique to manage city and airport dropdowns. I remain proud of my form validation system which changes styles of improperly filled form fields text to bright red and alters title attribute of surrounding label elements with condescending error messages.
  • 2004
    Lose most of the year to an ill-fated content management tool project. Not all is lost, I cut my teeth on J2EE and Struts, and make peace with MVC. Implement rollovers from Young Pup on every freelance job I can get a hold of. Have fun with banner and splash image rotations, transparent PNGs and the like.
  • 2005
    Began drafting a presentation on how to learn JavaScript instead of relying on copy and paste. After seeing JSF tooling demonstrated in Rational Application Developer expressed shock that there were tools and technology that would generate JavaScript for you, instead of handcoding it for browser compatibility and efficiency. The horror.
  • 2006
    Shamefully lag behind on Ajax and Web 2.0 advancements. On the other hand, strengthen knowledge of PHP, J2EE and database modeling to fill out that part of the architecture.
  • 2007
    Return to client-side coding via job change and new projects within my larger organization. Lots of Ajax, JSON and SOA. More when that launches later this year…

Here’s to JavaScript 1.7, and many more rumors of its imminent demise.

Technology of the day: OpenLaszlo

I first heard about OpenLaszlo last summer, but the goofy name immediately kept me from looking at it. After reading a slew of developerWorks articles, however, I got some encouragement to give it a chance.

You write a set of XML tags, pepper it with some JavaScript, then compile it to a Flash-compatible format. You can also serve it on the fly from a Java application server to take advantage of network functionality.

Some resources:

Very cool.

The eventual JavaScript presentation

31 March 2006 » Ajax, CSS, JavaScript, Web development

According to my CVS repository, I’ve intended to do a presentation titled “JavaScript: Beyond Copy & Paste” since the end of August 2004. I came pretty close to doing it for New York PHP in early 2005, but I believe we had a compelling speaker step up with a topic more relevant to the PHP community.

This was around the time that the term Ajax was coined, and it might have been a timely presentation. Alas, I missed that train and I let the outline languish.

Recently I came across “A re-introduction to JavaScript” at the Mozilla Developer Center, and I realized that maintaining the original outline might still hold some value, gauging by the popularity of this resource.

So, since I now have a blog infrastructure that supports comments – though I suppose a Wiki might make more sense – I’ve decided to post the outline as it looked last June, and solicit updates and comments for it. I may end up doing a presentation on it some day, but I don’t mind if someone else runs with it or uses it as a base for their own work, so here it is:

JavaScript: Beyond Copy & Paste

Next page »