Scribd
Upload
14 views59 pages

In 1 Year

Uploaded by

keshavagrawal21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views59 pages

In 1 Year

Uploaded by

keshavagrawal21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 59

in 1 year

github.com/ijlee2
in_increments_in_increments

de_the_right_code_the_right_

ation_solid_foundation_solid

together_solving_together_so

_future_is_now_future_is_now
1
in
increments
Mission impossible.
1*
code
metrics
You rated me a six. I was like, “Damn.”
- Janelle Monáe
2
the right
code
Everybody will be dancing and be doing it right.
- Daft Punk
the right code

• Has minimum API

• Separates concerns

• Depends on few
2a
… has
minimum API
The best code is no code.
API
consumer reusable

github.com/ijlee2/ember-workshop
de.wikipedia.org/wiki/Eierlegende_Wollmilchsau
minimization

• Research current use cases

• Remove dependencies among arguments (minimize how many


tests need to be written)

• Remove rarely used arguments (cover the 80% case)


2b
… separates
concerns
You gotta keep 'em separated.
- The Offspring
API
consumer reusable

github.com/ijlee2/ember-workshop
accessibility

style inside container

test selectors

github.com/ijlee2/ember-workshop
data & translations accessibility

extra <div> to set style inside container


margin & padding

callback functions test selectors

github.com/ijlee2/ember-workshop
named blocks
File: A reusable component that consumes <Ui::Form::Field>
…attributes
File: A consumer of <Ui::Action>
2c
… depends
on few
You’ve got the remedy and I need it.
- French 79
stable

• Easy-to-follow code

• Documented (README, CONTRIBUTING, release notes)

• Tested

• Supported (releases are recent)


3
solid
foundation
Please take me down to steady ground.
- Julie Crochetière
3a
overhauling
lint
I promise to be different! I promise to be unique!
- Gorillaz
new setup

• lint, lint:fix, test

• --cache, concurrently

• Standardized configurations

• Relied on default as much as possible


recommended plugins

• @tsconfig/ember

• eslint-plugin-simple-import-sort

• eslint-plugin-typescript-sort-keys

• stylelint-order
leaf nodes

domain_1 domain_2 … domain_n

main app
leaf nodes

domain_1 domain_2 … domain_n

main app
leaf nodes

domain_1 domain_2 … domain_n

main app
bypass CI

"scripts": {

"_lint:js": "eslint . --cache",

"_lint:js:fix": "eslint . --fix",

"lint:js": "exit 0"

}
3b
spotting
blockers
Some blockers are more equal than others.
deprecation workflow
File: config/deprecation-workflow.js

github.com/mixonic/ember-cli-deprecation-workflow
deprecations

• implicit-injections (v4)

• this-property-fallback (v4)

• routing.transition-methods (v5)

deprecations.emberjs.com
packages

• ember-auto-import (v2)

• ember-modifier (v3.2.7)

• ember-template-lint (v5)

• eslint (v8)

• typescript (v4.8.2)
3c
short
(re)build
Gotta go fast.
- A hedgehog
tackle build

• Remove dead code

• Combine packages

• Remove cyclic dependencies

• Remove unused dependencies

• Simplify code consumed by many packages


tackle rebuild
File: ember-cli-build.js
4
solving
together
Things are better, so much better with two.
- Lenka
4a
refactors

Don’t you ever feel like, like you’ve had enough?


- Wolfmother
what really matters

• Write tests

• Rename things

• Make early exits

• Extract functions

• Remove dead code


write tests

Get started:

ember g component-test <name>

Also available are helper-test, modifier-test, service-test, etc.

cli.emberjs.com - CLI commands reference


write tests
crunchingnumbers.live / EmberFest 2019
rename things
make early exits
extract functions

crunchingnumbers.live - 3 Refactoring Techniques


remove dead code

Get started:

git grep -in <pattern>


4b
codemods

Everything everywhere all at once.


things to consider

• Upfront costs for manifold returns

• Edge cases due to lacking code standards

• Can I cover the 80% case?


@codemod-utils

blueprint-for-v2-addon ember-codemod-
(CLARK internal) args-to-signature

ember-codemod- ember-codemod-
pod-to-octane remove-ember-css-modules

ember-codemod-
type-css-modules
v1-to-v2

github.com/ijlee2/codemod-utils
@codemod-utils

Get started:

npx @codemod-utils/cli <arguments>

github.com/ijlee2/codemod-utils
4c
different
perspectives
I think I understand you but I don’t.
- OK Go
zdf.de/kultur - Sag’s mir, Unter Anderen, 13 Fragen
5
future
is now
Bending time.
- Bender Bending Rodríguez
polyfills

• ember-angle-bracket-invocation-polyfill

• ember-cached-decorator-polyfill

• ember-functions-as-helper-polyfill

• ember-in-element-polyfill

• ember-named-blocks-polyfill

• ember-on-modifier

• ember-unique-id-helper-polyfill
v1 addons

• Enable embroider-safe

• Enable embroider-optimized (skip if hard to do)

• Support Glint by creating addons/template-registry.ts

• Support <template>-tag by re-exporting the public API in


addons/index.{js,ts}
package registry

• Extracted packages from monorepo

• Converted addons to v2 format

• Introduced embroider-css-modules

• Supported Glint and <template>-tag

• Created test apps


in 1 year

github.com/ijlee2

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy