Spark

Subscribe via Email

Subscribe to RSS feed

Archives

Archive for the ‘Innovations’ Category

Front End Development: CSS-centric or JS-centric

Recently, I was reading this article which came across my newsletter, outlining what Front end developers need to know for this year and beyond. What struck me was where the author talks about the growing gulf between those who focus on CSS and those who focus on javascript. Isn’t Front end development about both css and javascript? Lets not forget html! But what’s been mentioned is indeed true. Here is how I tend to see this pattern.

I started my career as a web developer and my daily source of bread involved taking a psd asset, slicing and dicing it and creating pixel perfect, browser compatible html and css using cool jQuery plugins to beautify the UI. And that’s where my interest towards javascript began. I got to know the basics, understood the different paradigms, kept track of its progress, introduced to the MV* frameworks, got to know node, the build tools, pre-processors, et al.I would say many of us peers share a similar career path. 

But there is another set of front end developers (or what do I call them) who solely focus on javascript and thanks to css frameworks (bootstrap, foundation, etc), writing css has never been so easy. They need not know the intricate differences between css2 and css3 nor how different browser engines interpret the css box model. They need not even support IE8. They are skilled and adept in the javascript MV* frameworks, node, the different build tools, good enough to create a web application. 

These two different breeds of front end development raises some very interesting questions. How should the former advance his career ? And should the latter fall back to learning basics of creating pixel perfect sites ? Or are there two different sets of Front end developers now ? One solely focusing on creating pixel perfect html, css and js while the other focusses on MV* frameworks. How should the corporations decide on hiring whom they need ? 

I personally feel if you are from either group, it is still important to know the basics of any fundamental technology you are working on, think from a broader perspective and be inclusive. What do you think ? 

Client side Templating and Performance

A lot has been talked about client side view templates hindering the critical path, thus affecting performance. I have made an effort to summarize the need for client side rendering and measures to enhance the performance.

Before we actually jump on to measures, lets revisit how today’s web application ended up being rendered and compiled on the client (browser) using javascript based templates -

Before the advent of nodejs and javascript templates, how did one used to render json data on the browser ? 

Front end developers (FED) used to write prototypes based on html, css, jquery and hand this over to the backend developers. Backend devs take this asset and integrate it with the java code, parsing the json themselves directly in the servlet or jsp. Here, it takes only one call for the page to load and FED can focus on optimizing critical path, gzip the assets, etc thus improving the performance. This really worked well when we had only one or two FEDs for the whole project and a waterfall approach was followed. Designers used to provide the comps, UI developers created pixel perfect prototypes, and no design changes were allowed once the development started.

And then, what happened ?

Coming back to where we are today, as the web evolved, more focus is put on User Experience, and with the introduction of LeanUX, design and development are being done simultaneously. Now, backend developers cannot change the html in the jsp or servlet every time the design changes and becomes frustrating for them and they don’t see the need to do that at all. Enter jQuery and ajax. FEDs can make an ajax call to the RESTful service, parse the json and render it on the presentation layer, i.e jsp. But, this resulted in a convoluted mess of spaghetti code and became hard to maintain as the application grew. 

Same time, javascript became more mature and nodejs was introduced.  With the help of nodejs, enter client side templating – handlebars, mustache, htmlbars, etc. These templates are logic less (no if, else, for loop statements in the html) and provided a clear, neat separation of html and data paving the way for a true MVC architecture on the client. Both front end developers and back end devevelopers are happy as FEDs can focus on neat reusable, DRY html with dynamic data while backend developers can focus on generating the RESTful API service, data binding and need not worry about design changes at all. Because, data parsing is completely done on the browser now. To help with this data parsing and templating for the FEDs, a host of task runners to improve performance, based again on nodejs got introduced – grunt, gulp, etc. So that, FEDs can focus on the html and the task runner can do all the performance optimizations for them. Wonderful, isn’t it ?

So, what is the disadvantage of this client side templating ? 

With client side templating, every ajax call we make, there is an extra http call on the browser, and the template has to parse this data as well as render itself on the browser. Enter performance issues and critical path rendering.  

How to remediate ?

Fallback to nodejs for solutions again. Client side templating is still fairly new and as the web progresses, definitely the focus will be on ways to render the data on the server itself. There is already htmlbars, which is out to do that as mentioned herehere and also here.

