how to modernize your technology without going out of business
TRANSCRIPT
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