Modern Trends in UI Decoupling Design
-
Upload
andrea-tino -
Category
Technology
-
view
252 -
download
0
Transcript of Modern Trends in UI Decoupling Design
![Page 1: Modern Trends in UI Decoupling Design](https://reader030.fdocument.pub/reader030/viewer/2022021509/5aad808b7f8b9a3a238b4b85/html5/thumbnails/1.jpg)
Achieving modularization in modern web applications
UI Decoupling DesignANDREA TINO modern trends in
![Page 2: Modern Trends in UI Decoupling Design](https://reader030.fdocument.pub/reader030/viewer/2022021509/5aad808b7f8b9a3a238b4b85/html5/thumbnails/2.jpg)
in Engineering?
What is one of the most important Design Principles
![Page 3: Modern Trends in UI Decoupling Design](https://reader030.fdocument.pub/reader030/viewer/2022021509/5aad808b7f8b9a3a238b4b85/html5/thumbnails/3.jpg)
/di:’k˄(ə)l/ Separate, disengage, or dissociate (something) from something else.[Oxford dic.]
Decoupling
The ability to separate one system into different components interacting together.[Engineering wise]
![Page 4: Modern Trends in UI Decoupling Design](https://reader030.fdocument.pub/reader030/viewer/2022021509/5aad808b7f8b9a3a238b4b85/html5/thumbnails/4.jpg)
‘93
PHP created by L. Lerdorf
CGI 1st definition
‘94
‘96
ASP 1.0 released (IIS 3.0)
‘97
ASP 2.0 released (IIS 4.0)
‘98
JSP released by SUN
00
ASP 3.0 released (IIS 4.0)
02
ASP.NET 1st releaseCSS MIME “text/css”
registered under RFC 2318
15
CSS Modules 1st commit
12
Webpack 1st release
Typescript 1st release
06
SASS 1st release
As browsers become the new platform, web development has rapidly evolved.
The web industry in 30 years
![Page 5: Modern Trends in UI Decoupling Design](https://reader030.fdocument.pub/reader030/viewer/2022021509/5aad808b7f8b9a3a238b4b85/html5/thumbnails/5.jpg)
Decoupling?How did we achieve
![Page 6: Modern Trends in UI Decoupling Design](https://reader030.fdocument.pub/reader030/viewer/2022021509/5aad808b7f8b9a3a238b4b85/html5/thumbnails/6.jpg)
Ages of web development
1990-2000Mesozoic
2000-2010Paleolithic
2010-todayModern
![Page 7: Modern Trends in UI Decoupling Design](https://reader030.fdocument.pub/reader030/viewer/2022021509/5aad808b7f8b9a3a238b4b85/html5/thumbnails/7.jpg)
UI Designer+
Developer
Interface and code mixed together. Caused the development of species of developers proficient in both UI and coding.Mesozoic
(Stone Age)Monolithic Development
Code and UI in the same place
An example in ASP <!DOCTYPE html><html><body><p> <%= “Hello ” + Request.QueryString( "name") %></p></body></html>
12345678910
![Page 8: Modern Trends in UI Decoupling Design](https://reader030.fdocument.pub/reader030/viewer/2022021509/5aad808b7f8b9a3a238b4b85/html5/thumbnails/8.jpg)
UI Des.DevUI Designer+Developer
Developers started evolving and adopting early traces of decoupling, a process which triggered their journey towards Homo-Sapiens.Lower
Paleolithic
(Early Bronze Age)Early human evolution
XHTML allowed s�le attributes
through which it was possible to s�le elements
Separa�ng content �om s�le
<!DOCTYPE html PUBLIC...><html><body><div bgolor=”#ccc”></div></body></html>
1234
<div class=”bgdiv”></div>
12
body > div.cont { background-color: #ccc;}
123
![Page 9: Modern Trends in UI Decoupling Design](https://reader030.fdocument.pub/reader030/viewer/2022021509/5aad808b7f8b9a3a238b4b85/html5/thumbnails/9.jpg)
UI Designer Developer
Interface and code separated in order to decouple UI from business logic. Different expertise required.Paleolithic
(Bronze Age)Code-Behind separation
Controls are exposed server-side
An example in ASP.NET (C#)
<%@Page CodeBehind=”Pg.cs” %><html><body><p runat=”server” ID=”Box”></p></body></html>
12345
public class Pg : Page { public void Page_Load() { this.Box.Text = “Hi”; }}
1234
Code-Behind classes process
biz-logic
![Page 10: Modern Trends in UI Decoupling Design](https://reader030.fdocument.pub/reader030/viewer/2022021509/5aad808b7f8b9a3a238b4b85/html5/thumbnails/10.jpg)
UI Designer Developer
App developer
Programmers have evolved into different spieces, developing in Javascript and using all possible different frameworks.Modernity
(Iron Age)All hail frameworks
Mul�-pla�orm development
Javascript to backend thanks to Node.js
Web assembly: xlang2js
compilers
SASS Compiler
Typescript compiler
Cordova
Webpack
CSS
SCSS
TS
JS
HTML
TS
SCSS
JSJS
![Page 11: Modern Trends in UI Decoupling Design](https://reader030.fdocument.pub/reader030/viewer/2022021509/5aad808b7f8b9a3a238b4b85/html5/thumbnails/11.jpg)
Happy?Is everyone
Developer
yes
UI Designer
notreally
![Page 12: Modern Trends in UI Decoupling Design](https://reader030.fdocument.pub/reader030/viewer/2022021509/5aad808b7f8b9a3a238b4b85/html5/thumbnails/12.jpg)
Happy?UI Designer
Why isn’t
![Page 13: Modern Trends in UI Decoupling Design](https://reader030.fdocument.pub/reader030/viewer/2022021509/5aad808b7f8b9a3a238b4b85/html5/thumbnails/13.jpg)
UI Designer(Daniel)
Other Designer(Stacy)
.grid { .head > tr { color: #ccc; } .foot { tr:nth-child(2n+1) { background-color: #000; } }}
12345678
.grid { .foot tr:nth-child(2n) { background-color: #efe; } .foot tr:nth-child(2n+1) { background-color: #999; }}
12345678
CSS was created to separate style from content. However CSS is open and can be used and abused by other solutions.
Stacy can intercept Daniel’s design and
change it!
Problem is CSS
![Page 14: Modern Trends in UI Decoupling Design](https://reader030.fdocument.pub/reader030/viewer/2022021509/5aad808b7f8b9a3a238b4b85/html5/thumbnails/14.jpg)
/˄isə’lei∫(ə)n/ The process or fact of isolating or being isolated.[Oxford dic.]
Isolation
The ability to group components and expose them under controlled conditions.[Engineering wise]
![Page 15: Modern Trends in UI Decoupling Design](https://reader030.fdocument.pub/reader030/viewer/2022021509/5aad808b7f8b9a3a238b4b85/html5/thumbnails/15.jpg)
concern separation
c + i = Disolation
decoupling
The missiong piece to achieve full decoupling is isolation.
The formula
![Page 16: Modern Trends in UI Decoupling Design](https://reader030.fdocument.pub/reader030/viewer/2022021509/5aad808b7f8b9a3a238b4b85/html5/thumbnails/16.jpg)
Available on GitHub, they allow isolation of styles in web applications, enabling a very good level of decoupling and encapsulation.
CSS Modules
Developer UI Designer
.logo { background-image: url(’./logo.svg’); width: 1.1em; height: 1.1em;}
123456
import styles from './logo.css';export class Logo { render() { return <p class= ”{styles.logo}”></p>; }}
1234567
Impor�ng s�lesheets
CSS is transpiled into another CSS �le where class
names are obfuscated
![Page 17: Modern Trends in UI Decoupling Design](https://reader030.fdocument.pub/reader030/viewer/2022021509/5aad808b7f8b9a3a238b4b85/html5/thumbnails/17.jpg)
Thanks to CSS Modules we can now reach full decoupling in UI control libraries.
Decoupling!Developer
UI Designer
SASS Compiler
Typescript compiler
Cordova
Webpack+
CSS Modules
CSS
SCSS
TS
JS
HTML
TS
SCSS
JSJS
App developer
ICSS
It is possible to build control libraries without letting one component’s CSS be improperly accessed by other controls.
Developers and designers can focus on their on code.
![Page 18: Modern Trends in UI Decoupling Design](https://reader030.fdocument.pub/reader030/viewer/2022021509/5aad808b7f8b9a3a238b4b85/html5/thumbnails/18.jpg)
Twitter: @_atinoE-Mail: [email protected]
This work is distributed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International license.
Cover: Bridging the future This work includes artworks designed by Freepik.com.
Oct 2017v1.0
Keywords#css #design #web #microsoft #development #javascript
Presentation infoDuration: 20 mins.Background: Technical (low)Audience: High school and University
Andrea TinoSoftware Engineer II