Video: Primer; Hoe Facebook omgaat met Javascript nl

Door creator1988 op vrijdag 7 januari 2011 13:34 - Reacties (16)
Categorie: -, Views: 3.926

De beste video die ik in 2010 heb gezien, "Primer: Facebook's 2k of JavaScript to power (almost) all interactions" door Makinde Adeagbo. Verplicht voer voor iedereen die professioneel met JavaScript bezig is.

Videolink

Volgende: Minesweeper met Javascript en Canvas 01-'11 Minesweeper met Javascript en Canvas
Volgende: MVC Views gebruiken in ASP.NET Webforms 01-'11 MVC Views gebruiken in ASP.NET Webforms

Reacties


Door Tweakers user Meijuh, vrijdag 7 januari 2011 13:44

Kun je in je blog niet meer informatie geven over de inhoud van de video?

Door Tweakers user RobIII, vrijdag 7 januari 2011 14:02

Ik ben 'm nog aan 't kijken (hij is wat nerveus, hoe schattig :P ), maar ik neig na een derde te hebben gezien meer naar deze (Paul Irish) als beste video voor 2010 voor wat betreft javascript. Ondanks de titel is 't wat generieker dan "alleen maar jQuery".

[Reactie gewijzigd op vrijdag 7 januari 2011 14:15]


Door Tweakers user Cave_Boy, vrijdag 7 januari 2011 14:11

Meer informatie zou wel leuk zijn geweest voor de rest een intressant filmpje.

Door Tweakers user creator1988, vrijdag 7 januari 2011 14:17

RobIII schreef op vrijdag 07 januari 2011 @ 14:02:
Ik ben 'm nog aan 't kijken (hij is wat nerveus, hoe schattig :P ), maar ik neig na een derde te hebben gezien meer naar deze (Paul Irish) als beste video voor 2010 voor wat betreft javascript. Ondanks de titel is 't wat generieker dan "alleen maar jQuery".
Zit er nu 6 minuten in, en inderdaad leuk om naar te kijken. Wel wat meer echt language-specifiek, waar Primer meer over de achterkant gaat :) . Tnx tho!

Door Tweakers user Meijuh, vrijdag 7 januari 2011 14:34

Hmm, ik vind toch dat ze bij facebook rare keuzes maken.
Voor het submitten van forms kun je prima de jquery form plugin gebruiken.

Ook kun je in bijvoorbeeld symfony kijken of een request een ajax request is, om zo een andere response te sturen.

Lijkt alsof ze het wiel keer op keer opnieuw hebben uitgevonden.

Verder kijk ik bewust naar wanneer javascript uitgevoerd moeten worden. Als het direct moet gebeuren gooi ik het direct in een .js. Als het niet direct uitgevoerd hoeft te worden gooi ik het in een $(document).ready().

Door Tweakers user creator1988, vrijdag 7 januari 2011 15:31

Meijuh schreef op vrijdag 07 januari 2011 @ 14:34:
Hmm, ik vind toch dat ze bij facebook rare keuzes maken.
Voor het submitten van forms kun je prima de jquery form plugin gebruiken.

Ook kun je in bijvoorbeeld symfony kijken of een request een ajax request is, om zo een andere response te sturen.

Lijkt alsof ze het wiel keer op keer opnieuw hebben uitgevonden.

Verder kijk ik bewust naar wanneer javascript uitgevoerd moeten worden. Als het direct moet gebeuren gooi ik het direct in een .js. Als het niet direct uitgevoerd hoeft te worden gooi ik het in een $(document).ready().
Nou, de keuze van facebook in deze is juist dat er zo min mogelijk geladen dient te worden. Gebruik van bandbreedte kost vertraging en geld. JS die dus niet direct uitgevoerd hoeft te worden wil je helemaal niet naar de client sturen (of pas als de client toch niets aan het doen is). Daarbij breken ze ook geen interacties; voordat de Javascript voor een bepaald gedeelte geladen is (of niet snel genoeg ondemand geladen kan worden) dan is er altijd een non-JS fallback.

Overigens is het ook verdedigbaar om geen jQuery te gebruiken in deze situaties. Als je je core-JS zo klein mogelijk wil houden ga je geen library van 40 KB inladen.

Door Tweakers user Comgenie, vrijdag 7 januari 2011 15:44

Meijuh schreef op vrijdag 07 januari 2011 @ 14:34:
Lijkt alsof ze het wiel keer op keer opnieuw hebben uitgevonden.
Tja, het wiel opnieuw uitvinden.. Voor jQuery waren er ook al duizende plugins die hetzelfde kunnen. Ikzelf heb ook de keuze gemaakt om een klein (fijn) js libary te maken die ik gebruik in mijn projecten.

jQuery zit prima in elkaar, maar soms is een eigen libary fijner. Dit kan bijvoorbeeld zijn omdat je eigen JS-codestijl heel anders is opgebouwd en het dan beter aansluit (met JS heb je veel vrijheid daarin!), of je misschien je JS applicatie ook voor niet-browsers schrijft (javascript is een taal die ook prima inzet baar is voor andere dingen, terwijl jQuery zelf toch wel aardig gericht is op puur browser development).

