Progressive enhancement: HTML in Javascript?

[Verwijderd]

Voor een site waarvan 95% van de bezoekers JavaScript gebruikt heb ik het volgende ‘probleem’.

Door middel van AJAX requests –kan- data geladen worden (een feature die dus alleen voor JS gebruikers beschikbaar is, dat is geen punt van discussie). Veel data, maar telkens dezelfde HTML container. Vanwege de progressive enhancement methode wordt deze container momenteel op de site gezet dmv. JS. Deze container bestaat uit meerdere HTML elementen, een ietwat complex geheel. Nu volgt mijn probleem: waar in de code zouden jullie deze container zetten?

1. Momenteel staat de HTML code van deze container als JS variabele in de JS file, niet zo mooi voor toekomstige ontwikkelingen, niet overzichtelijk. Echter voor niet-JS gebruikers is dit ok: zij hebben immers deze container niet nodig.

2. Het is natuurlijk een mogelijkheid om dmv. een (extra) AJAX request deze container (na) te laden, maar dat maakt de pagina natuurlijk weer een stukje langzamer. Het kan natuurlijk onDomReady gebeuren, maar daar wordt reeds een hoop geladen.

3. Een andere optie is om de container standaard onzichtbaar op de pagina te zetten en op het moment dat het nodig is te tonen. Die 5% niet-JS gebruikers moeten dan helaas deze container laden terwijl ze deze niet kunnen gebruiken.

Ik heb enige ontwikkelaars gesproken: iedereen kiest een andere optie. Wat zouden jullie doen en waarom zouden jullie het doen?

bedankt en prettig weekend!

[tonyisgaaf]

Wil je nou weten waar je de container of de content van de container moet plaatsen? De container moet je nl. daar plaatsen waar je 'm nodig hebt

Mooi artikel waar je naar verwijst, maar wat je dus wilt is d.m.v. JS content laden in een container, die niet toegankelijk/zichtbaar is voor clients zonder JS.

Als je dan werkt volgens je eerder aangehaalde "progressive enhancement" methode, plaats je dus de content niet in de HTML (want je wil niet dat deze toegankelijk/zichtbaar is voor clients zonder JS). Dus optie 3 valt af.

Optie 1 heeft 3 nadelen:

• Je JS bestand wordt groot, voordat andere functies kunnen worden uitgevoerd moet eerst het gehele JS bestand worden geladen.
• Het is niet (eenvoudig/foolproof) te onderhouden.
• Je houdt je niet aan de "progressive enhancement" (wat een fijne mond vol is het toch) methode, want je plaatst content in een behaviour bestand.

Mag je 3x raden wat er dan (naar mijn mening uiteraard) overblijft.

[Sebazzz]

^^ Je houdt je met optie 1 inderdaad niet aan dat principe.
Optie 2 is beter: Scheelt weer data indien de gebruiker het request afkapt.
Optie 3 is beter indien je de container standaard weergeeft en met JS verstopt. De niet-JS gebruikers ondervinden geen problemen.

Vergeet trouwens dat Googlebot en consorten ook niet-JS gebruikers zijn, dus indien je indexering belangrijk vindt...

[Verwijderd]

Ok, bedankt. Een echte perfecte oplossing is er dus niet. Ik denk dat ik voor oplossing 3 ga: container op de site zetten, maar niet tonen dmv. css. Niet goed, maar het beste voor de grootste en belangrijkste gebruikersgroep.

Ter verduidelijking: er wordt op de homepage een container geladen/getoond met extra product informatie voor een product naar keuze. Normaal gesproken wordt deze info op de volgende pagina getoond. Het is dus puur een methode om de gebruiker sneller info te geven, zonder dat hij de pagina hiervoor hoeft te verlaten. Het heeft dus geen zin om deze container altijd te tonen, omdat er eerst een actie/click van de gebruiker voor nodig is.

[BtM909]

Hoe staat de code voor de container in Javascript? Volledig als string-based items of gebruik je echte DOM methodes?

[Verwijderd]

Ook dat nog, zo kreeg ik de code: string-based, het zijn zo'n 25 elementen. Dat is natuurlijk niet zo mooi.

[ Voor 32% gewijzigd door Verwijderd op 03-11-2008 12:57 ]

[TheNameless]

Begrijp ik goed dat je container altijd dezelfde opmaak en layout heeft, alleen andere data moet tonen?

Zo ja dan kan misschien clientside templating handig zijn.
Zie de volgende blog voor een aantal voorbeelden (jQuery in dit geval, maar dat maakt niet uit)
http://www.west-wind.com/Weblog/posts/509108.aspx

[Verwijderd]

Juist, TheNameless, dat is wat ik wil, bedankt! Eens kijken of er ook zo iets (clientside templating) is voor YUI.