SlideShare a Scribd company logo
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 !
Top front-end techniques for OutSystems
Once upon a time…
YouCannotDoThisIn
OutSystems
5
Top front-end techniques for OutSystems
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
Top front-end techniques for OutSystems
OutSystems Platform
7
Top front-end techniques for OutSystems
OutSystems Page
8
Top front-end techniques for OutSystems
OutSystems Page - head
9
Top front-end techniques for OutSystems
OutSystems Page - head
10
Top front-end techniques for OutSystems
OutSystems Page - head
11
Top front-end techniques for OutSystems
OutSystems Page - head
12
webblock css
platform css
theme css
page css
Top front-end techniques for OutSystems
Adding CSS
13
In specific page In every page using
the web block
In every page that
is using the theme
Top front-end techniques for OutSystems
Adding CSS
14
1
2
3
Tip
This is what enable
us to create enterprise
grade styleguides
Top front-end techniques for OutSystems
Learn more about CSS
15
See chapter 4: http://goo.gl/HxyQQg
Top front-end techniques for OutSystems
OutSystems Page - head
16
Top front-end techniques for OutSystems
OutSystems Page - head
17
platform JS
webblock JS
page JS
injected JS
Top front-end techniques for OutSystems
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
Top front-end techniques for OutSystems
Adding JavaScript
19
1
3
2
Top front-end techniques for OutSystems
OutSystems body
20
Viewstate
EPA taskbox
(BPT)
Platform JS
Developer code
Top front-end techniques for OutSystems
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
Top front-end techniques for OutSystems
Agenda
● What’s under the hood?
● Top front-end techniques
23
○ Best practices
Top front-end techniques for OutSystems
Best practices
1. CSS
2. JavaScript
3. Assorted (like candies!)
24
Top front-end techniques for OutSystems
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
Top front-end techniques for OutSystems
Best practices - CSS
26
● Have code conventions
● Avoid unnecessary vendor prefixes
Autoprefixer: https://autoprefixer.github.io/ Can I Use: https://caniuse.com/ http://shouldiprefix.com/
Top front-end techniques for OutSystems
Best practices - CSS
27
● Have code conventions
● Avoid unnecessary vendor prefixes
○ 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/
Top front-end techniques for OutSystems
Best practices - CSS
28
● Have code conventions
● Avoid unnecessary vendor prefixes
● Avoid using ID selectors
Top front-end techniques for OutSystems
Best practices - CSS
29
● Have code conventions
● Avoid unnecessary vendor prefixes
● Avoid using ID selectors
○ Automatically generated
○ Depend on hierarchy of blocks
○ Use Classes instead
Top front-end techniques for OutSystems
Best practices - CSS
30
● Have code conventions
● Avoid unnecessary vendor prefixes
● Avoid using ID selectors
● 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
Top front-end techniques for OutSystems
Best practices - CSS
32
● Have code conventions
● Avoid unnecessary vendor prefixes
● Avoid using ID selectors
● Be aware of selectors performance
● 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
Top front-end techniques for OutSystems
Learn performance techniques
33
See session: https://goo.gl/arvD3Q
Top front-end techniques for OutSystems
Best practices - CSS
34
● Have code conventions
● Avoid unnecessary vendor prefixes
● Avoid using ID selectors
● Be aware of selectors performance
● Avoid defining CSS in web blocks or Pages
● Organize your theme CSS
○ Create an Index
Top front-end techniques for OutSystems
Best practices - CSS
35
● Have code conventions
● Avoid unnecessary vendor prefixes
● Avoid using ID selectors
● Be aware of selectors performance
● Avoid defining CSS in web blocks or Pages
● Organize your theme CSS
○ Create an Index
○ Separate CSS into sections
Top front-end techniques for OutSystems
Best practices - CSS
36
● Have code conventions
● Avoid unnecessary vendor prefixes
● Avoid using ID selectors
● Be aware of selectors performance
● Avoid defining CSS in web blocks or Pages
● Organize your theme CSS
○ Create an Index
○ Separate CSS into sections
○ Add all media queries to end of file
Top front-end techniques for OutSystems
Best practices - CSS
37
● Have code conventions
● Avoid unnecessary vendor prefixes
● Avoid using ID selectors
● Be aware of selectors performance
● Avoid defining CSS in web blocks or Pages
● Organize your theme CSS
○ Create an Index
○ Separate CSS into sections
○ Add all media queries to end of file
○ Using Silk UI, leave patterns CSS together
Responsive
Pattern
Top front-end techniques for OutSystems
Best practices - CSS
38
● Have code conventions
● Avoid unnecessary vendor prefixes
● Avoid using ID selectors
● Be aware of selectors performance
● Avoid defining CSS in web blocks or Pages
● Organize your theme CSS
● Be aware of theme dependencies – will lead to @imports
Top front-end techniques for OutSystems
Best practices - CSS
39
● Have code conventions
● Avoid unnecessary vendor prefixes
● Avoid using ID selectors
● Be aware of selectors performance
● Avoid defining CSS in web blocks or Pages
● Organize your theme CSS
● 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
Top front-end techniques for OutSystems
Best practices - CSS
41
Top front-end techniques for OutSystems
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…
Top front-end techniques for OutSystems
Best practices - JavaScript
● Avoid global variables
● Avoid console.log pollution
43
Read more: http://goo.gl/rSBT5S
Top front-end techniques for OutSystems
Best practices - JavaScript
● Avoid global variables
● Avoid console.log pollution
● Avoid doing animations with JavaScript
44
Read more: http://goo.gl/yhav2M
Top front-end techniques for OutSystems
Best practices - JavaScript
● Avoid global variables
● Avoid console.log pollution
● Avoid doing animations with JavaScript
45
Read more: http://goo.gl/UpH68x
The only way to 60 fps
Top front-end techniques for OutSystems
Best practices - JavaScript
● Avoid global variables
● Avoid console.log pollution
● Avoid doing animations with JavaScript
● Use platform jQuery ($)
46
Top front-end techniques for OutSystems
Best practices - JavaScript
● Avoid global variables
● Avoid console.log pollution
● Avoid doing animations with JavaScript
● Use platform jQuery ($)
● Use type and value comparison === vs ==
47
Avoid
Safer
Top front-end techniques for OutSystems
Best practices - JavaScript
● Avoid global variables
● Avoid console.log pollution
● Avoid doing animations with JavaScript
● Use platform jQuery ($)
● Use type and value comparison === vs ==
● Use Object Module approach
○ To avoid global functions
○ To avoid global variables
48
Read more: http://goo.gl/NFYIWT
Top front-end techniques for OutSystems
Best practices - JavaScript
● Avoid global variables
● Avoid console.log pollution
● Avoid doing animations with JavaScript
● Use platform jQuery ($)
● Use type and value comparison === vs ==
● Use Object Module approach
● Follow common JavaScript practices
○ w3schools - http://goo.gl/mIrWDF
○ Idiomatic - http://goo.gl/Hs6h47
49
Top front-end techniques for OutSystems
Best practices - Assorted
● EPA taskbox
50
EPA taskbox
(BPT)
Top front-end techniques for OutSystems
Best practices - Assorted
● Remove EPA taskbox if not in use
○ Remove programmatically
51
Top front-end techniques for OutSystems
Best practices - Assorted
● Remove EPA taskbox if not in use
○ Remove programmatically
○ Add exception to a specific eSpace – https://yourenvironment/EPA_Taskbox/
52
See help: https://goo.gl/u9nqPr
Top front-end techniques for OutSystems
Best practices - Assorted
● Remove EPA taskbox if not in use
● Checkout talk Delivering Mobile Apps that Perform
53
See session: https://goo.gl/arvD3Q
Top front-end techniques for OutSystems
Agenda
● What’s under the hood?
● Top front-end techniques
54
○ Best practices
○ Rediscovering the personal area
Top front-end techniques for OutSystems
“the developer can then test his changes privately without affecting any other developer”
CSS and JavaScript are local
Personal Area
55
Top front-end techniques for OutSystems
Personal Area
“the developer can then test his changes privately without affecting any other developer”
56
Top front-end techniques for OutSystems
Personal Area - limitations
57
Changes to the following elements require
See platform help: http://goo.gl/VGD7aA
Top front-end techniques for OutSystems
Agenda
● What’s under the hood?
● Top front-end techniques
○ Best practices
○ Rediscovering the personal area
○ Changing the <head>
58
Top front-end techniques for OutSystems
Changing the <head>
● HTTPRequestHandler
○ AddJavaScriptTag
○ AddStyleSheetTag
○ Add PostProcessingFilter
59
Top front-end techniques for OutSystems
Changing the <head> like a boss
● HTTPRequestHandler
● IncludeJavascript_API
60
Top front-end techniques for OutSystems
Agenda
● What’s under the hood?
● Top front-end techniques
○ Best practices
○ Rediscovering the personal area
○ Changing the <head> like a boss
○ Browser support and testing
61
Top front-end techniques for OutSystems
Browser support and testing
1. Ever increasing number of devices
62
Read more: http://goo.gl/YmLOn3
Top front-end techniques for OutSystems
Browser support and testing
1. Ever increasing number of devices
2. Identify target devices for market
63
Read more: http://goo.gl/apBVGF
Top front-end techniques for OutSystems
Browser support and testing
1. Ever increasing number of devices
2. Identify target devices for market
3. Test in target browsers / devices
64
BrowserStack: http://goo.gl/jwIuJM CrossBrowserTesting: http://goo.gl/cOkpE1
Top front-end techniques for OutSystems
Agenda
● What’s under the hood?
● Top front-end techniques
○ Best practices
○ Rediscovering the personal area
○ Changing the <head> like a boss
○ Browser support and testing
○ Cutting corners or how to avoid 1-click publish
65
Top front-end techniques for OutSystems
Cutting corners
66
Mauro Vieira
Top front-end techniques for OutSystems
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
Top front-end techniques for OutSystems
Rule of thumb…
70
If it can be done in the web technology…
Then, it can be done in
OutSystems
Top front-end techniques for OutSystems
Great UIs
71
See webinar: http://goo.gl/3D2Xqm
Top front-end techniques for OutSystems
Great UIs
72
See demo: https://goo.gl/NU78vt Download code: http://goo.gl/N5QNq7
Top front-end techniques for OutSystems
Great UIs
73
See demo: https://goo.gl/NU78vt Download code: http://goo.gl/N5QNq7
Top front-end techniques for OutSystems
Great UIs
74
Takeaways
Or things to keep in mind
Top front-end techniques for OutSystems
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

