modern trends in ui decoupling design
TRANSCRIPT
Achieving modularization in modern web applications
UI Decoupling DesignANDREA TINO modern trends in
in Engineering?
What is one of the most important Design Principles
/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]
‘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
Decoupling?How did we achieve
Ages of web development
1990-2000Mesozoic
2000-2010Paleolithic
2010-todayModern
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
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
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
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
Happy?Is everyone
Developer
yes
UI Designer
notreally
Happy?UI Designer
Why isn’t
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
/˄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]
concern separation
c + i = Disolation
decoupling
The missiong piece to achieve full decoupling is isolation.
The formula
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
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.
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