Eventually a new API was designed that solves the issues with the legacy API
by following a few basic principles:
It allows us to achieve the best performance across all platforms, there is simply no reason to use jQuery today and the performance penalty on mobile devices is a real issue. 2. Strict usage of modules.
Each component is placed in an own file and all dependencies are explicitly declared and injected at the top.Eventually we settled with AMD-style modules using require.js which offers both lazy loading and "ahead of time"-compilatio with
3. No jQuery-based components on page init.
The new API should make it easy to update existing components by providing similar interfaces, while still allowing legacy code to run side-by-side for best compatibility and to avoid rewritting everything from the start.
Defining a Module#
The default location for modules is
js/ in the Core's app dir,
but every app and plugin can register their own lookup path by providing the path
using a template-listener on
For this example we'll assume the file is placed at
the module name is therefore
WoltLabSuite/Core/Ui/Foo, it is automatically
derived from the file path and name.
For further instructions on how to define and require modules head over to the RequireJS API.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
Loading a Module#
Modules can then be loaded through their derived name:
1 2 3 4 5
Some common modules have short-hand aliases that can be used to include them without writing out their full name. You can still use their original path, but it is strongly recommended to use the aliases for consistency.