More Related Content

What's hot (20)

PPTX
OutSystems Tricks & Tips for Complex UI Integrations
OutSystems
 
PPTX
Training Webinar: Detect Performance Bottlenecks of Applications
OutSystems
 
PPTX
Extending OutSystems with Javascript
RitaDias72
 
PPTX
Integrate OutSystems With Office 365
OutSystems
 
PPTX
0 to 60 With Outsystems
OutSystems
 
PPTX
Hardcore CSS Made Easy
José Rosário
 
PPTX
BPM Patterns & Best Practices with OutSystems BPT
Gonçalo Borrêga
 
PPTX
Tenants: A Look Behind the Scenes
OutSystems
 
PPTX
Application Lifetime Management
OutSystems Technical Knowledge
 
PDF
Training Webinar: Fitting OutSystems applications into Enterprise Architecture
OutSystems
 
PPTX
Create Amazing Reports in OutSystems
OutSystems
 
PPTX
Accessibility with OutSystems
Bruno Marcelino
 
PPTX
What Is Light BPT and How Can You Use it for Parallel Processing?
OutSystems
 
PPTX
Testing With OutSystems
OutSystems
 
PPTX
OutSystems Platform Troubleshooting
OutSystems Technical Knowledge
 
PDF
Building frameworks: from concept to completion
Ruben Goncalves
 
