rangle.ioThe Web Inverted

HOW TO MODERNIZE YOUR TECHNOLOGY

CEO, rangle.io

Nick Van Weerdenburg

AND NOT GO OUT OF BUSINESS

• Full-stack next-generation JavaScript and HTML5 consultancy

• 24 AngularJS, Backbone, React, and Node developers

• plus UX Design, QA and Scrum masters

• over 20 modern JavaScript projects delivered in last 18 months

• many with client backends in Java, Rails, PHP, Python, .NET

rangle.io

Why Modernize?

• The technology market is experiencing a perfect storm for new technologies over-taking the old.

• Modern JavaScript and CSS solutions provide a significant user experience improvement.

• Large-codebases in the browser demand a new approach to architecting the front-end (AngularJS, Backbone, React) and as a result we are moving from front-development to front-end engineering.

HTML5, Mobile, The UX Revolution…

• No new features for existing clients for 18 months

• Long break between releases

• Reduced sales as clients wait for new version

BUT MODERNIZATION IS EXPENSIVE

• high-risk of failure in modernizing

• alignment of stakeholders is challenging

•  their new architecture (single page applications) and language (advance JavaScript) are a STEEP learning curve.

•  there are many new things companies want to embrace due to a fresh start - testing, continuous integration, continuous deployment, Scrum, functional coding paradigms with JavaScript, new architectures (reactive, functional, etc.)

…AND RISKY

• Loss of customers to newer mobile and UX-friendly competitors.

• Loss of customers to slow delivery of new features due to older architecture.

• Loss of customers to perception as a last-generation solution.

BUT NOT MODERNIZING IS MORE EXPENSIVE

WHAT TO DO?

1.  Validate our architecture and start delivery new features in less than 6 months

2.  Mitigate our risk early and have a steady flow of working features to clients (continuous delivery)

3.  Leverage our existing code effectively

4.  Train and augment our team to achieve points 1 to 3.

WE CAN MODERNIZE IF WE CAN…

MODERNIZATION ARCHITECTURE

How to Modernize

LegacySystem API Angular

Application

•  API Leaks old schema•  Changes are slow•  API isn’t a simple wrapper of old logic•  Regressions are epidemic•  New system is compromised

Challenges•  Reuse business logic•  API codebase is familiar

to team

Pros

How to Modernize 2

LegacySystem API Angular

Application

Pros•  Legacy API can be less ideal•  Existing team can build quickly•  Effort is 1/4 effort of ‘ideal’ api•  New App server can be fully

modern (e.g. Node, use newAuth)

•  front-end work can be against mock data

Pros

Mobile & SPA App Server

•  caching strategies are easier•  legacy system can often now scale

horizontallyChallenges•  second server•  new technologies to master

How to Modernize 3

LegacySystem API

AngularApplication

•  a properly scalable architecture with modern best practices.Pros

Mobile & SPA App Server

Redis

MongoDB

MobileApplication

HOW TO MODERNIZE

1.  Commitment

2.  Skill

3.  Timeline

4.  Strategy

5.  Plan

5 KEY STEPS

1. Commitment

•  Need management buy-in

•  It’s important to have the accounting and strategy lined up and everyone bought it

•  Management has to be committed to removing impediments

•  Opportunity cost accounting is essential - what do you lose

•  if it takes too long to migrate?

•  if you dont?

•  Have a project charter that removes any revising the commitment.

Commitment is Hard

2. Skill

• Front-end development requires an a different skill set.

•  JavaScript is more functional that what most developers are coming from.

• Large code-bases in the client are new experiences.

• New approaches such as TDD and continuous integration are a huge opporuntity that companies don’t want to miss.

Key Changes

3. Timeline

• Understand the opportunity cost of the timeline

• Work from there, and create your strategy and plan.

• Commit to it.

Timeline

4. Strategy

• What are you doing to get your skills to the right place?

• How are you augmenting those skills?

• How are you architecting your new solution to account for your timeline and skills?

• How are you managing the risk?

4. Strategy

5. Plan

•  Inception phase.

•  identify organizational needs

•  identify timeline

• charter

• architecture strategy

• Build

• validated learning approach with milestones that eliminate risk

5. Plan

10 RULES FOR A MIGRATION

RULE 1: Deliver something in < 6 months

RULE 2: Leverage 50% of your current codebase

RULE 3: Release new features with new

codebase.

RULE 4: Lean Migration- validate your learning

RULE 5: Risk-Driven Prioritization

RULE 6: Include Design•  Implement a New UI/CSS framework for Your Legacy Code•  Release a design refresh in conjunction with new features•  Design communicates strongly to your market as much as features

RULE 7: Be User Centric•  This is ensures you migrate risk by delivery user value•  This also helps frame arguments and discussions internally

RULE 8: Allocation•  1/4 team to current platform•  1/4 team to API•  1/2 team to new platform•  Hire or partner for key skills to get new team

up to speed and mitigation risk

RULE 9: AccountingIf you have a valid business, what is opportunity cost loss for:

•  Not supporting mobile•  Having 4 codebases (old web, new web, mobile web, apps)•  Make your plans from these numbers and invest properly.

RULE 10: Engage Your Customers

•  separate design refresh•  early shipment of new features

rangle.ioThe Web Inverted

CEO, rangle.ioNick Van Weerdenburg

THANK YOU!

@n1cholasv

n1cholasv

Image Credits