17
Proactive Application Development with ReactJS
© 2017 SAPIENT GLOBAL MARKETS | CONFIDENTIAL 2
“Silicon Valley is coming and if banks don’t up their
game, then tech companies will take over theindustry’s business. There are hundreds of startups
with a lot of brains and money working on variousalternatives to traditional banking.”
— Leading Bank CEO
© 2017 SAPIENT GLOBAL MARKETS | CONFIDENTIAL 3
Leader’s thoughts
Digital initiatives help you solve today’s problems—while digital transformation positions you for market changes, competitive threats and customer needs that have yet to take shape.
- Matt Hopgood, VP Visualization, Sapient Global Markets
Doing digital for the sake of it (“I can build a mobile app for this”) without putting the customer at the center of your strategy will lead to minimal return on value.
- David Donovan, Vice President Business Development, Sapient Global Markets
Create customer journeys that map touch points of the client experience—seeking out ways to use digital to enhance the client experience.
- Jarlath Forde, Vice President, Sapient Global Markets
© 2017 SAPIENT GLOBAL MARKETS | CONFIDENTIAL 4
• There’s an opportunity to transform our commodities trading platform. Would you be able to help?
• We wanted to move digital to have our customers always connected? Are you in?
• Can you help moving my investment management console to a mobile friendly user interface
• Hey, I wanted to build a portal for my Hedge fund investors.
Hedge Fund Administrator in
US
Investment Banker in London
Energy Trader in Europe
Retail Bank in Australia
Different Use cases, Different geographies, Similar journeys
© 2017 SAPIENT GLOBAL MARKETS | CONFIDENTIAL 5
Let’s build an App
Hey Folks. Are you up for a Challenge?
Okay!!
OK. I’ve got a confirmation from our Product Owner. We are tasked to build a high-performing application for Investment
managers, called “IM Desktop”. We need to build Manager’s dashboard of all managed funds, Fund performance page with
analytics and charts, Live prices to make investment decisions and Trade order submission which should integrate with the
existing Trade Order Management system. Our primary focus is to build a Desktop application, but it should be available
through web and mobile to facilitate IMs to make decisions on the go as well.
Business Analyst Team
© 2017 SAPIENT GLOBAL MARKETS | CONFIDENTIAL 6
Design & Discovery
I’ve designed the required components in this art-board. Here are the states of those components. Should I really need to wait till this iteration to seem
them alive?
Probably for next Diwali? Just kidding!! Yes. End of this iteration
UX Designer Web Developer
© 2017 SAPIENT GLOBAL MARKETS | CONFIDENTIAL 7
Architecture & Design
Let’s follow Component based design with granular reusable components.
Yes Boss ☺
And a simplified Architecture of single state atom, functional state updates and functional views.
Web DeveloperArchitect
© 2017 SAPIENT GLOBAL MARKETS | CONFIDENTIAL 8
Industry Specific Components
I need a Trade blotter and a live prices dashboard for our IM Desktop and I want it immediately!!
OK. We can build that. But, let’s be realistic about the estimates.
Business Analyst Architect
© 2017 SAPIENT GLOBAL MARKETS | CONFIDENTIAL 9
Refined Developer eXperience (DX)
Lets use ES6. We don’t want to refactor the code again in few years. We want to fast-track our delivery. How are you planning to make your life easy?
How about code Quality?
I wish I could be in Beach with a Mojito now.
What?
Web DeveloperArchitect
© 2017 SAPIENT GLOBAL MARKETS | CONFIDENTIAL 10
Unit testing Strategy
Lets have a different unit test strategy for implementation & behavior of components
Yep. We can follow Behavior Driven Development (BDD) to unit test the behavior of components. We can also use snapshot testing on the
components.
ISTANBUL ENZYME
Architect Web Developer
© 2017 SAPIENT GLOBAL MARKETS | CONFIDENTIAL 11
Better Quality Assurance
Let’s make sure to cover accessibility testing also as part of our automated integration test strategy. Since it’s mission critical apps, lets do some performance testing, browser rendering
test and memory leak testing.
Absolutely!!!!!!!
DROOL
Architect QA Engineer
© 2017 SAPIENT GLOBAL MARKETS | CONFIDENTIAL 12
Building DevOps Conveyor Belt
I don’t want sub-standard, poor quality product gets promoted to higher environment. Can you please ensure that?
OK. We can build a CI/CD pipeline with quality gates
How about automated deployment?
Of Course!! Without that, it’s not DevOps.
Architect DevOps Engineer
© 2017 SAPIENT GLOBAL MARKETS | CONFIDENTIAL 13
Sapient Web Accelerator
It would take few weeks to spin-up the project with all the required tools
and libraries �
We did the job for you. You just need to use our web accelerator to get started
Team React Community
© 2017 SAPIENT GLOBAL MARKETS | CONFIDENTIAL 14
Sapient Web Accelerator
• DevOps as a service• Fast-Feedback Code
Tests
• Fast-Feedback
Component Tests
• BDD Tests
• App Tests
• Performance Tests
• Accessibility tests
• Feature Code From
The Start
• Web Starter Kit
• Faster Design-
Discovery
• Pure UI functions
• Interactive art-board
• Granular Component
design
• Omni-Channel
Consolidation
• Instant In-Editor
Feedback
• Fast Dev Cycle
• Fast Test Feedback
• Faster Refactoring
• Faster
Comprehension
• Organizational
Scalability
• Granular Reuse
Setup Design Develop Test Deploy
THANK YOUTHANK YOUFor more information please contact:
Geeya MusthafaManager TechnologySapient Global Markets (Bangalore)
Email: [email protected]
Raja NallaiyanSenior Associate L2Sapient Global Markets (Bangalore)
Email: [email protected]
