Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Design Systems and Component Based Frontend
Search
Bilal Çınarlı
June 27, 2019
Programming
0
110
Design Systems and Component Based Frontend
Bilal Çınarlı
June 27, 2019
Tweet
Share
More Decks by Bilal Çınarlı
See All by Bilal Çınarlı
Accessible By Default!
bcinarli
0
23
Aninda Yüklenen Uygulamalar
bcinarli
0
92
Iletisimin Mühendisligi
bcinarli
0
45
Independently together: better developer experience & App performance
bcinarli
1
430
Developer Experience: How happy are your engineers?
bcinarli
0
240
Micro Applications: Divide & Conquer
bcinarli
2
1k
Lightning Fast Web Applications
bcinarli
1
520
WebAssembly - is it the future for the Web?
bcinarli
0
110
Why Performance Matters
bcinarli
0
150
Other Decks in Programming
See All in Programming
ドメインイベント増えすぎ問題
h0r15h0
2
560
Jaspr Dart Web Framework 박제창 @Devfest 2024
itsmedreamwalker
0
150
各クラウドサービスにおける.NETの対応と見解
ymd65536
0
250
ATDDで素早く安定した デリバリを実現しよう!
tonnsama
1
1.9k
情報漏洩させないための設計
kubotak
5
1.3k
PHPカンファレンス 2024|共創を加速するための若手の技術挑戦
weddingpark
0
140
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
1
430
Stackless и stackful? Корутины и асинхронность в Go
lamodatech
0
1.3k
PicoRubyと暮らす、シェアハウスハック
ryosk7
0
220
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
630
functionalなアプローチで動的要素を排除する
ryopeko
1
200
ecspresso, ecschedule, lambroll を PipeCDプラグインとして動かしてみた (プロトタイプ) / Running ecspresso, ecschedule, and lambroll as PipeCD Plugins (prototype)
tkikuc
2
1.8k
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
We Have a Design System, Now What?
morganepeng
51
7.3k
Building Applications with DynamoDB
mza
93
6.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
The Invisible Side of Design
smashingmag
299
50k
Unsuck your backbone
ammeep
669
57k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
4 Signs Your Business is Dying
shpigford
182
22k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Transcript
Design Systems & Component Based Frontend
Bilal Çınarlı Frontend Architect Software Engineer @Adidas @bcinarli github.com/bcinarli bcinarli.com
None
Harmony from Intuit, GEL – Global Experience Language from BBC,
Material from Google, Lightning from Salesforce, AirBNB’s Visual Language, Joystick from EA, Fluent from Microsoft, Plasma from WeWork, Polaris from Shopify, Lonely Planet, Swarm from Meetup, Canvas from Hubspot …and aDL from Adidas
What is a design system?
A collection of reusable components, guided by clear standards, that
can be assembled together to build any number of applications.
None
A design system is a combination of style, components, and
voice.
It is scalable at any level
Provides consistency between different pages and applications
With the set of rules and guides, increases the efficiency
Enhances the teamwork and eases the on-boarding of new members
http://bit.do/yarnds
http://bit.do/adl_
Components
Components support levels of abstraction in an application. It is
layered and feature-based.
Individual components provide decoupling which leads to better unit testings
and stability.
Design system and Components combine mostly in UI layer where
your presentation occurs
Besides, components can also communicate with the data layer while
rendering our content.
…and with the standardisation, it improves quality.
None
How Popular Libraries Think?
Build encapsulated components that manage their own state, then compose
them to make complex UIs.
Components define areas of responsibility in your UI that let
you reuse these sets of UI functionality.
It’s an abstraction that allows us to build large-scale applications
composed of small, self-contained, and often reusable components.
But the mainly, they should have a responsibility over a
single part.
None
How to Organise?
Define your folder structure based on their functionalities
Think of everything is sort-of a pluggable component. In most
cases, when you remove it, you should expect no traces left.
// DON’T . !"" controllers | !"" cart.js | #""
checkout.js !"" models | !"" cart.js | #"" checkout.js #"" views !"" cart.pug #"" checkout.pug // DO . !"" cart | !"" index.js | #"" template.pug #"" checkout !"" index.js #"" template.pug
…and tests are a part of your components.
// add test specs . !"" cart | !"" index.js
| !"" test.spec.js | #"" template.pug #"" checkout !"" index.js !"" test.spec.js #"" template.pug
Separate config and scripts away from your components.
. !"" config | !"" index.js | #"" server.js !""
scripts | !"" build.sh | #"" post-install.sh !"" test | !"" index.js | #"" setup.spec.js !"" cart | !"" index.js | !"" test.spec.js | #"" template.pug #"" checkout !"" index.js !"" test.spec.js #"" template.pug
Keep HTML and CSS separate in your source code and
never inline manually
// DON’T <p style="margin: 10px 0; padding: 0;">Hello World! </p>
// DO .content-text { margin: 10px 0; padding: 0; } <p class="content- text">Hello World!</p>
Always think about specificity in CSS, try to avoid creating
specific selectors
// DON’T #main .article .title span { font-size: 32px; font-weight:
bold; } // DO .main-article-title { font-size: 32px; font-weight: bold; }
Do not write the code you are going to overwrite
// DON’T .content { display: flex; max-width: 1280px; margin: 0
auto; } .article { width: 900px; } .supplementary { width: 380px; } @media screen and (min-width: 48.0625em) and (max-width: 64em) { .article { width: 644px; } } @media screen and (max-width: 48em) { .content { flex-direction: column; } .article, .supplementary { width: 100%; } } // DO .content { max-width: 1280px; margin: 0 auto; } @media screen and (min-width: 48.0625em) { .content { display: flex; } .article { flex: 1; } .supplementary { width: 380px; } }
A way to unify different frameworks?
Web components are a set of web platform APIs that
allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps.
Custom components and widgets build on the Web Component standards,
will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.
<script type="module" src=“components/nav/app- drawer“></script> <app-drawer raised class=“indigo">raised</app-drawer>
<script> class AppDrawer extends HTMLElement {...} window.customElements.define('app-drawer', AppDrawer); </script> <app-drawer></app-drawer>
Good part, all JS frameworks outputs to HTML. Theoretically, we
can use any popular JS library to create Web Components
What is more?
Having self-contained, reusable components helps to turn you app to
micro frontends
… that can have independent deployment, build, coding
… leads to autonomous teams
… and you can have a shell that orchestrates which
micro frontend to load
… with the “Best Friend of Frontend"
Your components should not know what the dependencies are in
behind the curtains you are using.
It should only aware of which functions are available for
a particular action.
Every dependency comes with a technical debt for the future.
Thank you @bcinarli