Training Webinar: Top front-end techniques for OutSystems

Top front-end techniques
for OutSystems
Free OutSystems webinar
18 August 2016
Source: http://goo.gl/uyRtWF

Top front-end techniques for OutSystems
Rúben Lumberjack Gonçalves
Head of Mobile & Front-End Experts @ OutSystems
@techrug
2

Disclaimer
! This is an extensive subject, so expect simplifications and homework !

Once upon a time…
YouCannotDoThisIn
OutSystems
5

Agenda
● What’s under the hood?
● Top front-end techniques
○ Best practices
○ Rediscovering the personal area
○ Changing the <head>
○ Browser support and testing
○ Cutting corners or how to avoid 1-click publish
● Fighting the dragon
5

What’s under the hood?
OutSystems front-end 101

OutSystems Platform
7

OutSystems Page
8

OutSystems Page - head
9

10

11

12
webblock css
platform css
theme css
page css

Adding CSS
13
In specific page In every page using
the web block
In every page that
is using the theme

Adding CSS
14
1
2
3
Tip
This is what enable
us to create enterprise
grade styleguides

Learn more about CSS
15
See chapter 4: http://goo.gl/HxyQQg

16

17
platform JS
webblock JS
page JS
injected JS

Adding JavaScript
18
In specific page In every page using
the web block
In every page
of the eSpace
_OSGlobalJS.js HomePage.js Line.js

Adding JavaScript
19
1
3
2

OutSystems body
20
Viewstate
EPA taskbox
(BPT)
Platform JS
Developer code

Recap
● JavaScript and CSS files are automatically added in the head
● Platform organizes resources in a specific order:
1. Meta tags – responsive, favicon, mobile web apps, SEO…
2. CSS files – web blocks, theme, page
3. JavaScript files – eSpace, web blocks, page
● All code is placed inside a <form>
21

Top front-end techniques
Applied to OutSystems Platform

Agenda
23
○ Best practices

Best practices
1. CSS
2. JavaScript
3. Assorted (like candies!)
24

Best practices - CSS
25
● Have code conventions
○ Create & enforce your code conventions
○ See example: https://goo.gl/uEkvvl, http://goo.gl/djF26t, http://goo.gl/We1yvt
○ Silk UI example:
■ one rule per line;
■ space between property and value, and semicolon at
the end of line;
■ ordered alphabetically;
■ whenever possible, make the animation in CSS
■ keep z-index values as low as possible
■ …
Tip
We’ll be creating a KB article
with the guidelines followed,
when creating Silk UI

26
● Avoid unnecessary vendor prefixes
Autoprefixer: https://autoprefixer.github.io/ Can I Use: https://caniuse.com/ http://shouldiprefix.com/

27
○ transform: -webkit-transform, -ms-transform
○ animation: -webkit-animation
○ display flex: names change with vendor
○ background with gradient: -webkit-gradient
○ calc: no prefix, but Android 4.4 can’t divide or multiply
○ box-shadow: no prefix
○ box-sizing: no prefix
○ transition: no prefix
Tip
Use Autoprefixer
and Can I Use for
correct prefixes.
Autoprefixer: https://autoprefixer.github.io/ Can I Use: https://caniuse.com/

28
● Avoid using ID selectors

29
○ Automatically generated
○ Depend on hierarchy of blocks
○ Use Classes instead

30
● Be aware of selectors performance
1. ID, e.g. #header
2. Class, e.g. .promo
3. Type, e.g. div
4. Adjacent sibling, e.g. h2 + p
5. Child, e.g. li > ul
6. Descendant, e.g. ul a
7. Universal, i.e. *
8. Attribute, e.g. [type="text"]
9. Pseudo-classes/-elements, e.g. a:hover
Less performant
Read more: http://goo.gl/KkdKLK

Top front-end techniques for OutSystems 31
See webinar: http://goo.gl/aiUlvb
Learn to measure performance

32
● Avoid defining CSS in web blocks or Pages
○ Leads to styles duplication
○ Hard to maintain and evolve applications
○ Impact in performance – number of files
17 CSS
25 JS
21 img
4 fonts

Learn performance techniques
33
See session: https://goo.gl/arvD3Q

34
● Organize your theme CSS
○ Create an Index

35
○ Create an Index
○ Separate CSS into sections

36
○ Create an Index
○ Add all media queries to end of file

37
○ Create an Index
○ Add all media queries to end of file
○ Using Silk UI, leave patterns CSS together
Responsive
Pattern