Ultimately, the advantage of separating html from the backend code and allowing front end developers to make robust design changes concurrent with the development cycle has proved more advantageous, than the performance issues with the client side templating.

Take the Plunge. Get Up to Speed with Front-End Build Tools

A colleague recently asked me to give him a high-level overview on how to get started using these fancy front-end build tools everyone’s talking about. Since I’m a team player, I thought it would be best to share my advice with all of you as well!

First, what the heck am I talking about? What are “front-end build tools”? Simply put, there is a community of people and a whole bunch of services out there who just want to make it easier for front-end developers to build projects. Their motivation? Why go through the hubbub of setting up your working directory structure, downloading the plugins and libraries you need, writing scripts for minification, etc., when all of that can be automated?  Enter the realm of build tools.

Now that you know what they do, how do you use them? I fully support the idea of learning by doing, so my job here is to introduce you to your new friends, and let you guys get to know each other on your own time. Have fun!

The Tool Trifecta

Read the rest of this post »

For Enlightened CIOs, the “I” Stands for Insight

Who’s the most important marketing person at your company? Your CMO? Someone on her team? Maybe your CEO? What about your CIO? While your Chief Information Officer isn’t likely to craft your next campaign, the impact he or she has on customer experience is becoming more direct and more critical every day.

shutterstock_234372760The reason is simple, and it has to do with insight. More and more, CIOs and their teams hold the keys to unlocking the customer understanding that designers and marketers crave. A convergence of trends — abundant customer data, demand for greater insight in defining and managing customer experiences and a growing need to empathize with a wider range of customers — are driving CIOs into the insights business. A question remains, however, in how effective marketing and IT teams will be in working together to uncover customer data and convert it into meaningful actions.

Insight into customer behavior is what separates good customer experiences from bad. Insight drives empathy, a raw ingredient in the effort to humanize technology and harness its brand-building potential. The astute use of customer insight is so vital that we include it as one of seven factors in Perficient’s CXIQ Assessment, our measure of an organization’s customer experience maturity. While every company offers its customers an experience, few understand what it takes to systematically turn customer insight into the superior experiences that lead to increased preference and loyalty.

Read the rest of this post »

Reconsidering Enterprise Wearables

I was talking to a colleague a number of weeks ago and the topic came up of where mobile was headed now that smartphones/tablets have become “commonplace”. The three areas that seem to get a considerable degree of focus is wearables (whose hype will be even further boosted if Apple releases the rumored iWatch on September 9th), Google Glass, and Bluetooth Low Energy (the catchier-named “iBeacon” to you iOS types). As a mobile architect, trying to keep up with all the things going on with mobile, I try to keep the deluge from being overwhelming by focusing on those mobile technologies that have enterprise applicability and that clients may come to Perficient seeking expertise. Therefore, I told my colleague that I had dismissed both Google Glass and wearables as more consumer-focused and that my focus was on the possibilities of iBeacons in the enterprise.

However, after a number of subsequent conversations with other mobile architects and articles such as “Salesforce.com sees wearables catching on with customers, partners” has caused me to rethink my position. While I am not confident in Gartner’s claim that by 2017, wearable devices will drive 50 percent of total app interactions, I moto360do believe there is a place where having access to data on your wrist (rather than digging into your pocket for your cell phone or having to have a tablet in one hand) or a headset will have advantages to various classes of enterprise users such as those who require hands-free access such as industrial (warehouse, transportation, etc.), healthcare or in the case of one enterprising firm, replacing access key cards with a wearable.

The challenge for mobile architects and enterprise IT in general is to understand how wearables could provide an advantage to the business (by actually going out and observing how warehouse workers may be using ruggedized tablets now rather than clipboards or rolling computer kiosks and how a wearable could provide an even more productive work environment) by starting to take a look at this technology. This means short R&D initiatives with minimal investments in both hardware and developer time (taking fail-fast to a new level) and developers open to new approaches in terms of screen size, data input, even further optimization of enterprise data access over what is needed for smartphones and processors/memory. In addition, after the issues that firms have had with BYOD in relation to security and mobile device management, determine if wearables create issues that smartphone access to the enterprise did not already expose. If so, better to address it now rather now in an R&D mode rather than later, when you are creating a true business application. The final issue of course is to determine which platforms will break out with many new watches (Apple iWatch, Moto 360, Samsung Gear ) being released and all of which are jockeying for position.

