## Synopsis

Learning to steer a rocket with no driving licence while towing a shipwreck

Supercharged development with web components, ing-web and tpa architecture....with IE11. A 6 month journey navigating with one leg into the future of the web and another into the depths of IE11 hell.

Gradually migrating a legacy CRM to web-components, ing-web and tpa-architecture.
How we started, how the project evolved, where we are now and next steps.
All explained with a focus on highlighting the interactions and sometimes conflicting objectives between the project team and the library teams (ing-web, tpa), and how we solved them.

The objective here is to provide teams starting new projects with insight into the benefits and also the problems of working with ing-web and tpa, the people and the libraries and how to get over those bumps and deliver your project

## FOCUS

- Conflicting objectives between the project team and library teams and how we solved them.

## OBJECTIVE

- ing-web and TPA benefits, problems and solutions or workarounds to problems

## Title explained

### THE ROCKET

- Web components
- New technology
- Speed

### THE NO LICENCE

- No Background
- No previous experience with said technology
- The libraries we must use to

### THE SHIPWRECK

- IE 11

### DESTINATION

- Promiseland Planet Production

-----

## People Involved

- Thomas Almer
- Thatiana
- Dan
- Thijs
- Inc'un baiat de la ei
- Arhitectu blond
- Radu architect HB,
- Cosmin tot de-acolo
- Iosif Ambrozie - wholesale banking
- Tipu cu care am stabilit workshopul pe ing-web

## History

1. The old project
2. The new project
3. New project, new technologies
4. What is ing-web, what is tpa? Where do we find it?
5. Let's see if I get this right - POC of layered architecture.
6. Find some open source starter, get something on the screen quick.
7. Theory is clear, but when we get to put things on screen we struggle a bit. But we proceed anyway.
8. Discover gitlab, research some more, find example projects. Tpa-sample-project, ing-web 0.x repo. Breathe a sigh of relief.
9. Some sedinte to split the screens into components, back then they were called molecules and X.
10. Gods visit us. The ARCHITECTS are coming to Bucharest. We have a chance to have our ~~prayers~~ questions answered.
11. They arrive. Progress is being made quick. We use a lit boilerplate and go through some example components. Establish strong boundaries for our workflows.
12. Decisions are made. We must use Redux and Redux Saga.
---- more details in Narc Presentation.pptx
---- on sagas we go to Cosmin's presentation - Romania TPA Compliant Front End Tech Stack Proposal
13. ...

## Major Events Chronological order [? - ASK TEAM]

* First POC
* First starter kit and first commit
* TPA First visit - discussions
* 2nd visit - workshop == Sprint 0
* Iosif workshop
* Think about and create ing-web-ro
* Paun workshop
* Splitting app into packages that are more ready to be independently publishable - change of folder structure
* First lazy loaded components
* [! - TO BE ESTABLISHED] - Releases
* [! - TO BE ESTABLISHED] - Major Bugs & Scary moments & Browser quirks
* [! - TO BE ESTABLISHED] - Other turnarounds, started one way but ended up doing it in another way.
* Started to build away, then profile CRACKS randomly throughout the day, rendering our app unusable
* Solution build a mock server, not to block development
* That moment when you start building, you're happy things are working out, you are picking up speed and then you start feeling uneasy, you forgot something, your forgot to check if it works on IE
* App turning points
* cached selectors, cached templates (not so much), lazy loading
* Having to use multiple development branches.
* Alex - putting in some icons
* Milestones
* First icon in the app
* First attempt at mock server etc etc
* Go through Retrospectives
* Go through their repos, look for bugs put by us. Me, Andra, Radu

## Acoperire ca de ce e codul asa.

This is going to be as much as possible historically accurate. I'm not going to shy away from highlighting the problems we've had, even if for some the solutions are obvious and they seem trivial.
Because withholding this, while I will prevent myself from looking bad, it will also prevent us from learning from this. There was also a mix of lack of experience, time constraints and competing concerns (and objectives), of which we must prioritize. And my mantra has always been. Make it work --> Make it right --> Make it fast. Or if we're talking about IE11, make it RUN (HAHA).

## Ideas

* Make a moment with each person in the team, tied to the project.
* Hard things in computer science, bla bla and naming things, show our example
* Show the app working in Chrome, then the side-by-side with IE not working.
* Difference before and after commit conventions
* Show closeness to production release deadline as we go through the history of the project
* Discuss high agency vs low agency people. Find a way.

## Chapter structure

* What we set out to do
* What we wanted to build
* How we wanted to do it vs. How we were ordered to do it (use ing-web use tpa)
* What were the constraints
* Historical context
* The rocky start
* getting a boost
* A lot of uncertainty around how to do things
* Starting to feel confident in what we do
* Lessons learned

