Presentation about APEX Nitro from APEX Alpe Adria 2018 and APEX Connect 2018 conferences

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