Microservices as a Mobile Development Enabler

A mobile application has very little function without data to work with and enterprise business mobile applications, even more so. This has given rise to the visibility of application programming interfaces or APIs within the enterprise. Businesses are using APIs to allow visibility to certain business data to business partners outside the company. This concept is nothing new, businesses have been sharing data through Electronic Data Interchange (EDI) and Value-Added Networks (VANS) since the 1980s. However, in the last two years, the spotlight has again shown on APIs as the linchpin to support mobile development.

Microservices as a Mobile Development EnablerOne facet of creating APIs to support mobile development is Microservices which are small, single-purpose, server applications and that can be composed together to form other server applications. The idea is that a microservice does one thing well and executes as a standalone application within a server container (which is one of the differentiators between microservices and their larger SOA brethren). A number of IT technologists have equated microservices with the idea of Unix shell pipeline apps in that they share characteristics such as “small”, independently deployed in their own container, may communicate with each other and are loosely-coupled. James Lewis and Martin Fowler of Thoughtworks published an excellent paper that covers Microservices 101:

In short, the microservice architectural style is an approach to developing a single application as a suite of small services, each running in its own process and communicating with lightweight mechanisms, often an HTTP resource API.

You can say that the above statement could also fit SOA but Lewis/Martin call out how microservices are different enough to stand as its own architecture.

One of the reasons that microservices is a popular choice for mobile development is that each service can start out small, the developer can work both sides of the effort, creating both the mobile app and the service to support it, iterating the services to meet the needs of the mobile app and simply deploy the changed service without coordinating with other developers or the service development team.

This leads into the second trend besides mobile development that has pushed Microservices to the forefront which is the shift to DevOps and Continuous Delivery as another key enabler. The reason for this is that microservices support the need for quicker, independent development (no teams), easy rollback, developer-owned (no handoff to the service support team, it follows more of the “you built it, you support it”), and frequent releases.

Microservice allows an easy and flexible way to integrate automatic deployment with Continuous Integration tools familiar to developers such as Jenkins. That is not to say that microservices provide some type of free-lunch; once the size, number and complexity of the services move out of infancy, a number of issues need to be addressed including operational overhead, a higher level of DevOps skills and the complication of managing a large number of services, many of which perform some level of service inter-communication.

SOA has been around for quite a while and it is difficult to remember when it was the new kid on the block. For the most part, service development around REST and the JSON data interchange format has taken hold and microservices has made it easier for the mobile developer to easily and quickly build/deploy the services needed to support a mobile application.

Designing From A Fresh Perspective

As a designer, its easy to fall into patterns that conform to established models. But to truly innovate, you must bring a fresh perspective to every design challenge. I was recently reminded of the value of a fresh perspective, when my 7 year old daughter took on the challenge of making a computer for her American Girl Doll. Because we all know that any self-respecting doll, has gotta be connected.

IMG_3311

American Girl Doll Using Her Laptop

However, this was not an ordinary computer. It was a Mac, which was already enough to make me proud. But it was also customized to her doll’s very specific needs. First of all, it was purple, which is the doll’s favorite color, it was also sized perfectly so that it could fit into her purse and it even had a rear facing camera to take pictures of the other dolls while she was on “Facebook.” But what amazed me the most was the keyboard layout. Yes it included most of the typical numbers and letters that you’d find on a keyboard. However this keyboard was also personalized. It had special keys for her email address, zip code, and Facebook username “in case she got tired of typing.” This really made me realize how much I hate typing in my email address all the time, especially on mobile devices. Wouldn’t it be great if I could have a single key that take care of that for me? Yes, I know most web browsers retain email inputs to support an autofill function, however mobile browsers typically don’t support that capability as well. And in mobile interactions, that capability would have most value.

IMG_3313

Personalized Keyboard

In designing her computer, my daughter never considered the limitations that come with a standardized physical keyboard. In her mind, a computer should be customized to meet the needs of the user. And in today’s world of virtual keyboards and personalization features, there is the opportunity to make that reality. It might even change the way we think about our personal devices. So in your next project, try injecting a fresh perspective and you may be surprised with the results.

 

 

 

 

Flex that Box Model!

The CSS Flexible Box Layout Module Level 1 (or Flexbox) is a box model specification in which the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.  In other words, it’s a neat way for front-end developers to layout content in a way that isn’t just “left to right, top to bottom”.

