This document discusses using APEX Nitro to improve the APEX development process. APEX Nitro allows developers to write CSS and JavaScript locally and have changes automatically synced to their APEX application. It provides features like error handling, minification, concatenation, and preprocessing to boost performance and maintainability. The document reviews how to install, configure, and use APEX Nitro to enhance the front-end development experience.

1. Your essential APEX companion
Marko Gorički
@mgoricki
apexbyg.blogspot.com

2. About Me
• 10 years of experience with APEX
• presenter at HROUG, SIOUG, APEX World, KSCOPE, APEX
Alpe Adria, APEX Connect
• apex.world Member of the year 2017
• APEX related blog apexbyg.blogspot.com
• Twitter: @mgoricki

5. • software development company focused on consulting and business solution development
• technology focus Oracle (APEX)
• APEX educations, consulting, plugin development
• our APEX solutions:
• HR management software
• Regulatory reporting for insurance
• Reinsurance
• GDPR

6. Agenda
• How to use CSS in APEX
• APEX Nitro Magic
• Installation and Configuration
• Top Features

7. How to use CSS in
APEX?

8. Rule #1
Don't use custom CSS if you don't need it!
Use Universal Theme + Theme Roller!
https://apex.oracle.com/ut/

9. https://apex-theme-styles.com

10. Rule #2
Don’t unsubscribe Universal Theme!

11. Joel R. Kallman
“A Great APEX Developer is.....a Full Stack
Developer!”

12. How to use CSS in
APEX?

15. CSS location
• Embedded
• External files
• Inline

16. • Not reusable/page specific
• inline styles (custom attributes)
• embedded (CSS in static regions, page
inline CSS)
• Reusable, but ugly
• embeded (page 0, inline CSS in
templates or plugins, CSS in PL/SQL
using htp.p)

18. • Theme Roller
• Static Files

19. Managing CSS changes before APEX Nitro
Inspect Element
Change CSS in
console
Change in CSS file
Upload file to
server/APEX files
Refresh Page (F5)

20. Google Chrome 65 - Local Overrides

21. APEX Nitro Magic

22. How Nitro Works?

23. Local Files SRCLocal Files DIST
http://localhost:port/pls/apex/f?p=100
Workspace Files
#WORKSPACE_FILES#
Application Files
#APP_FILES#
Theme Files
#THEME_IMAGES#
Watching for changes,
handles errors in JS and
CSS
Compile, minify,
concatenate, preprocess,
…
Real-time CSS and JS sync
Path to local DIST files
Publish files to APEX
APEX Application
Proxy requests
https://apex.oracle.com/pls/apex/f?p=100

24. APEX Nitro Installation Overview
1. Install Nitro
2. Configure Project
3. Configure APEX
4. Launch Project
5. Publish to APEX

25. 1. Installation
• Prerequisites
• Node.js >= 6
• SQLcl >= 17.2 (optional, only for publish feature)
• Open CLI (CMD/Terminal):
• npm install -g apex-nitro

27. 2. Configure Project
• apex-nitro config <project>
• basic and advanced mode
• before launching you have to create source (SRC) folder with predefined
structure

33. 3. APEX Configuration
• Shared Components > Application Process

34. 3. APEX Configuration
• Add reference to static files (CSS/JS)
Level Access Point
Application Shared Components > User Interfaces > User Interface Details > JavaScript / Cascading Style Sheets > File URLs
Theme Shared Components > Themes > Create / Edit Theme > JavaScript and Cascading Style Sheets > File URLs
Theme Style Shared Components > Themes > Create / Edit Theme > Theme Styles > Create / Edit Theme Style > File URLs
Template Shared Components > Templates > Edit Page Template > JavaScript / Cascading Style Sheet > File URLs
Plugin Shared Components > Plug-ins > Create / Edit Plug-in: > File URLs to Load
Page Page Designer > Page > JavaScript / CSS > File URLs

35. 4. Launch project
• apex-nitro launch <project>

37. 5. Publish to APEX

38. 5. Publish to APEX

39. Top Features

40. Features Overview
• Browser Synchronization
• JS/CSS Minification
• Source Mapping
• File Concatenation
• Error Handling
• Predprocessing
• CSS: SASS, LESS
• JS: TypeScript, WebPack
• Theme Roller Configuration

41. Browser Synchronization

42. Error Handling
• notifications of syntax errors (CSS and JS) upon saving a file

43. Minification
• 634 bytes > 246 bytes (>60%)
• #APP_IMAGES#css/custom#MIN#.css

44. Concatenation
• can combine multiple files into single file
• reduces number of HTTP request to the server

45. Concatenation
• separate config option for JS and CSS

46. Source Mapping
• buttons.css

47. Source Mapping
• concatenated CSS file custom.min.css loaded
• inspect element

48. CSS Preprocessing
• CSS: LESS and SASS
• variables, nesting, partials, imports, mixins, inheritance, operators, function…

49. CSS Preprocessing

50. JS Preprocessing

51. CSS Auto Prefixer
Example:
Compiles to:

52. Other Cool Features
• Responsive Development (Ghost Mode)
• Automatic Heading
• Theme Roller Customization

53. Benefits from Nitro
• boost your front-end APEX development
• better application performance
• reduce repeating tasks
• increase maintainability
• enhance teamwork
• help you write “better” CSS
• make responsive development easier

54. Vincent Morneau
@vincentmorneau
ODTUG’s 2017 Innovation Award Winner

55. APEX Material Theme
https://materialapex.com

56. To learn more…
• https://github.com/OraOpenSource/apex-nitro

57. Questions?

58. Thank you!
Marko Gorički
@mgoricki
apexbyg.blogspot.com