PPTX
Using Processes and Timers for Long-Running Asynchronous Tasks
OutSystems
 
PDF
Technical Webinar: By the (Play) Book: The Agile Practice at OutSystems
OutSystems
 
PPTX
Launching a BPT Process on Entity Update
OutSystems
 
PDF
OutSystems Webinar - Building a Live Style Guide
Daniel Reis
 
OutSystems Tricks & Tips for Complex UI Integrations
OutSystems
 
Training Webinar: Detect Performance Bottlenecks of Applications
OutSystems
 
Extending OutSystems with Javascript
RitaDias72
 
Integrate OutSystems With Office 365
OutSystems
 
0 to 60 With Outsystems
OutSystems
 
Hardcore CSS Made Easy
José Rosário
 
BPM Patterns & Best Practices with OutSystems BPT
Gonçalo Borrêga
 
Tenants: A Look Behind the Scenes
OutSystems
 
Application Lifetime Management
OutSystems Technical Knowledge
 
Training Webinar: Fitting OutSystems applications into Enterprise Architecture
OutSystems
 
Create Amazing Reports in OutSystems
OutSystems
 
Accessibility with OutSystems
Bruno Marcelino
 
What Is Light BPT and How Can You Use it for Parallel Processing?
OutSystems
 
Testing With OutSystems
OutSystems
 
OutSystems Platform Troubleshooting
OutSystems Technical Knowledge
 
Building frameworks: from concept to completion
Ruben Goncalves
 
Using Processes and Timers for Long-Running Asynchronous Tasks
OutSystems
 
Technical Webinar: By the (Play) Book: The Agile Practice at OutSystems
OutSystems
 
Launching a BPT Process on Entity Update
OutSystems
 
OutSystems Webinar - Building a Live Style Guide
Daniel Reis
 

Viewers also liked (14)

PDF
Training Webinar - Wireframing made easy
OutSystems
 
PDF
Training Webinars - Secret hacks for OutSystems 10
OutSystems
 
PDF
Sync or swim: the challenge of complex offline apps
OutSystems
 
PPTX
OutSystems - Bimodal Bakeoff
OutSystems
 
PPTX
OutSystems - Go Fast or Go Home
OutSystems
 
PDF
State of application development - 2017 research report
OutSystems
 
PPTX
OutSystems - Digital Realities Webinar
OutSystems
 
PPTX
Training Webinar: Enterprise application performance with distributed caching
OutSystems
 
PDF
Training Webinar: Cover your bases - a security webinar
OutSystems
 
PPTX
Training Webinar: Effective Platform Server Monitoring
OutSystems
 
PPTX
Training Webinar: Enterprise application performance with server push technol...
OutSystems
 
PDF
App Development Disrupted: Answers and results from the 2017 State Of App Dev...
OutSystems
 
PDF
Training Webinar: From a bad to an awesome user experience - Training Webinar
OutSystems
 
PDF
Outsystems_Brochure_Web
Steve Rotter
 
Training Webinar - Wireframing made easy
OutSystems
 
Training Webinars - Secret hacks for OutSystems 10
OutSystems
 
Sync or swim: the challenge of complex offline apps
OutSystems
 
OutSystems - Bimodal Bakeoff
OutSystems
 
OutSystems - Go Fast or Go Home
OutSystems
 
State of application development - 2017 research report
OutSystems
 
OutSystems - Digital Realities Webinar
OutSystems
 
Training Webinar: Enterprise application performance with distributed caching
OutSystems
 
Training Webinar: Cover your bases - a security webinar
OutSystems
 
Training Webinar: Effective Platform Server Monitoring
OutSystems
 
Training Webinar: Enterprise application performance with server push technol...
OutSystems
 
App Development Disrupted: Answers and results from the 2017 State Of App Dev...
OutSystems
 
Training Webinar: From a bad to an awesome user experience - Training Webinar
OutSystems
 
Outsystems_Brochure_Web
Steve Rotter
 
Ad

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

PDF
Front-End Fun: How to finally work with designers!
helenalozano6
 
PDF
Boston Web Performance Meetup: The Render Chain and You
mattringel
 
PPTX
Delivering Mobile Apps That Perform
Ruben Goncalves
 
PDF
What is the next step for a front end beginner
Hsuan Fu Lien
 
PPTX
T3CMD19 - Day 2 - Performance
TYPO3 GmbH
 
PDF
960 grid psd
Raju Nag
 
PDF
Beyond HTML Exploring Advanced Techniques in Website Development.pdf
BitCot
 
KEY
Front-end style guides - fronteers @ WHITE (30/08/12)
Stijn Janssen
 
PPTX
Comprehensive Overview of Front-End Services
Catherine William
 
PDF
Is everything we used to do wrong?
Russ Weakley
 
PPTX
OutSystems: A more efficient way to build apps!
Russ Fustino
 
PPTX
Chandu.pptxhuuuuuuyyygfddssdfyuijhgghujjhhhhg
chch12775
 
PDF
Frontend performance on the web | Presentation @ecommercecamp 2019
dreistromland
 
PDF
7 secrets of performance oriented front end development services
Katy Slemon
 
PPTX
Web Development In 2018
Traversy Media
 
PDF
Frontend++
Alexander Roche
 
PDF
Improve Your Frontend Agility with Proven Optimization Methods
Inexture Solutions
 
PPTX
web development in 2024 - website development
Goa App
 
PDF
Ajax Performance Tuning and Best Practices
Doris Chen
 
PDF
Design system for new O2 CRM and web apps
Czech Design Systems Community
 
Front-End Fun: How to finally work with designers!
helenalozano6
 
Boston Web Performance Meetup: The Render Chain and You
mattringel
 
Delivering Mobile Apps That Perform
Ruben Goncalves
 
What is the next step for a front end beginner
Hsuan Fu Lien
 
T3CMD19 - Day 2 - Performance
TYPO3 GmbH
 
960 grid psd
Raju Nag
 
Beyond HTML Exploring Advanced Techniques in Website Development.pdf
BitCot
 
Front-end style guides - fronteers @ WHITE (30/08/12)
Stijn Janssen
 
Comprehensive Overview of Front-End Services
Catherine William
 
Is everything we used to do wrong?
Russ Weakley
 
OutSystems: A more efficient way to build apps!
Russ Fustino
 
Chandu.pptxhuuuuuuyyygfddssdfyuijhgghujjhhhhg
chch12775
 
Frontend performance on the web | Presentation @ecommercecamp 2019
dreistromland
 
7 secrets of performance oriented front end development services
Katy Slemon
 
Web Development In 2018
Traversy Media
 
Frontend++
Alexander Roche
 
Improve Your Frontend Agility with Proven Optimization Methods
Inexture Solutions
 
web development in 2024 - website development
Goa App
 
Ajax Performance Tuning and Best Practices
Doris Chen
 
Design system for new O2 CRM and web apps
Czech Design Systems Community
 
Ad

More from OutSystems (20)

PPTX
Innovating at the Speed of Business in the High-Bandwidth World of Digital Media
OutSystems
 
PPTX
Beyond “Location”: Informing Real-Estate Decisions Through Innovative Technology
OutSystems
 
PPTX
Beyond Digital Transformation: A Mandate for Disruptive Innovation in the Age...
OutSystems
 
PPTX
From Core Systems to Mobile Apps: Digital Transformation from the Inside-Out
OutSystems
 
PPTX
Orchestrating the Art of the Impossible Using Low-Code to Automate Manual Wor...
OutSystems
 
