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 HTML5, don’t author in Java and then test at the end (obviously if you identify something that seems slower than expected, please let the developers know and they will check it out). HTML5 will always be slower than the Java running on the same hardware.

General advice

• Any GUI elements that are not needed should be hidden
• If you only need algebraic description of a few objects, you may drag + drop them to graphics (or use FormulaText Command to get their representation) and hide the Algebra View.
• You may also reduce the time needed to update Algebra View by collapsing some of the categories (eg switch Algebra to sort by type and hide all lists) or marking objects as auxiliary
• Only use fancy styling (hatching, background image) if necessary
• If any value is used multiple times in computations, it should be assigned to a variable and that variable name should be used.

Scripting tips

• 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[x<3,4,5]] is better than If[x<3,SetValue[a,4],SetValue[a,5]]

Lists

The Sequence[ ] and Zip[] commands are currently quite slow in some cases. The team is working on some ideas to speed this up, in the meantime it’s worth trying out the spreadsheet for building sequences, and using “Conditon to Show Object” to simulate Sequence[ ]

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

Best to use TableText[], FormulaText[] but basic LaTeX also works well in HTML5: http://www.geogebra.org/student/m33487?mobile=true

Images

Make sure you’re not using hi-res images when a smaller one would do (especially in Sequence commands)