Tools and Tips for Modern Web Development

Curtis Olson, Director of Technology, Comrade
95
144
27

Curtis Olson, Director of Technology, Comrade

With powerful frameworks, new development tools and evolving technologies, CIOs and web architects have never had more options to quickly and cheaply build mission-critical websites and apps. Here are a few tips for improving web development capabilities:

Build a Modern Front-End Technology Stack

Many recent innovations in technology have been on the front end. For decades, a web page experience involved “Click…wait…wait…See Page.” AJAX broke that mold and allowed background requests to retrieve server data while the user still browsed the page. We’ve come so far since the early days of AJAX. Open source MV* frameworks enable you to build a web app that rivals an installed app’s rich user experience on desktop and mobile devices.

Unless your company solely builds simple, content-only sites, you should invest in a standardized technology stack that has, at its core, one of the popular JavaScript MV* frameworks: consider Angular, Ember or React, as well as many others. We are focusing on React (with Redux) because it’s not as prescriptive as Angular or Ember. React Native allows you to use the same coding principles to develop cross-platform apps.

 ‚ÄčIf you aren’t prototyping designs with your users, you should start with an easy-to-use cloud service 

Once you’ve chosen your cornerstone framework, add in smaller libraries that will be used for routing, history, data, etc. There are plenty of great articles on making these choices, so I won’t cover them in detail. Be careful not to try and solve every problem with another library—you’ll get lost in trying to manage all the dependencies. There are some great “starter kits” that include compatible libraries that fit a usage or performance profile. A starter kit will give you a full complement of features that have been tried and tested by other developers.

Responsive vs. Adaptive Web Design: Making the Choice

If you’re building websites, you should understand the difference in these two techniques and choose the right approach for your goals.

• Responsive websites respond to the size of the browser at any given point.
• Adaptive websites adapt to the width of the browser at specific points.

Generally, responsive design is considered better for the web since it can adjust to any size. But don’t dismiss adaptive just yet. Use these simple questions as your starting point:

Is your website mainly read-only content? Choose Responsive.
Is your website more app-like with mobile or tablet specific features? Choose Adaptive.

Prototypes: Let Your Design Come Alive

Many shops are still using flat design files to explain how the website will work. If you aren’t prototyping designs with your users, you should start with an easy-to-use cloud service. Many of these require just a few hours to learn.

Prototyping Tool Types

Below, I’ve covered a few example tools, but there are dozens of other options available for each type of tool.

Basic Screen-to-Screen (inVision, UXPin and Axure): Creates a clickable page-to-page prototype. These tools don’t handle interaction or animation well. Start here if you have never built a prototype before.

Layered (Atomic.io, Principle, Proto.io): If you want to step up the fidelity or interaction, look for tools that allow layered components and can simulate web animations. These allow a richer user experience and still don’t require any programming.

Coded (Framer.js, Origami, ReactJS):  If you have unique requirements or have a large, strategic project, you may be able to justify writing code. This requires a deeper investment of time, but provides for many more features. Some options are libraries tailored to prototyping and other options are full development libraries (eg:ReactJS).

Just Say “no” to Prototyping Reuse

While many tools promise code reuse, don’t expect to get any production code out of a prototype. Prototyping is about quick and dirty validation of ideas and you don’t want that code in production. If you can successfully integrate prototyping into your design process, you may be able to achieve some reuse by developing prototype components that can be shared among other prototyping projects

Get Everyone Up to Speed

All the other tips focused on technology, but don’t forget about your staff. You need to provide training to help them keep up with the changing landscape. Years ago, to get training, you may have had to wait months for in-person sessions, only to sit in a room with 30 others and learn at the pace of the slowest person.

Just-in-Time training is available on-demand, and can be accessed when and where the learner needs it. This can be a big cost savings for the company and provides a lot of flexibility for the employee.

There are many cost effective, high quality providers for remote training, ranging from completely free (Khan Academy) to paid (CodeAcademy, Udemy, Udacity). They all offer an immersive, well organized experience. Moreover, the student can learn at their own pace.

One thing to consider is that most of the classes are crowd-sourced and teachers are paid a commission from the tuition. This means that not all classes are equally good, so read reviews and sample material before signing up for a class.

Suggestions for effectively managing your Just-in-Time training:

• Develop a course catalog of training that matches your in-house technology and processes. This should be centrally managed and maintained.

• Create an individualized training plan for each employee. This should be part of an employee’s annual review and personal improvement plan.

• Set time aside for employees to attend training. Good software developers are constantly learning on their own time with hobby projects. However, it’s a bad idea to expect developers to maintain their skills outside of work.

• Create group learning events. If you’re adopting a new technology that many people will need to learn, do the training in a group setting. Include group discussion at key points in the training.

• Reinforce the training with a worth while project. This is especially valuable when you are also doing group learning. Even if it will be an internal tool, find something useful to build so your team can demonstrate their new found skills.

Summary

The tips in this article can help you navigate an ever-evolving technology landscape. As Heraclitus said in 535 BC, “The only thing that is constant is change”. I’ve been building software for 30 years and have been constantly striving to stay ahead of the curve. I’ve seen technology changes that were useful but slow to evolve,and some that were popular but eventually became boondoggles. Our job as technology leaders is to recognize these changes and effectively manage them into our organizations.

Read Also

Enterprise Web Applications: Game- Changer for IT Management

Anthony W. Perrone, VP, Enterprise Technology Solutions, ProNexus, LLC

Transformative Impact On The IT Landscape

Jim Whitehurst, CEO, Red Hat

Preparing for the possibilities of the Internet of Things

Daniel Sholler, VP Platform and Technology, Infor