38
● Be aware of theme dependencies – will lead to @imports

39
● Be aware of theme dependencies – will lead to @imports
Tip
CSS is render blocking,
so avoid @imports, since
will delay page render
Sequential download

Top front-end techniques for OutSystems 40
See webinar: http://goo.gl/Qr4i50
Learn to architecture your CSS

41

Best practices - JavaScript
● Avoid global variables - Messi code
○ Non-locality
○ No Access Control
○ Memory allocation
But if you really must… then be explicit:
42
Read more: http://goo.gl/g1Z4Vn P.s. – I don’t care about football at all…

● Avoid global variables
● Avoid console.log pollution
43
Read more: http://goo.gl/rSBT5S

● Avoid doing animations with JavaScript
44
Read more: http://goo.gl/yhav2M

45
Read more: http://goo.gl/UpH68x
The only way to 60 fps

● Use platform jQuery ($)
46

● Use type and value comparison === vs ==
47
Avoid
Safer

● Use Object Module approach
○ To avoid global functions
○ To avoid global variables
48
Read more: http://goo.gl/NFYIWT

● Use Object Module approach
● Follow common JavaScript practices
○ w3schools - http://goo.gl/mIrWDF
○ Idiomatic - http://goo.gl/Hs6h47
49

Best practices - Assorted
● EPA taskbox
50
EPA taskbox
(BPT)

● Remove EPA taskbox if not in use
○ Remove programmatically
51

○ Remove programmatically
○ Add exception to a specific eSpace – https://yourenvironment/EPA_Taskbox/
52
See help: https://goo.gl/u9nqPr

● Checkout talk Delivering Mobile Apps that Perform
53
See session: https://goo.gl/arvD3Q

Agenda
54
○ Best practices

“the developer can then test his changes privately without affecting any other developer”
CSS and JavaScript are local
Personal Area
55

Personal Area
“the developer can then test his changes privately without affecting any other developer”
56

Personal Area - limitations
57
Changes to the following elements require
See platform help: http://goo.gl/VGD7aA

Agenda
○ Best practices
○ Changing the <head>
58

Changing the <head>
● HTTPRequestHandler
○ AddJavaScriptTag
○ AddStyleSheetTag
○ Add PostProcessingFilter
59

Changing the <head> like a boss
● HTTPRequestHandler
● IncludeJavascript_API
60

Agenda
○ Best practices
○ Changing the <head> like a boss
61

Browser support and testing
1. Ever increasing number of devices
62
Read more: http://goo.gl/YmLOn3

2. Identify target devices for market
63
Read more: http://goo.gl/apBVGF

2. Identify target devices for market
3. Test in target browsers / devices
64
BrowserStack: http://goo.gl/jwIuJM CrossBrowserTesting: http://goo.gl/cOkpE1

Agenda
○ Best practices
○ Changing the <head> like a boss
○ Cutting corners or how to avoid 1-click publish
65

Cutting corners
66
Mauro Vieira

How to avoid 1-click publish
● Tools of the trade
○ Sublime Text 3
○ Google Chrome
○ Xampp
○ Node JS
○ CSS Inject (chrome extension)
○ LiveReload (desktop + chrome extension)
67
Tip
Worry not, we’ll be creating
a post to explain step by
step how to do this.

Live demo
Where things will go wrong. Definitely.

Defeating the dragon
YouCannotDoThisInOutSystems

Rule of thumb…
70
If it can be done in the web technology…
Then, it can be done in
OutSystems

Great UIs
71
See webinar: http://goo.gl/3D2Xqm

Great UIs
72
See demo: https://goo.gl/NU78vt Download code: http://goo.gl/N5QNq7

Great UIs
73
See demo: https://goo.gl/NU78vt Download code: http://goo.gl/N5QNq7

Great UIs
74

Takeaways
Or things to keep in mind

Takeaways
76
● Front-end is no different in OutSystems
● Same techniques and approaches apply
● Leverage platform mechanisms, jQuery, HTTPRequestHandler, …
● Everything is possible, but with necessary care

Training Webinar: Top front-end techniques for OutSystems

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (16)

Similar to Training Webinar: Top front-end techniques for OutSystems

Similar to Training Webinar: Top front-end techniques for OutSystems (20)

More from OutSystems

More from OutSystems (20)

Recently uploaded

Recently uploaded (20)

Training Webinar: Top front-end techniques for OutSystems