Reprise du message précédent :

 
 
Pourquoi ne pas écrire
 

 
Pourquoi pas

Après intégration/codage de moulte modules JS, je me demande à partir de quand une appli web est considéré "très/trop" lourde / et à partir de quand il faut que je commence à re-réfléchir le bousin (lazyloading par exemple) ?

De base mon appli (bootstrap / angularjs) pèse :

non compressée :
1 Document 8 Ko
5 Images 26 Ko
0 Objects  
30 Scripts 2707 Ko
1 Feuille de style 370 Ko
TOTAL : 37 Fichiers 3111 Ko

compressée:
1 Document 5 Ko
5 Images 17 Ko
0 Objects  
3 Scripts 794 Ko
1 Feuille de style 146 Ko
TOTAL : 10 Fichiers 963 Ko

Z'en pensez quoi ? c'est "gros" / "bof, c'est commun" / "t'as grave de la marge" ?

Je constate pas encore de ralentissement au chargement/runtime sur les devices, mais avant que ca arrive j'aimerais connaitre des "métriques à éviter" .. genre au delà de 2M de JS à loader/exec => oulalalala

Bref, question + ou - intéressante mais bon

ps: je parle pas vraiment de temps de chargement HTTP car <1mo, de nos jours, ca me semble tres correcte

la, ça commence à faire lourd. Quand tu parles de compressé, c'est minifié ou gzippé ?

Si c'est juste minifié, alors tu peut diviser par 6 la taille de tes scripts/css en les servant gzippé

Si c'est déjà gzippé, c'est beaucoup.

Est ce que tu es sur que tu ne peux pas trancher un peu dans tes 30 scripts ? Parceque angular.min.js c'est 100K (non gzippé), bootstrap.js c'est 30ko (non gzippé) et jquery c'est 80Ko (idem)

Alors mes valeurs "compréssées" c'est juste minifié effectivement, pas gzippé (Stats de l'onglet "Poids de la page" de webdeveloper).. Enfin je crois, voila les headers lors du Download d'un fichier .js par le navigateur :
 
Request : ----->
Accept */*
Accept-Encoding gzip, deflate
Accept-Language fr,fr-fr;q=0.8,en-us;q=0.5,en;q=0.3
Connection keep-alive
User-Agent Mozilla/5.0 (Windows NT 6.1; WOW64; rv:30.0) Gecko/20100101 Firefox/30.0
 
Response : ------>
Accept-Ranges bytes
Connection Keep-Alive
Content-Length 579296
Content-Type text/x-js
Date Tue, 22 Jul 2014 08:23:40 GMT
Etag "4e039-8d6e0-4fe4a905ea780"
Keep-Alive timeout=3, max=73
Last-Modified Wed, 16 Jul 2014 07:35:10 GMT
Server Apache
x-ua-compatible IE=Edge,chrome=1
 
Après, trancher dans les scripts : non ils ont tous une utilité et j'évite le plus possible d'intégrer du superflu mais mon projet commence à devenir gros (IE shims, panoplie de module angular, hightcharjs, font-awesome, momentjs, respond, angular-translate/bindonce/ui-router/etc etc)
 
Sinon tu parle de lourdeur over-HTTP seulement ? 2tant une SPA, l'utilisateur se tape un gros DL en oneshot, donc ca peux encore passer.. c'est surtout la lourdeur JS au runtime qui me fait peur, et je sai spas ce qu'un navigateur peux encaisser sans rendre l'âme.

mightyApp.directive('cgFixedTableHeader', ['$compile', function($compile) {
    return {
        transclude: 'element',
        link: function(scope, iElt, tAttrs, ctrl, transclude) {
            var $originalTable;
            var $newTable;
            var offsetTop = 78;
 
            function cloneTableHeader($table) {
                var $header = $('thead.header', $table);
 
                return angular.element(document.createElement('table'))
                    .addClass($table.attr('class')+' table-copy').removeClass('fixed-table-header')
                    .html($header.clone().removeClass('header').addClass('header-copy header-fixed'))
                    .css({ 'position': 'fixed', 'top': offsetTop, 'width': $header.width(), 'display': 'none' });
            }
 
            function setColumnsWidth($table) {
                $table.find('.header-copy > tr > th').width(function(i) {
                    return $originalTable.find('.header tr > th:eq(' + i + ')').width();
                });
            }
 
            /**
             * No need to execute ngRepeat because the cloned table comes from an already compiled header.
             * @param $table
             */
            function removeNgRepeat($table) {
                $table.find('[ng-repeat]').each(function(i, elt) {
                    angular.element(elt).removeAttr('ng-repeat')
                });
            }
 
            function updateHeader() {
                $('thead', $newTable).html($('thead', $originalTable).html());
                setColumnsWidth($newTable);
                removeNgRepeat($newTable);
                $compile($newTable)(scope);
            }
 
            function fixHeader() {
                transclude(function(table) {
                    $originalTable = table;
                    iElt.after($originalTable);
 
                    table.addClass('fixed-table-header');
                    $('thead', table).addClass('header');
                    table.wrap('<div class="fixed-table"></div>');
 
                    $newTable = cloneTableHeader(table);
                    $newTable.appendTo(table.closest('.fixed-table'));
 
                    setColumnsWidth($newTable);
 
                    $compile($newTable)(scope);
                });
            }
 
            $(window).bind("scroll", function() {
                var offset = $(this).scrollTop();
                var eltOffset = $originalTable.offset().top - offsetTop;
                var $newTable = $('.table-copy');
 
                if (offset >= eltOffset && $newTable.is(":hidden" )) {
                    $newTable.show();
                } else if (offset < eltOffset) {
                    $newTable.hide();
                }
            });
 
            scope.$watch(function () {
                return $('thead', $originalTable).html();
            }, function () {
                updateHeader();
            });
 
            scope.$watch(function () {
                return $('thead th', $originalTable).width();
            }, function () {
                updateHeader();
            });
 
            fixHeader();
        }
    };
}]);

 
J'invoque machine et shinuza.

