559
Views
33
Comments
ODC - Transitioning from RequireJS to modern JavaScript Bundler

Hey everyone,

We have some exciting news to share about the improvements we've been making to our OutSystems Applications. As part of our ongoing efforts to enhance performance and maintainability, we're optimizing how JavaScript code is deployed in ODC applications, including the embedding of third-party JavaScript. To achieve this, we will be progressively rolling out the removal of RequireJS and the introduction of a JavaScript bundler by October 21st. 

Why Are We Making this Change

The change involves these key decisions:

  • Transitioning from AMD modules loaded by RequireJS to the ESM standard. This was necessary because RequireJS is no longer maintained, whereas ESM is a standardized format supported by all major browsers, ensuring long-term stability.
  • Introducing a JavaScript bundler to optimize code for OutSystems applications. This was driven by customer requests, as bundling optimizes the generated code by removing unnecessary parts (tree-shaking) and minifying it, resulting in smaller and faster-loading bundles.

What This Means for You

  • Smaller applications: ESBuild provides smaller bundler sizes which reduces the amount of transferred data on application startup.
  • Future-Proofing: By adopting a JSBundler, we're positioning our product to take advantage of future JavaScript advancements, ensuring we stay ahead of the curve.
  • Improved Developer Experience: Incompatibilities on JSNodes are detected during application publish.

How Can You Make This Transition Smoothly

We understand that any change in the underlying technology can raise questions and concerns, especially when breaking changes are being introduced. We did extensive testing to make sure you have the least impact possible on your web and mobile apps. Here's how you can understand the possible impacts and ensure a smooth experience.

Fix any Strict Mode violations in JS Nodes

With the move to ESM, code running in JS Nodes now runs in strict mode. This means that the semantics of some JavaScript features will change, and you may need to adapt to that. Adhering to strict mode will provide better security, safety, and performance in your JavaScript code, so making this change in your applications should have a positive impact. You can learn more in the official documentation.

Example of incompatible code will result in an error while publishing

Update Forge Dependencies

Below you can find a list of all forge assets that have been updated to meet the requirements described above. Please make sure you update the following Forge components to the minimum version stated below:

 Library/Plugin 

 Required Version 

 CommonPlugin

 1.0.1

 FileTransferPlugin

 1.0.1

 OneSignal

 1.1.0

 AppShield

 0.4.1

 UltimatePDF

 1.1.8

 SEO Utils on Steroids   

 0.2.0

 Dropable File Upload   

 0.1.5

 CKEditor 5   

 0.2.0

Built-in Plugins impacts

This transition required some changes to the OS DeepLinks. These changes have no impact on the available APIs, but do require a new mobile package version. To migrate, follow the steps below:

Create new mobile package versions

Updating the Mobile Plugins requires a new mobile application package, just follow the steps:

  • Open your apps in ODC Studio and update the mentioned assets,
  • Republish all mobile applications with the updated assets.
  • Promote all your applications from Development to Production.
  • Generate new mobile application packages with MABS 10 to be distributed to end-users.
  • If your mobile apps are published in mobile stores for the general public, please make sure to publish their newest packages in the App Store and Google Play stores.

Key Takeaways

  • Optimized applications with JSBundler introduction
  • Follow the previous steps to make sure your applications are not impacted.
  • Progressive rollout will start on October 21st

Thank you for your continued support and trust in our product.

Best regards.

2022-12-30 07-28-09
Navneet Garg

Great news

2014-10-21 20-15-17
Alberto Ferreira

Thanks for sharing !

2021-05-21 21-56-03
Anderson!

Noice!

2024-10-15 10-08-31
Tiago Ribeiro
Champion

Great news!

Will this only apply to ODC and not OS11? Will the CSS be bundled / minified too?

2020-03-23 17-47-41
Rita Tinoco
Staff

Hello Tiago, 

These changes only apply to ODC, and the CSS files will not be impacted by it.


2024-10-15 10-08-31
Tiago Ribeiro
Champion

Thanks Rita!

It seemed to me as a change that could be done at the Reactive / Mobile apps compiler so that could potentially benefit both O11 and ODC with little to no additional effort (but of course I don't have the full context).

Please also consider bundling the CSS. It is an industry standard and the tool you are using, ESBuild, supports it out of the box. It has been suggested in the community multiple times since 2011

Cheers

2024-03-22 09-17-23
Chandra Vikas Sharma

Great News.

2021-08-31 07-27-14
Vijay Perumalsamy

Thanks for sharing!

2024-05-10 22-07-12
Rafaela Sousa

Obrigado por compartilhar! 

2024-07-12 05-57-50
Gourav Shrivastava
Champion

That is Great 😃 

2023-08-28 07-00-10
Paulo Torres
Champion

Thanks for the detailed information!

2023-09-19 19-26-44
Josias Ramos Pinto

"Excellent, thanks for the information."

2022-11-25 14-29-20
Mateus Guillardi

Excelent... Thanks for sharing.

Question... Any plans to implement this for O11 too?

I saw in previous comments that it is only planned for ODC.

2014-09-04 01-10-12
Mark Bayles

Even though OS sales claim OS11 is their flagship product still, we can all see the writing on the wall for the product. So in saying that I would be pleasantly surprised if they do this also for OS11 but I am already prepared not to be surprised :D 


2023-04-05 12-45-27
Dalila Angélica

Ótimo, obrigado pela informação!!

UserImage.jpg
Anuli Hande

Thanks for the information !

2018-05-31 18-44-19
Ravi Vakkalanka

Thanks for sharing with details !

2023-04-05 12-45-27
Dalila Angélica

Thanks for the information! 

2026-02-27 12-41-57
Bala Sindhuja

Thanks for sharing

2024-07-16 17-36-51
Shradha Rawlani

Thanks for sharing !! very Helpful

2023-09-07 19-44-18
Hardik

Thanks for the insightful information.

2023-04-05 12-45-27
Dalila Angélica

Excelente!

2021-11-14 02-45-20
Shashi Mishra

Thanks for sharing...

2023-05-02 10-33-02
Madhuri Patil

That's very useful. Thanks for sharing

2021-10-17 12-36-16
Amreen Shaikh

Thank you for sharing

UserImage.jpg
Narendra Maheshwari

Thank you for sharing!!

2023-11-02 08-18-52
Janak Singh Parihar

Thanks for sharing ,  very Helpful 

2022-08-10 06-17-04
Mita

Great news! Thanks for sharing.

2023-10-19 05-09-59
Mangesh Phanse

Its a great news.

This change has impact so please try to share with community via emailer

2026-01-15 03-18-59
Vijay Malviya

nice and thanks for the information. 

2020-03-27 18-58-43
Fred Derks

With the new JS bundler and the minification of JS, it is very difficult to debug JavaScript in the broswer Dev Tools. When I search for the piece of JS code that I wrote in ODC Studio, I can no longer find it in the browser, in order to put a breakpoint and debug. Is there any information on a workaround, or to only disable this minification on Development stages?

2024-10-15 10-08-31
Tiago Ribeiro
Champion

OutSystems could consider adding support for Source Maps. They help map minified code back to the original code for debugging. They are automatically generated by most bundlers, including ESBuild.

It would also be nice to have the bundler working for CSS files in addition to js files.

2024-02-16 11-58-28
Sheikh Mohd Fahad

Great News, Thanks for sharing. 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.