## Historical context

* Before I arrived
* @ing-poc/style-builder
* @ing-poc/transaction-item
* @ing-poc/transaction-list
* First few days a lot of serviceDesk mail trying to get my computer connected to the internal network, getting through all the layers of security in place.
* 18.01.2019 - Getting a TPA presentation from Radu, finding the first link in the rabbit hole.
* 18.01.2019 - Initial split into blocks named according to tpa conventions. Still many questions to be answered. Trying to make sense of the documents. It's one thing to have the theory laid out and a whole other animal to make sense of that in the practical sense. And even if you don't make sense of it all at the start, we have a project to deliver, so we might have to compromise some stuff in the mean time.
* 22.01 - mockups of how the split looks.
* 22.01.2019 - Struggling to get formatted code over skype
* 25.01.2019 - Retrospective
* Pe partea de UI/UX nu sunt transparente procedurile, lipseste documentatie pentru Orange Juice
* Stabilim un meeting cu colegii de la 14 ca sa discutam UX Alexandru Manta
* Incertitudine privind tech stack-ul pe Frontend
* Pana cand se clarifica lucrurile pe frontend, facem componente cu lit si pornim o solutie de React in care incercam sa integram ing-web
* 25.01.2019 - Until things become clear on the frontend we start something with react and integrate ing-web in that.
* 28.01.2019 - Finding out about the ing-web channel on slack's more retarded brother - mattermost.
* 29.01.2019 - Trying to make sense of things I find out about the FE Guild and about an upcoming event, and find a live stream. Figured there must be something interesting for our own project there.
* 30.01.2019 - Add create-lit-app as a starter for our project -
* https://gitlab.ing.net/CX78LJ/renarc/commits/master
* https://tfs.ro.ing.net/ADProducts/AD/_git/solution-selling-fe/pullrequest/825
* First attempt at structuring the application
* 31.01.2019 - Andra sends me the ing-web-tpa-example project with a real world implementation of the 5 layers. She finds this in one of the presentations at this livestream.
* 08.02.2019 - Retrospective
* Good
* Am reusit sa identificam in mare parte, neclaritatile pe care le avem in legatura cu TPA si ing-web.
* Am reusit sa punem bazele viitoarei aplicatii, trecand prin toate layerele.
* bad
* Direction, clarity and responsibility for the tech stack
* actions
* Raising every concern with tpa people so we can assess what to use, if what we need to use is ready, so we can ramp up development
* 08.02.2019 - Meeting set with TPA guys
* 11.02.2019 - Presentation for NARC - what we do, the app structure, frontend challenges, layer identification
* 13.02.2019 - TPA Meeting Conclusions
* 21.02.2019 - Setting up the build - https://tfs.ro.ing.net/ADProducts/AD/_git/solution-selling-frontend/pullrequest/855?_a=files
* 22.02.2019 - Retrospective
* good
* Poc prezentat cu succes. Go team! (1 votes)
* Am inceput sa lucram la renarc si avem task-uri pe frontend:D
* Începem sa colaboram din ce în ce mai bine ca echipa cu un plus în dreptul Andrei care pare ca înțelege foarte bine ce vor ăștia de la TPA (6 votes)
* bad
* FE roadmap (0 votes)
* Unclear roles and responsibilities for the tpa initiative (0 votes)
* There are still to many meetings (0 votes)
* Lipsa organizarii pentru a doua vizita TPA din martie ( program sprint 0, cu ce trebuie sa ne pregatim ) (0 votes)
* Încă nu vedem privirea de ansamblu a cea ce vor defapt cu noile schimbari (0 votes)
* actions
* 22.02.2019 - Second TPA Meeting is announced to prepare sprint 0
* 22.02.2019 - Weird issue with html fn from ing-web/core and lit-html even though it's the same. Try to discuss with ing-web team, couldn't reproduce issue, they used yarn. We don't have immediate access to yarn ( some configuration might be needed)
* 22.02.2019 - Fix a lot of api changes due to ing-web not being at 1.0 - https://tfs.ro.ing.net/ADProducts/AD/_git/solution-selling-frontend/commit/5090041dce5c6dffd8110f855ef75f4d7c3e4a2f
* 28.02.2019 - Decision made on TPA sprint 0.
* 08.03.2019 - Got the macbook.
* 08.03.2019 - Mail Thatiana about what we could contribute
* 08.03.2019 - Mail Thatiana about what we could contribute
* 11.03.2019 - Retrospective
* good
* Speed of execution with them
* Collaboration with tpa team
* Sprint 0 completed successfully
* We have new friends @TPA that we can count on (hopefully)
* Good restrictions from the @TPA team (husky, lint, packages, etc...)
* Now we have some clear ideas about how an ing-web application should look like, and we can start working
* Clarification on where we have freedom with technology where we have stuff imposed (1 votes)
* Tpa workshop went really well
* Dupa TPA ne-am dat seama ca suntem destul de aproape ca stil de munca cu ei
* vizita TPA. Avem un inceput bun la proiect.
* Organizare si atmosfera placuta de lucru impreuna cu baietii de la TPA.
* Inspiration for the workflow process from 200ok team
* bad
* @TPA team started aggressively but at the end of the sprint, compromise solutions were chosen.
* We have to clean some "leftovers" from the @TPA
* We didn't had the chance to contribute a component yet
* actions
* 11.03.2019 - Create home page. connected and disconnected versions of components
* 13.03.2019 - Next steps regarding collaboration from Thatiana. Components we could share. The guidelines THEY could share for contribution, for accessibility
* 13.03.2019 - Got introduced to slack, mattermostsless retarded brother
* 14.03.2019 - FXRates team gets in touch about setting up a project with ing-, so we set up a meeting.
* 18.03.2019 - In the meantime trying to install office on the mac, so I can start working on the presentation (HAHA)
* 18.03.2019 - We get the accessibility document. A w3.org link. great.
* 18-19 - Trying to get in sync on how we want to handle the data-grid component. Drawing up the specs
* 20-21 - Example of bad weird code. Tab-content-container, tab-content-wrapper.
* 21.03.2019 - Bug on oldRecord with some datepicker acting out.
* 25.03.2019 - Retrospective
* good
* Mihnea si Radu ne-au impartasit din experiența lor pt unit testing prompți (2 votes)
* bad
* Sa dam jos IE (0 votes)
* actions
* 25.03.2019 - Decisions: we're going to use vaadin, we're gonna provide custom styling. They are going to make the specs for tabs and a11y guidelines. Example of what they have with the toast.
* 15.04.2019 - PR Finally making shit work in IE. Removed some incompatible methods from usage due to them not being supported in IE
* 15.04.2019 - Add our first service, the notification service, built on top of the notification web component from ing-web
* 16.04.2019 - Discuss about our merge request with styling for data-grid. Decide we should close the MR
* 17.04.2019 - Alex PR with IE
* 22.04.2019 - First time sharing our experience about ing-web and TPA. Things were mostly pink back then.
* 02.05.2019 - Propose a compose Fn to make mixin composition more legible. That didn't happen
* 08.05.2019 - Add some global error handling
* 09.05.2019 - Start to move logic things that were first built in the web component into the saga
* 15.05.2019 - Were you ever so upset with a colleague that you wanted to shoot'em in the head ? Now you have the chance. LASER TAG!
* 15.05.2019 - Add some graceful failing for api calls
* 17.05.2019 - Add ing-web's datepicker.
* 17.05.2019 - Trupci announces problem on IE.
* 19-20 - Updating the bosses with how our interaction went
* 20.05.2019 - Retrospective
* good
* narc is on dev environment
* bad
*
* actions
* 29.05.2019 - Can we style form errors as input field errors ? The answer is no.
* 13.06.2019 - We get the news that ing-web will handle implementation of a data-grid component in Q3.
* 21.06.2019 - The way testing is done by the tooling, breaks our dependencies/creates circular dependencies. A solution is proposed and implemented. Internal module pattern (who uses it, why, etc).
* 26.06.2019 - Call regarding reviewing other open source grid and their disadvantages. Plan to add a11y to vaadin ?
* 26.06.2019 - Delayed release
* 28.06.2019 - Talk about and prepare handover to business teams
* 03.07.2019 - First attempt at a mock server. Created PR.
* 03.07.2019 - First Issue taken to the next stage at ing-web. Notified them that tooltip styles are not exposed.
* 15.07.2019 - Some expectations are set in an email to teach others about working with ing-web. So the workshop is soon to happen.
* 17.07.2019 - Sent some essential resources to prepare for the workshop so we don't start from 0.
* 19.07.2019 - Fix my entries checkbox bug because we weren't using the right events because the documentation was not obvious about that.
* 29.07.2019 - Going places. Finally we can publish components to npm. So others can use them. Still a lot of problems to solve. Who is governing this.
* 29.07.2019 - Retrospective
* good
* we have ingwebro
* bad
*
* actions
* Looking to make smaller and more frequent PR's
* 31.07.2019 - Merge request with readme change accepted in ing-web
* 03.08.2019 - Fix bugs where null shows as null in IE, and doesn't show in Chrome.
* 06.08.2019 - We have a summary of how we use the group components.
* 07.08.2019 - Another IE Bug with conditional rendering of columns.
* 26.08.2019 - Retrospective
* good
* Ing web bug reporting
* Testare pe Chrome => inițiativă trecere la chrome
* NARC in Chrome: A New Hope
* bad
* Guvernanta ING-WEB-RO
* actions
* Looking to make smaller and more frequent PR's
* 28.08.2019 - The problem with having an app at 10px served in an iframe and new styles at 16px and users using the app at 125% and 150% and business stakeholder constraints. Discussing the issue with ing-web people.
* 10.09.2019 - Separate code in page modules, lazy load not needed pieces
* 12.09.2019 - Retrospective
* good
* Major improvement viteza IE
* code splitting! Big Win
* bad
* Guvernanta ING-WEB-RO
* actions
* Looking to make smaller and more frequent PR's
* 09.10.2019 - Retrospective
* good
* bad
* Nu am tinut pasul cu ing-web si asta a itnrodus erori la development.
* Vreau sa inteleg de ce nu sunt stilurile pentru diferite rezolutii temporare pana scapam de oldrecord de tot si apoi lasam browserul sa faca ce vrea la 150 si 200% si setam vizualizarea default pe 100%. Altfel ajungem sa particularizam fiecare componenta din ing-web, ceea ce clar nu e ok.
* actions
* Looking to make smaller and more frequent PR's
* 10.10.2019 - Feedback coming from the user teams, and is overwhelmingly positive.