Tu mets les polyfills pour ie8 sur un site avec 1 mo de script ? Tu l'as testé sur une machine d'époque ? Ça doit ramer comme toi un lendemain d'octoberfest

Es tu vraiment sur de devoir conserver cette compatibilité ?

Oh crois moi si je pouvais me passer de cette contrainte (client) ... (coté polyfills IE, ils ne sont chargés que pour IE8 cela dit donc ça va)
 
Testé sur machine concerné oui. Mais pas d'époque => j'ai le genre de client qui renouvelle très fréquemment son parc de machines mais dont la majorité des projets informatiques restent à l'age de pierre, donc IE8 obligé sur des i7@3.4Ghz + 8go de ram ...
 
Après étonnamment, passé les premiers temps de DEV, je m’étonne de ne plus avoir à corriger ni JS ni CSS spécifiquement pour IE8

Il y a une ref pour l'utilisation de bootstrap pour ses mixins (y compris la partie structurelle) au lieu d'ajouter les classes bootstrap partout?

Certains d'entre vous on testé : https://www.dartlang.org/ ?

@mask  : autre que ça : http://getbootstrap.com/css/#grid-less?

Ouais, paske ça ça dit pas grand chose

Finalement j'ai moit-moit, j'inclus tout bootstrap puis j'y vais à coup de :extend et j'utilise 1 ou 2 mixins que j'ai trouvé en fouillant.

(sauf que le :extend marche naturellement pas pour les styles que bootstrap démo mais ne définit pas genre <ins> et <del> )

Ouais alors là tu vas te confronter à un truc qui peut te poser problème
 
On a fait ça sur un de nos projets (avec le port sass) et on a explosé le nombre de sélecteurs autorisés sous IE (4095). Car qd tu extends du coup t'as les trucs en double.

J'ai pas des masses de trucs à redéfinir théoriquement, je regarde juste si je peux sortir une doc Sphinx avec la même tête que la doc bootstrap officielle.

là je me bas avec leur putain de scrollspy

youmoussa's pron : site built with ember  
http://builtwithember.io/

Il y en a qui ont  déjà testé le Simple Hosting (avec Node), chez Gandi

A 4 euros par mois tu peux tester sans trop prendre de risque, non?

« Deconstructing Deferred » https://groups.google.com/forum/#!t [...] discussion
 
Je suis pas sûr qu'on trouve plus complet sur le sujet.

Je ne comprends pas pourquoi dans la directive de ce snippet : http://stackoverflow.com/a/19644644/742980 il faut faire un $scope.$apply() sur une variable bi-directionnelle

Parce que

est une fonction qui ne fait parti de l'"univers" angular. Ca revient à modifier le scope angular en bypassant tous les watchers censés le reparser / reloader l'UI. Du coup, il faut forcer manuellement un digest cycle pour update l'UI

A confirmer par le Messieur sur SO.

 
Ah oui, effectivement
 
Par contre le if semble obligatoire, mais étant donné qu'il utilise des variables internes d'Angular, ça m'a pas l'air terrible

Effectivement il devrait pas avoir besoin de tester les $$phase si il utilisait bien une fonction de callback avec le $apply() : http://stackoverflow.com/a/22349659/1112003

Je suis pas sûr qu'utiliser un timeout soit plus propre ici.

Il suffit de ne pas utiliser angular

http://nraynaud.github.io/webgcode/
 