PPTX
Fast and Furious: Modernizing Clinical Application
OutSystems
 
PPTX
Enrich Visually Google Map Information With Layers
OutSystems
 
PPTX
Unattended OutSystems Installation
OutSystems
 
PPTX
Speed up Development by Turning Web Blocks Into First-Class Citizens
OutSystems
 
PPTX
Responsive Ui with Realtime Database
OutSystems
 
PPTX
RADS - Rapid Application Design Sprint
OutSystems
 
PPTX
Pragmatic Innovation
OutSystems
 
PPTX
Troubleshooting Dashboard Performance
OutSystems
 
PPTX
No API? No Problem! Let the Robot Do Your Work! Web Scraping and Automation W...
OutSystems
 
PPTX
Neo in Wonderland: Essential Tools for an Outsystems Architect
OutSystems
 
PPTX
Measure Customer Experience of Your OutSystems Web and Mobile Applications
OutSystems
 
PPTX
Link Users to Your Specific Page in a Mobile App With Deeplinks
OutSystems
 
PPTX
Setting up a Tech Innovation Lab in a Traditional Grocery Retail Environment
OutSystems
 
PPTX
Intro to the Data Grid
OutSystems
 
PPTX
How to Attract and Train Talent in Highly Competitive Markets
OutSystems
 
Innovating at the Speed of Business in the High-Bandwidth World of Digital Media
OutSystems
 
Beyond “Location”: Informing Real-Estate Decisions Through Innovative Technology
OutSystems
 
Beyond Digital Transformation: A Mandate for Disruptive Innovation in the Age...
OutSystems
 
From Core Systems to Mobile Apps: Digital Transformation from the Inside-Out
OutSystems
 
Orchestrating the Art of the Impossible Using Low-Code to Automate Manual Wor...
OutSystems
 
Fast and Furious: Modernizing Clinical Application
OutSystems
 
Enrich Visually Google Map Information With Layers
OutSystems
 
Unattended OutSystems Installation
OutSystems
 
Speed up Development by Turning Web Blocks Into First-Class Citizens
OutSystems
 
Responsive Ui with Realtime Database
OutSystems
 
RADS - Rapid Application Design Sprint
OutSystems
 
Pragmatic Innovation
OutSystems
 
Troubleshooting Dashboard Performance
OutSystems
 
No API? No Problem! Let the Robot Do Your Work! Web Scraping and Automation W...
OutSystems
 
Neo in Wonderland: Essential Tools for an Outsystems Architect
OutSystems
 
Measure Customer Experience of Your OutSystems Web and Mobile Applications
OutSystems
 
Link Users to Your Specific Page in a Mobile App With Deeplinks
OutSystems
 
Setting up a Tech Innovation Lab in a Traditional Grocery Retail Environment
OutSystems
 
Intro to the Data Grid
OutSystems
 
How to Attract and Train Talent in Highly Competitive Markets
OutSystems
 

Recently uploaded (20)

PDF
Step-by-Step Guide to Install SAP HANA Studio | Complete Installation Tutoria...
SAP Vista, an A L T Z E N Company
 
PDF
System Center 2025 vs. 2022; What’s new, what’s next_PDF.pdf
Q-Advise
 
PPTX
TRAVEL APIs | WHITE LABEL TRAVEL API | TOP TRAVEL APIs
philipnathen82
 
PPTX
classification of computer and basic part of digital computer
ravisinghrajpurohit3
 
PDF
Applitools Platform Pulse: What's New and What's Coming - July 2025
Applitools
 
PDF
Troubleshooting Virtual Threads in Java!
Tier1 app
 
PDF
AWS_Agentic_AI_in_Indian_BFSI_A_Strategic_Blueprint_for_Customer.pdf
siddharthnetsavvies
 
PDF
How Agentic AI Networks are Revolutionizing Collaborative AI Ecosystems in 2025
ronakdubey419
 
PPTX
slidesgo-unlocking-the-code-the-dynamic-dance-of-variables-and-constants-2024...
kr2589474
 
PPTX
Employee salary prediction using Machine learning Project template.ppt
bhanuk27082004
 
PDF
advancepresentationskillshdhdhhdhdhdhhfhf
jasmenrojas249
 
PDF
Generating Union types w/ Static Analysis
K. Matthew Dupree
 
PPTX
GALILEO CRS SYSTEM | GALILEO TRAVEL SOFTWARE
philipnathen82
 
PDF
Virtual Threads in Java: A New Dimension of Scalability and Performance
Tier1 app
 
PPTX
Explanation about Structures in C language.pptx
Veeral Rathod
 
PPTX
Contractor Management Platform and Software Solution for Compliance
SHEQ Network Limited
 
PDF
Salesforce Pricing Update 2025: Impact, Strategy & Smart Cost Optimization wi...
GetOnCRM Solutions
 
