In this SmartBear webinar, Sebastien Gadot presents on how his team at LISI Automotive got started with the open source Swagger tools and moved to SwaggerHub to speed up their application delivery.

1. Proprietary & Confidential
11
Customer Spotlight:
How LISI AUTOMOTIVE Accelerated Application Delivery with SwaggerHub

2. Ce document est la propriété exclusive de LISI AUTOMOTIVE. Il est strictement confidentiel et ne peut être communiqué à des tiers ni reproduit sans
l'autorisation écrite préalable de LISI AUTOMOTIVE. July 2020LISI AUTOMOTIVE – Link together 2
LISI AUTOMOTIVE
International and innovative
Expert of the 3,000
fastening points per
vehicle

3. Ce document est la propriété exclusive de LISI AUTOMOTIVE. Il est strictement confidentiel et ne peut être communiqué à des tiers ni reproduit sans
l'autorisation écrite préalable de LISI AUTOMOTIVE.
NAFTA
4 plants
LAKE ZURICH
LIVONIA
MONTERREY
QUERETARO
EUROMED
14 plants
CEJC
DASLE
DELLE
GRANDVILLARS
HEIDELBERG
KIERSPE
LA-FERTÉ-FRESNEL
LURE
MADRID
MELISEY
MELLRICHSTADT
PUISEUX
TANGIERS
VÖHRENBACH
CHINA
3 plants
SUZHOU
SHANGHAÏ
ZHUOZHOU
07/07/2020LISI AUTOMOTIVE – Link together 3
LISI AUTOMOTIVE Close to You Worldwide

4. Ce document est la propriété exclusive de LISI AUTOMOTIVE. Il est strictement confidentiel et ne peut être communiqué à des tiers ni reproduit sans
l'autorisation écrite préalable de LISI AUTOMOTIVE. 07/07/2020LISI AUTOMOTIVE – Link together 4
The TwoCornerstones of Our Strategy
INDUSTRIAL
EXCELLENCE
Generating Profit & Cashflow :
to secure our significant levels of investment and growth ambitions
INNOVATION
Safety
&
Quality
Customer service
Supply Chain &
anticipation of needs
Continuous
improvement
Safety critical
components to meet the
needs of current &
future vehicles
Optimisation of
assembly time & light-
weighting
Simplifying customer
logistics& reducing
complexity
Table of
content

5. Business Challenges | LISI Automotive

6. Proprietary & Confidential
6
| Transitioning from low value
reporting applications to high
value specific applications

7. Proprietary & Confidential
7
| We know our users, our company
| We’re a small, tightly-knit dev team. We trust each other!
| How can we, as developers, provide more value to our company?
| The business needs are there
| Innovation is part of our DNA
Start of the journey
Our assets when we started:

8. Proprietary & Confidential
8
Step One for LISI Automotive
Improvements:
| The resulting web app was
light years ahead in terms of
user experience
| The app was very well
received by the customer
|Wiring together the front &
backend
|Lack of documentation
|Time lost on technical issues
|Mature back end and front
end needed before showing to users
|No code scaffolding
|Security was hard to do
Front End:
| Angular, all web services calls
coded by hand
Back End:
| Entirely manually-coded by hand,
using Spring Boot
Security:
| Managed both inside the client
and the backend
Current State: Opportunities:

9. Proprietary & Confidential
9
Step Two: Enter Swagger (Open Source)
Current State:
| Front end code was
scaffolded
| API documentation was
good
| Front end/back end
integration easier
| We could showcase the app
without a real backend
| Mocking the server still
time consuming
| The server code still
needed a lot of
rework/adaptation
| Storing the API definition
alongside the code was hard
to use
| Security was still an issue
API Design:
| API design with the online Swagger editor
Front End:
| Angular + clients exported directly from swagger editor
Back End:
| First apparition of mocking: we exported the nodejs
server from Swagger editor and ran it in from the
angular app
| Backend generated from the editor, but with a lot of
necessary adaptations.
Security:
| Managed both inside the client and the backend
Improvements: Opportunities:

10. Proprietary & Confidential
10
| At that point, we were ready
for commercial version. A trial
and a PO later….

11. Proprietary & Confidential
11
Step Three: Enter SwaggerHub
Current State:
| Fast iteration on the front end as
there is no need for a backend to
test the front end app
| Mocking is now instantaneous
| Backend generation is advanced
| All API definition are in the same
place
| Security is now managed in one
place
| Angular had four different
versions in production
| Using one API client in
two app was hard to do
| Security library difficult to
share and maintain
| No shared components
API Design:
| All design is inside SwaggerHub
| Server is mocked directly inside SwaggerHub
Front End:
| Standalone Angular app + clients exported directly
from Swagger Editor
Back End:
| No backend development until the app is validated
by the user with mock data.
| Developed our custom template for the backend.
No more adaptation necessary.
Security:
| Adoption of Ambassador API Gateway
Opportunities:Improvements:

12. Proprietary & Confidential
12
Step Four: NX Workspace
Current State:
| Currently the ability to
export custom
backend code directly
from SwaggerHub is only
available in the on-prem
version. We still have
to use the command line
API Design:
| All is designed inside SwaggerHub
| Server is mocked directly inside SwaggerHub
Front End:
| Angular is now integrated in a NX workspace
Back End:
| Custom template
Security:
| Ambassador is the rule
Opportunities:Improvements:
| Client code is now all in one
place
| Reusing an API is just one
« import » away !
| Custom components are
shared across apps
| Only one package.json

13. Proprietary & Confidential
13
Wrap Up
API Design - Swagger OS SwaggerHub SwaggerHub
Front End Angular Stand Alone Angular Stand
Alone
Angular Stand
Alone
NX workspace +
Angular
Client code Manual Generated Generated Generated
Backend Manual Semi generated Generated Generated
Data Mocking - Manual Auto Auto
Security Per project Per project API Gateway API Gateway
Is front end code
shared?
No No No Yes
Step 1 Step 3Step 2 Step 4

14. What we Achieved | LISI Automotive

15. Proprietary & Confidential
15
| We rationalized our API using SwaggerHub
| A single API can now easily be reused in other application
| Documenting our APIs is now a daily part of how we work
| We shortened our release cycles thanks to automatic mocking
| The backend is now coded only once, but correctly!
| Both the client and the server are now generated automatically
| We made a leap in user experience
| Users all say that there is a before and an after Angular
| We secured our data
| The API being behind the API gateway, there is now one centralized
security model instead of one per app
| We now have one common codebase for our client's applications
| Developing an app is now down to picking existing APIs or writing
new ones and picking pre-developed components

16. Proprietary & Confidential
1616
Thank You