Tutorial:Responsive Applets

When designing a GeoGebra applet you should make sure it will work nicely on all devices. This article gives you some advice how to ensure your applets will display correctly and perform better.

Most important point: test as you go in the online version, don’t author offline and then test just at the end (obviously if you identify something that seems slower than expected, please let the developers know and they will check it out).

General advice

• Avoid any commands which need to load the CAS engine eg Simplify(), Factor(), Expand(), Asymptote(). Also f == g for functions. You can generally use Polynomial() instead of Simplify() or Expand()
• Any user interface elements that are not needed should be hidden
• Use fancy styling (hatching, background image) only if necessary
• Do not place texts inside the applet unless necessary -- note that on GeoGebra you may place instructions for using the worksheet above and below the applet
• Avoid showing unnecessary labels of objects
• Grid and axes should be hidden if not needed
• If a computed value is used multiple times, it should be assigned to a variable and that variable name should be used

• Algebra View:
  • If you only need algebraic descriptions of a few objects, create dynamic texts and hide the Algebra View
  • You may also reduce the time needed to draw Algebra View updates, by collapsing some of the categories (eg switch Algebra to sort by type and hide all lists) or marking objects as auxiliary

Scripting tips

• avoid scripting at all if possible (ask in the Forum if you need help with this)
• if you really need scripting then JavaScript is faster than GeoGebraScript (ggbApplet.evalCommand() counts as GeoGebraScript though)
• SetValue(a, c + b) will be much faster than a = c + b (to avoid the whole construction being rebuilt) but ggbApplet.setValue() will be even faster as it will need less parsing.
• SetValue(a, If(b < 3, 4, 5)) is better than If(b < 3,SetValue(a, 4),SetValue(a, 5)).

Animations

If you have a multi-step animation, build it as separate objects driven by separate sliders, not as one big object driven by one slider

Here’s an example of an efficent way to solve ODEs (by using a variable slider speed) which is much quicker than using scripts/on update events. http://www.geogebra.org/student/m23587

LaTeX

It's simpler to use the TableText Command & FormulaText Command but you can dive into raw LaTeX if you need to.

Images

• https://jakearchibald.github.io/svgomg/ can reduce the size of SVGs a lot
• https://tinypng.com/ reduces the file size of PNGs a lot (typically 80-90%!)
• Make sure you’re not using hi-res images when a smaller one would do (especially in Sequence commands). You can use software like http://www.irfanview.com/ to downsample images