PDF
Why Are More Businesses Choosing Partners Over Freelancers for Salesforce.pdf
Cymetrix Software
 
PDF
MiniTool Power Data Recovery Crack New Pre Activated Version Latest 2025
imang66g
 
PDF
WatchTraderHub - Watch Dealer software with inventory management and multi-ch...
WatchDealer Pavel
 
Step-by-Step Guide to Install SAP HANA Studio | Complete Installation Tutoria...
SAP Vista, an A L T Z E N Company
 
System Center 2025 vs. 2022; What’s new, what’s next_PDF.pdf
Q-Advise
 
TRAVEL APIs | WHITE LABEL TRAVEL API | TOP TRAVEL APIs
philipnathen82
 
classification of computer and basic part of digital computer
ravisinghrajpurohit3
 
Applitools Platform Pulse: What's New and What's Coming - July 2025
Applitools
 
Troubleshooting Virtual Threads in Java!
Tier1 app
 
AWS_Agentic_AI_in_Indian_BFSI_A_Strategic_Blueprint_for_Customer.pdf
siddharthnetsavvies
 
How Agentic AI Networks are Revolutionizing Collaborative AI Ecosystems in 2025
ronakdubey419
 
slidesgo-unlocking-the-code-the-dynamic-dance-of-variables-and-constants-2024...
kr2589474
 
Employee salary prediction using Machine learning Project template.ppt
bhanuk27082004
 
advancepresentationskillshdhdhhdhdhdhhfhf
jasmenrojas249
 
Generating Union types w/ Static Analysis
K. Matthew Dupree
 
GALILEO CRS SYSTEM | GALILEO TRAVEL SOFTWARE
philipnathen82
 
Virtual Threads in Java: A New Dimension of Scalability and Performance
Tier1 app
 
Explanation about Structures in C language.pptx
Veeral Rathod
 
Contractor Management Platform and Software Solution for Compliance
SHEQ Network Limited
 
Salesforce Pricing Update 2025: Impact, Strategy & Smart Cost Optimization wi...
GetOnCRM Solutions
 
Why Are More Businesses Choosing Partners Over Freelancers for Salesforce.pdf
Cymetrix Software
 
MiniTool Power Data Recovery Crack New Pre Activated Version Latest 2025
imang66g
 
WatchTraderHub - Watch Dealer software with inventory management and multi-ch...
WatchDealer Pavel
 