## What was most important to team

* Alex
* 1. Suntem in 2019 si inca dezvoltam aplicatii pe/pentru internet explorer, ceea ce ne ingreuneaza munca si ne frustreaza
* 2. Nu-mi place modul cum sunt construite componentele la nivel vizual, ma asteptam sa gasesc un minim de abordari moderne; flexbox, rem/em, css grid lipsesc cu desavarsire
* 3. Paradoxal nu ma incanta modul nostru de lucru cu webcomponents, dar in momentul in care am fost alocat pentru echipa de la Core, iar in proiectul lor au folosit componetele noastre sau cele de la grup, mi-a fost foarte usor sa intervin pe proiect.
* 4. Imi place ca avem foarte putine conflicte cand facem merge intre branch-uri si le rezolvam rapid si cred ca se datoreaza faptului ca lucram organizat, iar aici, cred ca ne ajuta si tehnologia pe care o folosim si ma leg de punctul 3(nu-mi place, dar e misto; nu ca zic, dar vreau sa spun
* Andreea
* 1. constant struggle to find out what's right or wrong in this are /
* * 2. Internet Explorer leads us to some very dark places
* UX desigur
* Radu
* First contact with TPA, web components and IngWeb (emotii, ceva nou, etc)
* TPA visit + Carul cu bere (lamuriri, fun etc)
* Training session with WSB (excitment)
* Andra
* promptitudinea cu care raspund si incearca sa rezolve issue-urile noastre
* fie ca scriem pe mattermost/ bug pe gitlab (atunci cand thomas a gasit intr-o zi sau doua rezolvarea la un bug pe ie de exemplu) ,
* pe de alta parte aplicatia noastra are multe lucruri specifice de care trebuie sa ne ocupam noi si uneori nu se rezuma doar la un bug gasit la ei, ci mai degraba necesita gasirea unor workarounduri pe care sa le facem noi sa multumeasca pe toata lumea
* au venit de 2 ori la noi direct oamenii care lucreaza la librarie si au lucrat cot la cot cu noi ca sa ne arate cum sa plecam/ cum sa folosim [ pt ca aveam destule dubii la inceput].
* dorinta lor de a adopta ultimele tehnologii in firma si a atrage poate cati mai multi sa lucreze cu asta e foarte ok, mai ales intr-o firma care nu e neeaparat specializata pe tech (nu stiu exact cum sa explic aici sper ca m-ai inteles ) )
* dar care din pacate aduce dupa sine cateva neajunsuri ...siii aici ajung la internet exploder ) si anume criterii deja stabilite pe care trebuie sa le respectam,
* de care s-a tinut cont inca de la inceput (ex: trebuie sa fie compatibil cu ie),
* dar si unele de care ne-am lovit in timp (nu trebuie sa exista scroll in pagina, cum e scalaarea vietii din cauza iframe-urilor )

GIFS:
* Sunt pe narc daily doua despre ce inseamna sa lucrezi asa

The themes
* Inexperience and not much confidence in using untested solutions
* the quirkiness of IE 11
* Conflicting objectives and timelines for collaboration

Slides:

* Table of contents
* What’s with the title?
* The project
* The milestones and turning points
* Past, present and future
* Some lessons