Top front-end techniques for OutSystems

Top front-end techniquesfor OutSystemsFree OutSystems webinar

18 August 2016

Source: http://goo.gl/uyRtWF

Top front-end techniques for OutSystems

Rúben Lumberjack GonçalvesHead 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

23

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 JSinjected 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

13

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 techniquesApplied 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 demoWhere things will go wrong. Definitely.

Defeating the dragonYouCannotDoThisInOutSystems


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

TakeawaysOr 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

Thank you

Software

Top front-end techniques for OutSystems