Training Webinar: Top front-end techniques for OutSystems

  • 1. Top front-end techniques for OutSystems Free OutSystems webinar 18 August 2016 Source: http://goo.gl/uyRtWF
  • 2. Top front-end techniques for OutSystems Rúben Lumberjack Gonçalves Head of Mobile & Front-End Experts @ OutSystems @techrug 2
  • 3. Disclaimer ! This is an extensive subject, so expect simplifications and homework !
  • 4. Top front-end techniques for OutSystems Once upon a time… YouCannotDoThisIn OutSystems 5
  • 5. Top front-end techniques for OutSystems 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
  • 6. What’s under the hood? OutSystems front-end 101
  • 7. Top front-end techniques for OutSystems OutSystems Platform 7
  • 8. Top front-end techniques for OutSystems OutSystems Page 8
  • 9. Top front-end techniques for OutSystems OutSystems Page - head 9
  • 10. Top front-end techniques for OutSystems OutSystems Page - head 10
  • 11. Top front-end techniques for OutSystems OutSystems Page - head 11
  • 12. Top front-end techniques for OutSystems OutSystems Page - head 12 webblock css platform css theme css page css
  • 13. Top front-end techniques for OutSystems Adding CSS 13 In specific page In every page using the web block In every page that is using the theme
  • 14. Top front-end techniques for OutSystems Adding CSS 14 1 2 3 Tip This is what enable us to create enterprise grade styleguides
  • 15. Top front-end techniques for OutSystems Learn more about CSS 15 See chapter 4: http://goo.gl/HxyQQg
  • 16. Top front-end techniques for OutSystems OutSystems Page - head 16
  • 17. Top front-end techniques for OutSystems OutSystems Page - head 17 platform JS webblock JS page JS injected JS
  • 18. Top front-end techniques for OutSystems 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
  • 19. Top front-end techniques for OutSystems Adding JavaScript 19 1 3 2
  • 20. Top front-end techniques for OutSystems OutSystems body 20 Viewstate EPA taskbox (BPT) Platform JS Developer code
  • 21. Top front-end techniques for OutSystems 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
  • 22. Top front-end techniques Applied to OutSystems Platform
  • 23. Top front-end techniques for OutSystems Agenda ● What’s under the hood? ● Top front-end techniques 23 ○ Best practices
  • 24. Top front-end techniques for OutSystems Best practices 1. CSS 2. JavaScript 3. Assorted (like candies!) 24
  • 25. Top front-end techniques for OutSystems 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. Top front-end techniques for OutSystems Best practices - CSS 26 ● Have code conventions ● Avoid unnecessary vendor prefixes Autoprefixer: https://autoprefixer.github.io/ Can I Use: https://caniuse.com/ http://shouldiprefix.com/
  • 27. Top front-end techniques for OutSystems Best practices - CSS 27 ● Have code conventions ● Avoid unnecessary vendor prefixes ○ 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. Top front-end techniques for OutSystems Best practices - CSS 28 ● Have code conventions ● Avoid unnecessary vendor prefixes ● Avoid using ID selectors
  • 29. Top front-end techniques for OutSystems Best practices - CSS 29 ● Have code conventions ● Avoid unnecessary vendor prefixes ● Avoid using ID selectors ○ Automatically generated ○ Depend on hierarchy of blocks ○ Use Classes instead
  • 30. Top front-end techniques for OutSystems Best practices - CSS 30 ● Have code conventions ● Avoid unnecessary vendor prefixes ● Avoid using ID selectors ● 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
  • 31. Top front-end techniques for OutSystems 31 See webinar: http://goo.gl/aiUlvb Learn to measure performance
  • 32. Top front-end techniques for OutSystems Best practices - CSS 32 ● Have code conventions ● Avoid unnecessary vendor prefixes ● Avoid using ID selectors ● Be aware of selectors performance ● 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
  • 33. Top front-end techniques for OutSystems Learn performance techniques 33 See session: https://goo.gl/arvD3Q
  • 34. Top front-end techniques for OutSystems Best practices - CSS 34 ● Have code conventions ● Avoid unnecessary vendor prefixes ● Avoid using ID selectors ● Be aware of selectors performance ● Avoid defining CSS in web blocks or Pages ● Organize your theme CSS ○ Create an Index
  • 35. Top front-end techniques for OutSystems Best practices - CSS 35 ● Have code conventions ● Avoid unnecessary vendor prefixes ● Avoid using ID selectors ● Be aware of selectors performance ● Avoid defining CSS in web blocks or Pages ● Organize your theme CSS ○ Create an Index ○ Separate CSS into sections
  • 36. Top front-end techniques for OutSystems Best practices - CSS 36 ● Have code conventions ● Avoid unnecessary vendor prefixes ● Avoid using ID selectors ● Be aware of selectors performance ● Avoid defining CSS in web blocks or Pages ● Organize your theme CSS ○ Create an Index ○ Separate CSS into sections ○ Add all media queries to end of file
  • 37. Top front-end techniques for OutSystems Best practices - CSS 37 ● Have code conventions ● Avoid unnecessary vendor prefixes ● Avoid using ID selectors ● Be aware of selectors performance ● Avoid defining CSS in web blocks or Pages ● Organize your theme CSS ○ Create an Index ○ Separate CSS into sections ○ Add all media queries to end of file ○ Using Silk UI, leave patterns CSS together Responsive Pattern
  • 38. Top front-end techniques for OutSystems Best practices - CSS 38 ● Have code conventions ● Avoid unnecessary vendor prefixes ● Avoid using ID selectors ● Be aware of selectors performance ● Avoid defining CSS in web blocks or Pages ● Organize your theme CSS ● Be aware of theme dependencies – will lead to @imports
  • 39. Top front-end techniques for OutSystems Best practices - CSS 39 ● Have code conventions ● Avoid unnecessary vendor prefixes ● Avoid using ID selectors ● Be aware of selectors performance ● Avoid defining CSS in web blocks or Pages ● Organize your theme CSS ● Be aware of theme dependencies – will lead to @imports Tip CSS is render blocking, so avoid @imports, since will delay page render Sequential download
  • 40. Top front-end techniques for OutSystems 40 See webinar: http://goo.gl/Qr4i50 Learn to architecture your CSS
  • 41. Top front-end techniques for OutSystems Best practices - CSS 41
  • 42. Top front-end techniques for OutSystems 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…
  • 43. Top front-end techniques for OutSystems Best practices - JavaScript ● Avoid global variables ● Avoid console.log pollution 43 Read more: http://goo.gl/rSBT5S
  • 44. Top front-end techniques for OutSystems Best practices - JavaScript ● Avoid global variables ● Avoid console.log pollution ● Avoid doing animations with JavaScript 44 Read more: http://goo.gl/yhav2M
  • 45. Top front-end techniques for OutSystems Best practices - JavaScript ● Avoid global variables ● Avoid console.log pollution ● Avoid doing animations with JavaScript 45 Read more: http://goo.gl/UpH68x The only way to 60 fps
  • 46. Top front-end techniques for OutSystems Best practices - JavaScript ● Avoid global variables ● Avoid console.log pollution ● Avoid doing animations with JavaScript ● Use platform jQuery ($) 46
  • 47. Top front-end techniques for OutSystems Best practices - JavaScript ● Avoid global variables ● Avoid console.log pollution ● Avoid doing animations with JavaScript ● Use platform jQuery ($) ● Use type and value comparison === vs == 47 Avoid Safer
  • 48. Top front-end techniques for OutSystems Best practices - JavaScript ● Avoid global variables ● Avoid console.log pollution ● Avoid doing animations with JavaScript ● Use platform jQuery ($) ● Use type and value comparison === vs == ● Use Object Module approach ○ To avoid global functions ○ To avoid global variables 48 Read more: http://goo.gl/NFYIWT
  • 49. Top front-end techniques for OutSystems Best practices - JavaScript ● Avoid global variables ● Avoid console.log pollution ● Avoid doing animations with JavaScript ● Use platform jQuery ($) ● Use type and value comparison === vs == ● Use Object Module approach ● Follow common JavaScript practices ○ w3schools - http://goo.gl/mIrWDF ○ Idiomatic - http://goo.gl/Hs6h47 49
  • 50. Top front-end techniques for OutSystems Best practices - Assorted ● EPA taskbox 50 EPA taskbox (BPT)
  • 51. Top front-end techniques for OutSystems Best practices - Assorted ● Remove EPA taskbox if not in use ○ Remove programmatically 51
  • 52. Top front-end techniques for OutSystems Best practices - Assorted ● Remove EPA taskbox if not in use ○ Remove programmatically ○ Add exception to a specific eSpace – https://yourenvironment/EPA_Taskbox/ 52 See help: https://goo.gl/u9nqPr
  • 53. Top front-end techniques for OutSystems Best practices - Assorted ● Remove EPA taskbox if not in use ● Checkout talk Delivering Mobile Apps that Perform 53 See session: https://goo.gl/arvD3Q
  • 54. Top front-end techniques for OutSystems Agenda ● What’s under the hood? ● Top front-end techniques 54 ○ Best practices ○ Rediscovering the personal area
  • 55. Top front-end techniques for OutSystems “the developer can then test his changes privately without affecting any other developer” CSS and JavaScript are local Personal Area 55
  • 56. Top front-end techniques for OutSystems Personal Area “the developer can then test his changes privately without affecting any other developer” 56
  • 57. Top front-end techniques for OutSystems Personal Area - limitations 57 Changes to the following elements require See platform help: http://goo.gl/VGD7aA
  • 58. Top front-end techniques for OutSystems Agenda ● What’s under the hood? ● Top front-end techniques ○ Best practices ○ Rediscovering the personal area ○ Changing the <head> 58
  • 59. Top front-end techniques for OutSystems Changing the <head> ● HTTPRequestHandler ○ AddJavaScriptTag ○ AddStyleSheetTag ○ Add PostProcessingFilter 59
  • 60. Top front-end techniques for OutSystems Changing the <head> like a boss ● HTTPRequestHandler ● IncludeJavascript_API 60
  • 61. Top front-end techniques for OutSystems Agenda ● What’s under the hood? ● Top front-end techniques ○ Best practices ○ Rediscovering the personal area ○ Changing the <head> like a boss ○ Browser support and testing 61
  • 62. Top front-end techniques for OutSystems Browser support and testing 1. Ever increasing number of devices 62 Read more: http://goo.gl/YmLOn3
  • 63. Top front-end techniques for OutSystems Browser support and testing 1. Ever increasing number of devices 2. Identify target devices for market 63 Read more: http://goo.gl/apBVGF
  • 64. Top front-end techniques for OutSystems Browser support and testing 1. Ever increasing number of devices 2. Identify target devices for market 3. Test in target browsers / devices 64 BrowserStack: http://goo.gl/jwIuJM CrossBrowserTesting: http://goo.gl/cOkpE1
  • 65. Top front-end techniques for OutSystems Agenda ● What’s under the hood? ● Top front-end techniques ○ Best practices ○ Rediscovering the personal area ○ Changing the <head> like a boss ○ Browser support and testing ○ Cutting corners or how to avoid 1-click publish 65
  • 66. Top front-end techniques for OutSystems Cutting corners 66 Mauro Vieira
  • 67. Top front-end techniques for OutSystems 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.
  • 68. Live demo Where things will go wrong. Definitely.
  • 70. Top front-end techniques for OutSystems Rule of thumb… 70 If it can be done in the web technology… Then, it can be done in OutSystems
  • 71. Top front-end techniques for OutSystems Great UIs 71 See webinar: http://goo.gl/3D2Xqm
  • 72. Top front-end techniques for OutSystems Great UIs 72 See demo: https://goo.gl/NU78vt Download code: http://goo.gl/N5QNq7
  • 73. Top front-end techniques for OutSystems Great UIs 73 See demo: https://goo.gl/NU78vt Download code: http://goo.gl/N5QNq7
  • 74. Top front-end techniques for OutSystems Great UIs 74
  • 75. Takeaways Or things to keep in mind
  • 76. Top front-end techniques for OutSystems 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