[Reactie gewijzigd op vrijdag 7 januari 2011 15:45]


Door Tweakers user Meijuh, vrijdag 7 januari 2011 16:21

Toch vind ik het niet zo'n probleem om eenmalig 40kb te laden voor de jQuery library, die wordt immers gecached door de browser. Het is niet zo dat bij elke page-refresh de hele jQuery library opnieuw wordt opgehaald.

Door Tweakers user YopY, vrijdag 7 januari 2011 16:29

Voor het submitten van forms kun je prima de jquery form plugin gebruiken.
Maar dan moet je:

* JQuery laden & uitvoeren
* JQuery form plugin laden & uitvoeren
* onSubmit registreren op formulier (terwijl dat formulier niet altijd gesubmit wordt)
* Code dat onsubmit uitgevoerd wordt laden & uitvoeren.

Door Leon Vaandrager, vrijdag 7 januari 2011 16:34

Lijkt een beetje op de postback manier van asp.net

Daarnaast vind ik custom attributes in je href niet bepaald netjes en niet wc3 valid...

Door Tweakers user creator1988, vrijdag 7 januari 2011 17:08

Leon Vaandrager schreef op vrijdag 07 januari 2011 @ 16:34:
Lijkt een beetje op de postback manier van asp.net

Daarnaast vind ik custom attributes in je href niet bepaald netjes en niet wc3 valid...
Custom attributes zijn beschrijvend, dus prima verdedigbaar hier. Sowieso moet je op een gegeven moment concessies doen aan je W3 validheid als je het uiterste uit je site wilt halen. Overigens zijn custom attributes ook wl W3 valid toe te voegen.

[Reactie gewijzigd op vrijdag 7 januari 2011 17:09]


Door Tweakers user RobIII, vrijdag 7 januari 2011 17:18

En daarbij is "w3c validity" nou niet bepaald de heilige graal; soms moet je gewoon pragmatisch zijn.

Door Tweakers user ZpAz, vrijdag 7 januari 2011 17:35

Leon Vaandrager schreef op vrijdag 07 januari 2011 @ 16:34:
Lijkt een beetje op de postback manier van asp.net

Daarnaast vind ik custom attributes in je href niet bepaald netjes en niet wc3 valid...
Custom attributes kunnen prima met een HTML 5 doctype, wat ze op Facebook dan ook gebruiken.

Door Tweakers user mcdronkz, vrijdag 7 januari 2011 22:01

Meijuh schreef op vrijdag 07 januari 2011 @ 14:34:
Ook kun je in bijvoorbeeld symfony kijken of een request een ajax request is, om zo een andere response te sturen.
Inderdaad, ik dacht precies hetzelfde. Dat stelt echt geen reet voor namelijk:

PHP:
1
2
3
4
function isAjax() 
{
    return(isset($_SERVER["HTTP_X_REQUESTED_WITH"]) && ($_SERVER["HTTP_X_REQUESTED_WITH"] == "XMLHttpRequest"));
}


Ik heb er weinig verstand van, maar als ik dit zo zie, denk ik dat er op GoT meer talent zit dan bij het Facebook team....

[Reactie gewijzigd op vrijdag 7 januari 2011 22:01]


Door Tweakers user crisp, vrijdag 7 januari 2011 23:21

creator1988 schreef op vrijdag 07 januari 2011 @ 15:31:
[...]
Daarbij breken ze ook geen interacties; voordat de Javascript voor een bepaald gedeelte geladen is (of niet snel genoeg ondemand geladen kan worden) dan is er altijd een non-JS fallback.
Je omschrijft het verkeerd :P Facebook heeft blijkbaar ingezien dat ze javascript behaviour beter als progressive enhancement konden implementeren dan als primaire requirement ;)

Het is inderdaad slim om dan een bootloader te gebruiken in samenwerking met een kleine core die enkel puur ajax-functionaliteit uitvoert en waarbij de response eventuele extra benodigde logica bevat, hoewel dan wel een deel van je JS-functionaliteit weer decentraal in je serverside code verwerkt zit waardoor je afhankelijkheden creert die lastig te herkennen zijn.

[Reactie gewijzigd op vrijdag 7 januari 2011 23:22]


Door Tweakers user T i M, maandag 10 januari 2011 09:05

mcdronkz schreef op vrijdag 07 januari 2011 @ 22:01:
[...]


Inderdaad, ik dacht precies hetzelfde. Dat stelt echt geen reet voor namelijk:

PHP:
1
2
3
4
function isAjax() 
{
    return(isset($_SERVER["HTTP_X_REQUESTED_WITH"]) && ($_SERVER["HTTP_X_REQUESTED_WITH"] == "XMLHttpRequest"));
}


Ik heb er weinig verstand van, maar als ik dit zo zie, denk ik dat er op GoT meer talent zit dan bij het Facebook team....
Dat is wel heel kort door de bocht. Ik ga het niet eens uitleggen, kijk het filmpje nog een keer opnieuw en misschien dat je het dan wel snapt.

Reageren is niet meer mogelijk