How to migrate legacy frontend?

July 29, 2022

130

How to migrate legacy frontend?

Igor Halfeld

July 29, 2022

More Decks by Igor Halfeld

See All by Igor Halfeld

Modular monoliths with fastify

0

200

Patterns for perfect components in Vue.js

0

120

Clean Architecture no Front-end (update 2021-05-11)

0

67

Step by step I followed a career in software

0

710

Using AI to create memes

0

530

Deninho, the TS children

1

220

Micro Front-ends, what they don't tell you

0

400

CSS in JavaScripto, the anti-pattern that is good

1

110

Front-end Clean Architecture

2

290

Other Decks in Programming

See All in Programming

AI-DLC 入門〜AIコーディングの本質は「コード」ではなく「構造」〜 / Introduction to AI-DLC: The Essence of AI Coding Is Not “Code” but “Structure”

PRO

0

190

Ruby and LLM Ecosystem 2nd

1

1.4k

モックわからないマン卒業記 ~振る舞いを起点に見直した、フロントエンドテストにおけるモックの使いどころ~

3

440

安いハードウェアでVulkan

1

870

生成 AI 時代のスナップショットテストってやつを見せてあげますよ（α版）

0

340

20260315 AWSなんもわからん🥲

2

180

Symfonyの特性(設計思想)を手軽に活かす特性(trait)

0

120

2026-03-27 #terminalnight 変数展開とコマンド展開でターミナル作業をスマートにする方法

0

280

「接続」—パフォーマンスチューニングの最後の一手〜点と点を結ぶ、その一瞬のために〜

5

2.4k

VueエンジニアがReactを触って感じた_設計の違い

0

120

脱雰囲気実装！AgentCoreを良い感じにWEBアプリケーションに組み込むために

3

430

20260320登壇資料

0

150

Featured

See All Featured

CSS Pre-Processors: Stylus, Less & Sass

360

30k

<Decoding/> the Language of Devs - We Love SEO 2024

1

170

Agile Actions for Facilitating Distributed Teams - ADO2019

0

170

Building AI with AI

PRO

1

850

Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024

1

1.9k

The Hidden Cost of Media on the Web [PixelPalooza 2025]

2

260

The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024

27

3.4k

0

510

Lightning Talk: Beautiful Slides for Beginners

PRO

1

500

Code Reviewing Like a Champion

528

40k

Collaborative Software Design: How to facilitate domain modelling decisions

0

190

Designing for Performance

611

70k

Transcript

Como migrar front-end legado? 💩
Igor Halfeld Software Engineer igorhalfeld.com - @igorhalfeld
treinamento.vuejsbrasil.org
70% negócio & 30% tech
Tudo é sobre produto!
A grande ilusão…
Tipos de projeto legado 😌
React com Hooks e Prop Types
Vue 1 com Sass
React com Class Component e Prop Types
Angular 1 e sass
jQuery com bootstrap
Em resumo, todos já caíram ou vão eventualmente caindo em
um projeto com código legado
Complexidade instrumental vs Complexidade inerente
None
Escrever código é uma forma de otimizar processos
Código legado só é ruim se você tem que mexer
nele 👀
Débito técnico é ruim?
Vamos simular um usecase
None
- Login - Header - Menu - Conteúdo
Como? 😏
None
- Login - Header - Menu - Conteúdo
Nginx 😍
Testes E2E (cypress) do que for ser refatorado
Nginx App 1 Front 2
None
None
None
None
*Foco no problema. *Estratégico sempre antes do operacional. *Tecnologia nova
é legal, mas o básico muitas das vezes já funciona (boringtechnology.club).
igorhalfeld.com - @igorhalfeld