y'a un pro du CSS / 3D qui aurait envie de fignoler le cube de rotation dans la vue 3D ?
genre la face sous la souris ne se met pas toujours en surbrillance, les mouvements de caméra sont parfois tordus quand on passe d'une face à l'autre, les coutures entre les faces du cube sont moches.

Nan mais le timeout sert juste a simuler une fonction en dehors du scope d'Angular.. Comme ton bind() jquery. C'est juste pour l'exemple

En effet, actuellement c'est pas top. Je jette un coup d'oeil mais je sais pas si je vais avoir le temps de mettre les mains dedans.

merci

Bon, c'est plus de la bidouille, pas le temps d'aller plus loin, mais voila quelques retours:

Déjà OrbitControl je le trouve à moitié buggé, dans le sens où il bloque tout mouvement quand il détecte que tu veux aller "plus haut que le top" ou "plus bas que le bas".

Supprimer le test

de la ligne 287 du fichier OrbitControl.js résout ce problème et on n'a plus les rotations qui semblent se bloquer aléatoirement. Y a peut etre un parametre pour ça mais j'ai pas trouvé.

Pour le problème de face qui ne se met pas en surbrillance, je le rencontre uniquement quand un drag est en cours, et ce sous chrome. Aucun souci sur firefox.
Ca a l'air d'être en cours de correction: https://codereview.chromium.org/313183004/
A tester avec un mouseenter en js peut être pour contourner le souci ...

Pour les coutures des bords du cube, c'est plus un problème de renderer du CSS 3D. Il faudrait pouvoir appliquer un border sur le polygone plutôt que sur la div, mais je sais pas si c'est possible. Une solution pour empêcher ça, déplacer les faces d'un epsilon vers le centre du cube:

Pour l'animation bizarre quand on clique sur Top et Bottom, j'ai l'impression que c'est au niveau du vector UP de la caméra qu'il y a un souci et qu'il n'est pas rafraichi au moment des mouvements de caméra. J'ai fais quelques tests, mais je n'ai pas eu grand chose de concluant.

Merci beaucoup.
 
Pour le vecteur UP, l'explication est relativement simple: il maintient toujours le vecteur UP de la caméra vers le haut sauf quand il peut pas (quand tu regardes par dessous ou par dessus). Mon vrai problème c'est quand tu transitionne d'une vue de côté vers une vue du haut, il garde le vecteur UP en haut pendant toute l'animation et sur la dernière frame, il abandonne le UP parce qu'il peut plus être vers le haut. J'aimerai que tout le mouvement soit fluide (y compris le décrochage du vecteur UP), mais les calculs des frames intermédiaires me dépassent.

oui c'est ce qu'il me semblait, et vu que tu confirmes mon intuition, je vais tester le comportement en faisant l'anim à la mano plutot qu'en tween.

Dans le code qui se trouve ici : http://jsfiddle.net/juf5603f/3/
 
Est-ce qu'il y a un moyen simple d'afficher ou cacher les tableaux de niveau inférieur lorsque je clique sur un tableau ?  
 
Si je clique sur TopLevel A, j'aimerai que SubLevel 1 B et SubLevel 1 E s'affichent (ils seront masqué avec display:none) par défaut. J'y connais rien en jquery mais je pense que ça doit être faisable assez facilement.

 
Dans ton exemple, c'est pas forcément optimisé car il n'y a pas de relation parent / enfant dans ton DOM.
 
Il faudrait imbriqué les choses, comme avec des listes :
 

 
Et le JavaScript :
 

 
Et ca montre pas les middle offices de Netflix ou Yahoo avec des composants en SVG.

 
en Vanilla JS
http://jsfiddle.net/93tyhdk3/1/

Vous savez comment débugguer sur mobile ? j'ai un comportement CSS différent sur Chrome/Safarie sur mon mobile alors que ça passe bien sur Chrome en émulation mobile...  
 
Je vais tenter le IOS Simulator de Xcode...

avec weinre ça marche bien

https://developer.chrome.com/devtoo [...] -debugging << android + chrome
http://moduscreate.com/enable-remo [...] -in-ios-6/ << ios
https://developer.mozilla.org/fr/do [...] or_Android << fireox android

 
noté  
 
j'ai testé avec l'inspecteur de Safari, pour ne pas avoir a installer des trucs en plus (j'ai déjà un tas de services qui tournent dédié au web...). Il est pas mal cet inspecteur, en l'occurrence il faut définir une height (ou max-height) sur le svg inline sur mobile...

> (function () { "use strict"; return self; })()
< Window
 
> (function () { "use strict"; return this; })()
< undefined

Putain mais non

 
Sous Android avec KitKat, Chrome peut se connecter aux webviews.
 
Safari sait faire ça depuis longtemps.