View source for Tutorial:Responsive Applets

[[category:Tutorial]]

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 <code>Simplify()</code>, <code>Factor()</code>, <code>Expand()</code>, <code>Asymptote()</code>. You can generally use <code>Polynomial()</code> instead of <code>Simplify()</code> or <code>Expand()</code>
* 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==
* '''use JavaScript scripting''' not GeoGebraScript where possible
* <code><nowiki>SetValue(a, c + b)</nowiki></code> will be '''much''' faster than <code><nowiki>a = c + b</nowiki></code> (to avoid the whole construction being rebuilt) but <code>ggbApplet.setValue()</code> will be even faster as it will need less parsing.
* <code><nowiki>SetValue(a, If(b < 3, 4, 5))</nowiki></code> is better than <code><nowiki>If(b < 3,SetValue(a, 4),SetValue(a, 5))</nowiki></code>.

==Lists==
The <code>Sequence()</code> and <code>Zip()</code>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 <code>Sequence()</code>

==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