Flex that Box ModelBut I’m not here to tell you what Flexbox is, nor am I here to tell you how to use it.  At the end of this post are a few links that can cover that for you well enough.  No, what I’m here to tell you is that right now you in fact can use Flexbox.  Go ahead!  Use it!  Before vender prefixes were added, browser support for Flexbox had been sporadic and not very well adopted.  It was possible to use Flexbox on any project you wanted, but the problem was it wouldn’t work on a majority of browsers and mediums.  Now (looking at this Can I Use chart), adoption is so widespread it’s almost universal.

The only problem is (say it isn’t so!) Internet Explorer.  Trying to use the flex box model on anything earlier than IE10 just isn’t going to work.  This is the main issue, and unfortunately it’s a pretty dang big issue.

The solution? Go ahead and use Flexbox, just be sure to contain it to mobile devices (or progressive enhancements).  Most uses that I’ve had for needing to adjust the box model layout in a way that required Flexbox were design changes from desktop to mobile devices. Say you’ve got a two column layout with your main content and a right-hand sidebar.  If you wanted that sidebar information to float to the top of your page on a mobile device above the main content, you were going to have a difficult time. With Flexbox however, it’s pretty simple. And if used in conjuncture with media queries or Modernizr, keeping any usages of Flexbox limited to mobile device should be simple as well.

At the time of this posting, I’m not aware of any shims or polyfills to make Flexbox work on IE9 and earlier, so it’s not looking like widespread adoption of Flexbox in Internet Explorer will be happening anytime soon, but never say never!  And regardless of that, it is now finally a good time to start use Flexbox on mobile devices!

If you’d like to learn more about using and implementing Flexbox, here are two links from Chris Coyier of CSS-Tricks:

Invitation from Google to become a Glass Explorer

Earlier this year, Google had launched +Project Glass contest and offered a unique opportunity to experience Google Glass in-person. I entered into the contest as well and my submissions can be found here. Approximately eight thousand winners were selected and I was not one of them.

Recently, I received an email from “Glass Support” with an invitation to become a glass explorer! See email below:

Google Glass Invitation

I have not yet decided if I will join the program and purchase the Glass Developer Kit which has a price tag of $1500. Trying to figure out business value for Google Glass; from an enterprise IT perspective, I’m not sure how we can use Glass currently. In addition, I don’t think any of our largest partners are working/developing for Glass – example: IBM, Microsoft, Oracle, etc.

Since I am a technology enthusiast, I would like to get Glass for personal use anyway; it would create nice blog posts to share my experiences with especially how wearable tech is transforming user experience.

I would like to hear your opinion – Should I invest in Google Glass? Why or Why Not?

The CIO and CMO Imperative: Collaboration

Because technology is now a key tool that enables marketing, the CMO – CIO worlds have collided, requiring enhancements to collaboration not only among those two groups, but also across the organization. But what is it that has changed, and what are these new challenges that we face?

What’s changed?

  • quote_cioThe business is directing the technology budget. CIOs are no longer just managing an IT budget, but also a “business technology” budget – the costs of those technologies that support the customer, drive insights for the business about the customer (business intelligence), and more.
  • Big data is critical to competitive advantage. This is the “Age of the Customer”, which means that, according to David Cooperstein in an article for Forbes, “the strategies that matter most are those that don’t start with the channel, i.e. mobile-first or digital-first. Marketers need to put themselves in their customers’ seat and define the marketing activities they take on from a customer-first perspective.
  • Consumerization of IT has an impact. According to Andrew Reid, Founder & President, Vision Critical, “BYOD (Bring Your Own Device to work) is making enterprise IT cheaper and less relevant.”

What challenges do we face now?

  1. Clarity around responsibility is becoming an issue
  2. Changing allocation of budgets means that it’s no longer clear who, exactly, is responsible for investment in things like big data and enterprise social networks.
  3. As the technology trends and social business world change as fast as they are, business objectives are also changing rapidly, making it difficult to align objectives against common goals.
  4. CMOs and CIOs have to “get with the times.” According to Anne Park Hopkins, Client Partner in Korn Ferry’s Global Technology Markets, old school CMOs “are non-analytical, shy away from data, and focus predominantly on advertising and promotion while old school CIOs are back-office technologists who don’t engage in the broader business.” This causes conflict as the two leaders of the function fail to see the bigger picture. Read the rest of this post »