AngularJS:stä pois siirtyminen

[dezhidki]

In GitLab by @Smibu on Jan 17, 2019, 18:49

AngularJS on vanha kirjasto, jota ei enää kehitetä muuta kuin tietoturvakorjausten osalta. Siitä seuraa myös, etteivät käyttäjät tee sille enää uusia gui-komponentteja, joita TIMissä voisi hyödyntää. Samaten olemassa olevia kirjastoja ei juurikaan enää päivitetä (esimerkki).

Siksi pitäisi miettiä, mihin kirjastoon seuraavaksi siirrytään. Minimivaatimuksia on ainakin:

• pitää olla mahdollista siirtyä vähitellen
• pitää olla riittävän suosittu, jotta sille on saatavilla valmiita komponentteja
• pitää olla ainakin kohtalainen varmuus siitä, että kirjastoa tuetaan vielä 5 vuoden päästä

Mielellään myös:

• tukee TypeScriptiä (joko virallisesti tai sitten jonkun apukirjaston kautta)
• toimii SystemJS:n kanssa (TIMissä käytössä oleva module loader)

Nykyisiä kirjastoja, jotka täyttänee minimivaatimukset:

• Angular (>= 2), suosio: NPM 1.9 miljoonaa latausta viikossa, GitHub 44000 tähteä
• React, suosio: NPM 4.9 miljoonaa latausta viikossa, GitHub 120000 tähteä
• Vue, suosio: NPM 0.8 miljoonaa latausta viikossa, GitHub 125000 tähteä

Muitakin on, mutta nuo vaikuttaisi olevan kolme selkeästi suosituinta.

Alustavasti ajateltiin Reactia, mutta päätettiin jatkaa Angularilla. Ks. siirtymäsuunnitelma.

[dezhidki]

In GitLab by @vesal on Jan 17, 2019, 19:05

Eikä Angulariin voi siirtyä vähitellen? Kumpikon on käytännössä nopeampi? Pitäisi tehdä testi jollakin työlällää, esim csPlugin ja dokuemntti jossa noita on satoja kappaleita. Siinähän menee isoin osa dokumentin käsittelyajasta.

Mitä tarkoitata templaattien tyypit?

Tämä on nin iso homma että se keskeyttää kehityksen pitkäksi ajaksi, joten valinta pitää tutkia perusteellisesti. Sepon tutkimuskessa AngularJS:ssä oli vähiten muutoksia jos koodiin haluttiin uutta. Ja reactiin taisi tulla eniten. Mikä on TSX? Tarviiko sitä tukea jos menee AngularJS -> Angular?

[dezhidki]

In GitLab by @vesal on Jan 17, 2019, 19:11

Niin ja kannattaako hetki katsoa mitä WebAssembly tuo tullessaan? Kaikki olemassa olevat kirjastot ovat DOM + JS ja WebAssembly kuitenkin tulee olemaan tulevaisuutta ja tulee tukemaan huomattavasti laajempaa joukkoa kieliä.

[dezhidki]

In GitLab by @vesal on Jan 17, 2019, 19:19

https://www.toptal.com/front-end/angular-vs-react-for-web-development

[dezhidki]

In GitLab by @Smibu on Jan 17, 2019, 19:30

Eikä Angulariin voi siirtyä vähitellen?

Voi siirtyä vähitellen.

Kumpikon on käytännössä nopeampi?

Ei hajuakaan :)

Mitä tarkoitata templaattien tyypit?

Tarkoitan esim. sitä, että templatea kirjoittaessa esim. PyCharm alleviivaa virheet punaisella. Eli jos komponentille yritetään viedä vääräntyyppistä parametria yms.

Tämä on nin iso homma että se keskeyttää kehityksen pitkäksi ajaksi

Ei, vaan kuten sanoin, sekä Angulariin että Reactiin voi siirtyä vähitellen. Jos ei voisi, niin en tällaista siirtymistä viitsisi ehdottaakaan.

Mikä on TSX?

Tyypitetty versio JSX:stä, ks. https://www.typescriptlang.org/docs/handbook/jsx.html

Tarviiko sitä tukea jos menee AngularJS -> Angular?

Ei, koska Angularilla on sitten se oma template-syntaksinsa joka tarvii sen AOT:n jos haluaa syntaksitarkistuksen. Sitä en sitten osaa sanoa, kumpiko on parempi.

Niin ja kannattaako hetki katsoa mitä WebAssembly tuo tullessaan? Kaikki olemassa olevat kirjastot ovat DOM + JS ja WebAssembly kuitenkin tulee olemaan tulevaisuutta ja tulee tukemaan huomattavasti laajempaa joukkoa kieliä.

Joo, sekin on vaihtoehto ja uskon kanssa, että WASM tulee olemaan suosittu.

[dezhidki]

In GitLab by @vesal on Jan 17, 2019, 19:54

Ehdottaisin jotakin seuraavaa:

1) Rust-versio valmiiksi

2) Joku mini csPlugin version kummallakin, Angular ja React ja sitten Rusin kanssa esim Ohj1 dokusta versio jossa tuolla mini csPluginilla tehdään ne mitkä menee kivuttomasti (ei mitään Parson, Tauno yms siinä mini-versiossa). Tosin nyt todennäköisesti kun AngularJS:än turhaa jatkuvaa virkistämistä on katsonut, niin uskoisin että ihan rehellinen suora näkymän muokkaus sen mukaan mitä halutaan, olisi nopeampi kuin muuttujien arovoilla ratkaistava ulkoasu. Tosin tuotakin pitäisi kokeilla isommassa mittakaavassa että paljonko jonkun tietyn funktion kutsua nyt tulee sivun laskennan aikana. Koska osa kutsuista näyttää tulevan jos komponentti on aktiivinen. Ja silloin hyvässä lykyssä ei tulkeen 30 kutsua joka kompomenttia kohti.

3) Noita vertailuja tehdessä voi olla kulunut sen verran aikaa että jotakin häämöttää siellä mitä WebAssembly rintamalta on tulossa.

Sitten pitäisi miettiä tulevai asioita ennen siirtymää tehdessä että millainen koodi olisi sellaista, että siitä olisi helpointa siirtyä mihin vaan TypeScript-kehykseen.

[dezhidki]

In GitLab by @Smibu on Jan 17, 2019, 20:13

Joo, tää voi ihan hyvin jäädä hyllylle odottamaan. Koitan ensi viikolla tuota Rustia jatkaa; huominen voi vierähtää siinä huoneen kuntoon saamisessa.

Sellainen huomio tuosta suorituskykymittauksesta, että jos vaikka React todettaisiin nopeammaksi, niin se ei tarkoita, että niin olisi myös tulevaisuudessa. Eli Reactin ja Angularin paremmuus suorituskyvyn suhteen voi vaihtua teoriassa äärettömän monta kertaa niin kauan kun molempia kirjastoja kehitetään. Paremmuuskerroin lienee siis koko ajan lähellä ykköstä.

TypeScript-refaktoroinneissa suurin työ lienee takana, kun kaikki komponentit ovat nyt luokkia. Se ainakin helpottaa sekä Reactiin että Angulariin siirtymistä.

[dezhidki]

In GitLab by @Smibu on Nov 21, 2019, 14:48

Viimeisin ajatus on siis uuteen Angulariin siirtyminen, jota nyt ajattelin ruveta työstämään. Olen jo testaillut tuon Angular-templaattiprojektin kautta, miten homma toimii.

Reactin kanssa ei ole yhtä selvää, miten se ja AngularJS toimivat rinnakkain eli siinä on riski olemassa. Toki sain silloin sen simppelin React-komponentin toimimaan AngularJS:ssä, mutta se oli kolmannen osapuolen kirjasto ja siihen nojaaminen on jokseenkin epävarmaa.

Angularin ohjeessa on selkeä prosessi päivittämiseen.

Ensimmäiseksi täytyy Angularin buildsysteemi saada käyttöön. Askeleet:

• Kirjastot SystemJS ja JSPM voi poistaa tarpeettomina.
• Vain 1 tsconfig (timApp-kansioon).
• Simcir-skriptit ja muut skriptit, joita dynaamisesti importataan, täytyy luultavasti muuttaa .ts-päätteisiksi.
• Angularin konffaus (angular.json-tiedosto).
• Dynaamisiin importteihin, joissa ei ole vakioimporttia, pitää todennäköisesti tehdä switch-caset, koska buildsysteemin täytyy tietää staattisesti kaikki mahdolliset importit.
• Skripti build_plugin_js.sh pois. Buildsysteemi hoitaa kaikkien käännökset ja code splittailun eri tiedostoihin importtien perusteella automaattisesti.

Muuhun koodiin ei pitäisi juuri tarvita koskea, koska lähes kaikki on jo TypeScriptiä.

Näiden jälkeen voi sitten ruveta kirjoittamaan Angular 9-komponentteja (ja muuntaa nykyisiä komponentteja).

[dezhidki]

In GitLab by @vesal on Nov 21, 2019, 14:54

Näiden jälkeen voi sitten ruveta kirjoittamaan Angular 9-komponentteja (ja muuntaa nykyisiä komponentteja).

Olisiko jonkin yksinkertaisen jälkeen järkeä kokeille sitä timTablea? Jos se ei oleellisesti nopeudu, kirjoitan sen kokonaan HTML:llä DOM-puuta hypistellen.

[dezhidki]

In GitLab by @Smibu on Nov 21, 2019, 14:57

Olisiko jonkin yksinkertaisen jälkeen järkeä kokeille sitä timTablea? Jos se ei oleellisesti nopeudu, kirjoitan sen kokonaan HTML:llä DOM-puuta hypistellen.

Joo, sitä varmaan kannattaa testata ensimmäisten joukossa.

[dezhidki]

In GitLab by @Smibu on Nov 21, 2019, 15:01

Mutta siis veikkaan, että nopeutuu varmasti, koska Angularissa ei ole watcheja: https://stackoverflow.com/questions/34569094/what-is-the-angular-equivalent-to-an-angularjs-watch

[dezhidki]

In GitLab by @Smibu on Dec 3, 2019, 13:49

Päivitän samalla Simcirin; sen uusin versio ei näköjään enää tarvitse jQueryä.

[dezhidki]

In GitLab by @vesal on Dec 3, 2019, 13:55

Mika Lehtinen commented:

Päivitän samalla Simcirin; sen uusin versio ei näköjään enää tarvitse jQueryä.

Varovasti, mulla saattoi olla jotakin siihen koodiin tehtyjä muutoksia kun kaveri ei nitä itse tehnyt. Mm. kai että touch toimii. Miten lienee voi verrata...

[dezhidki]

In GitLab by @Smibu on Dec 3, 2019, 14:13

Joo, ei noita sun muutoksia onneksi paljon ole. Vaikuttaisi, että on helppo siirtää ne uusimpaan versioon.

[dezhidki]

In GitLab by @vesal on Dec 3, 2019, 14:14

Joo, ei noita sun muutoksia onneksi paljon ole. Vaikuttaisi, että on helppo siirtää ne uusimpaan versioon.

Tietysti pitää katsoa onko se jo noita itse korjanntu, muistaakseni touchin toimimattomuus oli yksi ongelma alkuperäisessä, muttaa siitä on jo monta vuotta...

Vesa

[dezhidki]

In GitLab by @Smibu on Dec 3, 2019, 14:16

Tietysti pitää katsoa onko se jo noita itse korjanntu

Ei ollut kun katsoin; ei siellä mainita "touch" missään.

[dezhidki]

In GitLab by @vesal on Dec 3, 2019, 14:17

Ei ollut kun katsoin; ei siellä mainita "touch" missään.

Mutta kannattaahan se kokeilla jos käyttää jotakin kirjostoa joka tuon tarjoaa. Eli raakaa versiota kokeilee kännykällä ensin ja jos toi toimi, niin sitten niitä mun muutoksia. Tietysti ne pitäisi osata lisätä fiksummin että seuraavassa pöivityksessä olisi taas helppo siirtää...

[dezhidki]

In GitLab by @Smibu on Dec 3, 2019, 14:23

Mutta kannattaahan se kokeilla jos käyttää jotakin kirjostoa joka tuon tarjoaa.

Ei; kyllä se on aivan päivänselvää, ettei se tue touchia:

https://github.com/kazuhikoarase/simcirjs/

Tuolla on vain muutama JS-tiedosto eikä se käytä NPM:ää tai muullakaan tavalla mitään ulkoisia kirjastoja.

Ja sain jo mergettyä ne sun muutokset tuohon.

[dezhidki]

In GitLab by @vesal on Dec 3, 2019, 14:27

saiskohan sitä suostuteltua laittamaan nuo muutokset siihen omaan, tukis se haittaisi jos tukisi toucia. Oliko niillä muutoksilla muuta virkaa?

Saattoi oll ajoku millä datan voi hakea?

[dezhidki]

In GitLab by @Smibu on Dec 3, 2019, 14:32

saiskohan sitä suostuteltua laittamaan nuo muutokset siihen omaan, tukis se haittaisi jos tukisi toucia.

Suljettujen pull requestien perusteella ei ole erityisen innokas mergeämään muiden muutoksia. Muutenkin tuota kirjastoa päivitetään tosi harvoin (viimeksi helmikuussa 2018).

Ei ollut kuin touch-muutoksia. Tuossa diffi:

Klikkaa diffi auki

```diff diff --git a/timApp/modules/cs/simcir/simcir.js b/timApp/modules/cs/simcir/simcir.js index f115d8a67..eeab5d379 100755 --- a/timApp/modules/cs/simcir/simcir.js +++ b/timApp/modules/cs/simcir/simcir.js @@ -167,7 +167,9 @@ var simcir = function($) { var delay = 50; // ms var limit = 40; // ms var _queue = null; + var postEvent = function(event) { + checkTouch(event); if (_queue == null) { _queue = []; } @@ -251,11 +253,13 @@ var simcir = function($) { var $circle = createSVGElement('circle'). attr({cx: 0, cy: 0, r: 4}); node.$ui.on('mouseover', function(event) { + checkTouch(event); if (isActiveNode(node.$ui) ) { addClass(node.$ui, 'simcir-node-hover'); } }); node.$ui.on('mouseout', function(event) { + checkTouch(event); if (isActiveNode(node.$ui) ) { removeClass(node.$ui, 'simcir-node-hover'); } @@ -291,6 +295,7 @@ var simcir = function($) { } } node.$ui.on('nodeValueChange', function(event) { + checkTouch(event); if (_value != null) { addClass(node.$ui, 'simcir-node-hot'); } else { @@ -382,6 +387,7 @@ var simcir = function($) { var addInput = function(label, description) { var $node = createNode('in', label, description, device.headless); $node.on('nodeValueChange', function(event) { + checkTouch(event); device.$ui.trigger('inputValueChange'); }); if (!device.headless) { @@ -628,6 +634,7 @@ var simcir = function($) { $('BODY').append($dlg); var dragPoint = null; var dlg_mouseDownHandler = function(event) { + checkTouch(event); if (!$(event.target).hasClass('simcir-dialog') && !$(event.target).hasClass('simcir-dialog-title') ) { return; @@ -641,8 +648,11 @@ var simcir = function($) { y: event.pageY - off.top}; $(document).on('mousemove', dlg_mouseMoveHandler); $(document).on('mouseup', dlg_mouseUpHandler); + $(document).on('touchmove', dlg_mouseMoveHandler); + $(document).on('touchend', dlg_mouseUpHandler); }; var dlg_mouseMoveHandler = function(event) { + checkTouch(event); moveTo( event.pageX - dragPoint.x, event.pageY - dragPoint.y); @@ -650,8 +660,11 @@ var simcir = function($) { var dlg_mouseUpHandler = function(event) { $(document).off('mousemove', dlg_mouseMoveHandler); $(document).off('mouseup', dlg_mouseUpHandler); + $(document).off('touchmove', dlg_mouseMoveHandler); + $(document).off('touchend', dlg_mouseUpHandler); }; $dlg.on('mousedown', dlg_mouseDownHandler); + $dlg.on('touchstart', dlg_mouseDownHandler); $closeButton.on('mousedown', function() { $dlg.remove(); }); @@ -766,6 +779,7 @@ var simcir = function($) { var dragPoint = null; var bar_mouseDownHandler = function(event) { + checkTouch(event); event.preventDefault(); event.stopPropagation(); var pos = transform($bar); @@ -774,8 +788,11 @@ var simcir = function($) { y: event.pageY - pos.y}; $(document).on('mousemove', bar_mouseMoveHandler); $(document).on('mouseup', bar_mouseUpHandler); + $(document).on('touchmove', bar_mouseMoveHandler); + $(document).on('touchend', bar_mouseUpHandler); }; var bar_mouseMoveHandler = function(event) { + checkTouch(event); calc(function(unitSize) { setValues( (event.pageY - dragPoint.y) / unitSize, _min, _max, _barSize); @@ -784,9 +801,13 @@ var simcir = function($) { var bar_mouseUpHandler = function(event) { $(document).off('mousemove', bar_mouseMoveHandler); $(document).off('mouseup', bar_mouseUpHandler); + $(document).off('touchmove', bar_mouseMoveHandler); + $(document).off('touchend', bar_mouseUpHandler); }; $bar.on('mousedown', bar_mouseDownHandler); + $bar.on('touchstart', bar_mouseDownHandler); var body_mouseDownHandler = function(event) { + checkTouch(event); event.preventDefault(); event.stopPropagation(); var off = $scrollbar.parents('svg').offset(); @@ -800,6 +821,7 @@ var simcir = function($) { } }; $body.on('mousedown', body_mouseDownHandler); + $body.on('touchstart', body_mouseDownHandler); var setSize = function(width, height) { _width = width; @@ -1088,27 +1110,63 @@ var simcir = function($) { var $srcNode = $target.closest('.simcir-node'); var off = $workspace.offset(); var pos = offset($srcNode); + var friendType = ".simcir-node-type-in" if ($srcNode.attr('simcir-node-type') == 'in') { disconnect($srcNode); + friendType = ".simcir-node-type-out" } dragMoveHandler = function(event) { + checkTouch(event); var x = event.pageX - off.left; var y = event.pageY - off.top; $temporaryPane.children().remove(); $temporaryPane.append(createConnector(pos.x, pos.y, x, y) ); }; dragCompleteHandler = function(event) { + checkTouch(event); $temporaryPane.children().remove(); var $dst = $(event.target); - if (isActiveNode($dst) ) { - var $dstNode = $dst.closest('.simcir-node'); + var $dstNode = findClosest(event, friendType, 40); + if ( $dstNode && isActiveNode($dstNode) ) { + // if (isActiveNode($dst) ) { + // var $dstNode = $dst.closest('.simcir-node'); connect($srcNode, $dstNode); updateConnectors(); } }; }; + + var findClosest = function(event, cond, maxdist) { + var a = $(cond); + var best = null; + var x0 = event.pageX; + var y0 = event.pageY; + var mindist = maxdist*maxdist; // must be closer than this + for (i = 0, len = a.length; i < len; i++) { + var cur = $(a[i]); + var cir = $(cur[0].childNodes[0]); + // if ( cir.context != circle) continue; + coff = cir.offset(); + if (!coff) continue; + var dx = cir.offset().left+4 - x0; // suppose circle with radious 0f 4 + var dy = cir.offset().top+4 -y0; + var curdist = dx*dx + dy*dy; + if ( curdist < mindist ) { + if ( curdist > 4*4 ) { // if inside circle, always accept + if ( cur.attr('simcir-node-type') == 'in' && dx < 0 ) continue; // in from left + if ( cur.attr('simcir-node-type') == 'out' && dx > 0 ) continue; // out from right + } + best = cur; + mindist = curdist; + } + } + return best; + } + + var beginNewDevice = function(event, $target) { + checkTouch(event); var $dev = $target.closest('.simcir-device'); var pos = offset($dev); $dev = createDevice(controller($dev).deviceDef); @@ -1118,13 +1176,15 @@ var simcir = function($) { x: event.pageX - pos.x, y: event.pageY - pos.y}; dragMoveHandler = function(event) { + checkTouch(event); transform($dev, event.pageX - dragPoint.x, event.pageY - dragPoint.y); }; dragCompleteHandler = function(event) { + checkTouch(event); var $target = $(event.target); - if ($target.closest('.simcir-toolbox').length == 0) { + if ($target.closest('.simcir-toolbox').length == 0 || true) { // for some reason dod not find in touch?? $dev.detach(); var pos = transform($dev); transform($dev, pos.x - toolboxWidth, pos.y); @@ -1162,6 +1222,7 @@ var simcir = function($) { x: event.pageX - pos.x, y: event.pageY - pos.y}; dragMoveHandler = function(event) { + checkTouch(event); // disable events while dragging. enableEvents($dev, false); var curPos = transform($dev); @@ -1177,10 +1238,15 @@ var simcir = function($) { updateConnectors(); }; dragCompleteHandler = function(event) { + checkTouch(event); var $target = $(event.target); + var body = $(".simcir-body"); + var sx = 0; + if ( body ) sx = body.offset().left + 100; enableEvents($dev, true); $.each($selectedDevices, function(i, $dev) { - if ($target.closest('.simcir-toolbox').length == 0) { + //if ($target.closest('.simcir-toolbox').length == 0) { + if ( event.pageX > sx ) { adjustDevice($dev); updateConnectors(); } else { @@ -1191,6 +1257,7 @@ var simcir = function($) { }; var beginSelectDevice = function(event, $target) { + checkTouch(event); var intersect = function(rect1, rect2) { return !( rect1.x > rect2.x + rect2.width || @@ -1210,6 +1277,7 @@ var simcir = function($) { var pos = offset($devicePane); var p1 = {x: event.pageX - off.left, y: event.pageY - off.top}; dragMoveHandler = function(event) { + checkTouch(event); deselectAll(); var p2 = {x: event.pageX - off.left, y: event.pageY - off.top}; var selRect = pointToRect(p1, p2); @@ -1234,11 +1302,13 @@ var simcir = function($) { }; var mouseDownHandler = function(event) { + checkTouch(event); event.preventDefault(); event.stopPropagation(); var $target = $(event.target); - if (isActiveNode($target) ) { - beginConnect(event, $target); + var $closetarget = findClosest(event, ".simcir-node", 20); + if ($closetarget && isActiveNode($closetarget) ) { + beginConnect(event, $closetarget); } else if ($target.closest('.simcir-device').length == 1) { if ($target.closest('.simcir-toolbox').length == 1) { beginNewDevice(event, $target); @@ -1250,6 +1320,8 @@ var simcir = function($) { } $(document).on('mousemove', mouseMoveHandler); $(document).on('mouseup', mouseUpHandler); + $(document).on('touchmove', mouseMoveHandler); + $(document).on('touchend', mouseUpHandler); }; var mouseMoveHandler = function(event) { if (dragMoveHandler != null) { @@ -1268,8 +1340,11 @@ var simcir = function($) { $temporaryPane.children().remove(); $(document).off('mousemove', mouseMoveHandler); $(document).off('mouseup', mouseUpHandler); + $(document).off('touchmove', mouseMoveHandler); + $(document).off('touchend', mouseUpHandler); }; $workspace.on('mousedown', mouseDownHandler); + $workspace.on('touchstart', mouseDownHandler); //------------------------------------------- // @@ -1333,6 +1408,7 @@ var simcir = function($) { $placeHolder.text(''); $placeHolder.append($('

'). addClass('simcir-body'). + css('touch-action','none'). // for IE and EDGE append($workspace). append($dataArea). on('click', function(event) { @@ -1447,4 +1523,16 @@ var simcir = function($) { controller: controller, unit: unit }; + +function checkTouch(event) { + if ( !event.originalEvent ) return; + if ( !event.originalEvent.touches ) return; + var touch = event.originalEvent.touches[0] || event.originalEvent.changedTouches[0]; + if ( !touch ) return; + event.pageX = touch.pageX; + event.pageY = touch.pageY; +} + }(jQuery); + + ```

[dezhidki]

In GitLab by @Smibu on Dec 9, 2019, 11:17

Pyrin ennen joululomaa vetämään tämän loppuun asti. Loppusuoralla on; kaikki tähän asti testatut jutut tuntuu toimivan. Joitain viimeistelyjä on vielä tehtävä. Laitan tämän viimeistään huomenna testiin devs5:lle.

Päivitin samalla Pythonin 3.6 -> 3.8 (siis vain TIM-konttiin, en cspluginiin tai muihin pluginkontteihin). Funktio time.clock() on poistunut eli jos tuota on cspluginissa, niin se kannattaa vaihtaa time.perf_counter().

[dezhidki]

In GitLab by @vesal on Dec 9, 2019, 11:21

Pyrin ennen joululomaa vetämään tämän loppuun asti. Loppusuoralla on; kaikki tähän asti testatut jutut tuntuu toimivan. Joitain viimeistelyjä on vielä tehtävä. Laitan tämän viimeistään huomenna testiin devs5:lle.

Mitäs siellä käytännössä on? Koko TIM vai joku tietty komponentti?

[dezhidki]

In GitLab by @Smibu on Dec 9, 2019, 11:27

Mitäs siellä käytännössä on? Koko TIM vai joku tietty komponentti?

En siis oo vielä muuntanut mitään olemassa olevia komponentteja uudelle Angularille vaan vain ottanut Angularin buildisysteemin käyttöön. Olisi toki hyvä, jos ehtisin myös jonkun komponentin malliksi tehdä (ja päivittää dev-ohjeita).

[dezhidki]

In GitLab by @Smibu on Dec 10, 2019, 15:43

Nyt on tuolla Angular 9:n buildisysteemi: https://timdevs02-5.it.jyu.fi/

Sellainen ongelma on, että tuotannossa pitää buildata skriptit manuaalisesti git pullin jälkeen, jos ne muuttuu. Angularissa on kyllä watch mode (jota voi ja kannattaa käyttää lokaalisti), mutta watch modella generoidut skriptit ei toimi vanhoissa selaimissa (esim. IE).

Eli ilman watch modea Angular buildaa skripteistä 2 versiota:

• sellaiset, jotka toimii uudemmissa selaimissa ja ovat pienempiä ja nopeampia ("es2015")
• sellaiset, jotka toimii vanhoissakin selaimissa ("es5"), mutta ovat isompia ja hitaampia, koska jotkut JS-ominaisuudet pitää emuloida toimimaan vanhalla JS:llä

ja nuo skriptit sitten itse osaavat päättää, että kumpaa versiota käytetään; siitä ei itse tarvi huolehtia.

[dezhidki]

In GitLab by @vesal on Dec 10, 2019, 15:55

Nyt on tuolla Angular 9:n buildisysteemi: https://timdevs02-5.it.jyu.fi/

Onko tuolla jotenkin erilainen JS kuin tuotannossa.

Molemmissa DomContentLoaded on n. 6 sek (view/1) sitten Load dev5: 10.82 tuotanto 6.21 ja ensimmäinen finish dev 5: 11.5 sek, tuotanto 13 sek.

Eli erona että tuo Load antaa eri arvon, mutta suurinpiirtein samaan aikaan ovat käytössä. Testattu kotiverkon yli joka ei vastaa Agoran verkkoa.

[dezhidki]

In GitLab by @Smibu on Dec 10, 2019, 16:01

Onko tuolla jotenkin erilainen JS kuin tuotannossa.

Ei merkittävästi. Eli en odottanutkaan, että isojen dokujen lataus nopeutuisi pelkällä buildisysteemin päivityksellä mitenkään huomattavasti.

En tiedä, mistä nuo load-erot tulevat...

Sen sijaan esim. TIMin etusivu vaikuttaisi latautuvan jokseenkin nopeammin ainakin Firefoxilla.

[dezhidki]

In GitLab by @vesal on Dec 11, 2019, 19:46

Sen sijaan esim. TIMin etusivu vaikuttaisi latautuvan jokseenkin nopeammin ainakin Firefoxilla.

No on tuoss Finish-kohdassa Chromella 1.20 s vs 1.5 sek devs-koneen eduksi.

[dezhidki]

In GitLab by @Smibu on Dec 11, 2019, 21:03

Mergeän tämän huomenna ja laitan tuotantoon klo 16 jälkeen.

Laitan sitten tänne vielä ohjeet, miten lokaalisti päivitetään; muutama kansio pitää poistaa ennen kuin Angularilla buildaa.

[dezhidki]

In GitLab by @Smibu on Dec 12, 2019, 14:17

Mergesin masteriin nyt.

Lokaalit päivitysaskeleet:

./dc down
git pull
rm -r timApp/modules/jsrunner/node_modules
rm -r timApp/modules/jsrunner/build
rm -r timApp/modules/jsrunner/dist
rm -r timApp/static/scripts/build
rm -r timApp/static/scripts/jspm_packages
rm -r timApp/static/scripts/node_modules
rm -r timApp/static/scripts/build-ide
rm -r timApp/static/scripts/decls

Sitten seuraa kääntämisohjeita kohdasta ./docker-compose.sh pull ja siitä eteenpäin.

[dezhidki]

In GitLab by @Smibu on Dec 12, 2019, 14:34

Päivitä myös NodeJS uusimpaan LTS-versioon ja tarkista päivitetyt PyCharm-asetukset.

[dezhidki]

In GitLab by @Smibu on Dec 12, 2019, 16:14

Nyt siis tuotannossakin.

[dezhidki]

In GitLab by @vesal on Dec 12, 2019, 19:56

Mulla nuo piti tehdä sudona

Onko völisä tekeekä git pull PC-puolella. Siellä mulla se tuli, mutta linux-puolella valittaa tallentamattomista muutoksista...

[dezhidki]

In GitLab by @Smibu on Dec 12, 2019, 19:57

Onko völisä tekeekä git pull PC-puolella.

Ei väliä, miten pullaa.

[dezhidki]

In GitLab by @Smibu on Dec 13, 2019, 18:03

Kokeilin tuon tim-header-komponentin muuntaa uudeksi Angulariksi. Alustavasti toimii, mutten vielä ehtinyt testailla kaikkia kohtia ja viimeistellä, joten se on eri haarassa.

Myös AOT-kääntäjä näyttää toimivan, eli --prod-tilassa komponentin template kääntyy suoraan JS:ksi.

[dezhidki]

In GitLab by @Smibu on Jan 8, 2020, 17:27

Tuotannossa on nyt muutama komponentti muunnettu Angulariin:

• create-item
• tim-header
• tim-alert

Seuraavaksi muunnan pali-pluginin ja sen jälkeen voisin katsoa sitä timTablea.

[dezhidki]

In GitLab by @Smibu on Jan 14, 2020, 20:17

Pali-plugin muunnettu Angulariksi.

Päivitetty samalla Angular 9 RC 4 -> RC 8. Lokaalilla:

• poista timApp/node_modules
• aja Windowsissa timApp:ssa npm i

[dezhidki]

In GitLab by @Smibu on Jan 21, 2020, 21:57

Nyt on devs5:llä alustavassa testissä timtable ja tableform Angularilla tehtynä.

Bugeja/TODO ennen tuotantoa ainakin:

• taulukon skrolli hyppää väärään paikkaan, kun pikkueditin aukaisee
• chromella hitautta havaittavissa, firefoxilla tuntuu olevan ok (muttei liene huonompi kuin nyky-tuotanto)
• solujen tyylien cache ei päivity, jos muokkaa taulukkoa

[dezhidki]

In GitLab by @vesal on Jan 21, 2020, 22:26

Nyt on devs5:llä alustavassa testissä timtable ja tableform Angularilla tehtynä.

• chromella hitautta havaittavissa, firefoxilla tuntuu olevan ok (muttei liene huonompi kuin nyky-tuotanto)

Tuo on ehkä "pahin" mikä mulla on:

https://tim.jyu.fi/teacher/kurssit/tie/ohj1/2019s/mailit#demotable

Siellä avaa demotaulukon ja yrittää kirjoitata soluihin.

Sama jos ruksii jonkun ja sitten yrittää lähettää sähköpostia.

Firefoxilla voi krijoittaa, mutta ei se vielä ole sujuvaa, eli joku varastaa aikaa silloin kunk irjoitetaan. Eihän tuon kirjoittamisen aikana tarviisi mitään päivittää?

Muuten noissa taulukkojen avauksissa voisi olla se pöyrivä.

Firefoxilla (ja edgellä) demotaulukko ei leviä näytön ulkopuoellle kuten Chromessa (mikä on tarkoitus että olisi leveä).

Sama saattaa koskea ihan noita Ryhmäsivujen taulukoita.

Vesa

[dezhidki]

In GitLab by @vesal on Jan 21, 2020, 22:36

Siis testejä varten tietysti tuo:

https://timdevs02-5.it.jyu.fi/teacher/kurssit/tie/ohj1/2019s/mailit#demotable

ja tuolla ei Chromessa kirjoittaminen sähköpostiin enää ole toivottoman hidasta.

[dezhidki]

In GitLab by @vesal on Jan 21, 2020, 22:42

• chromella hitautta havaittavissa, firefoxilla tuntuu olevan ok (muttei liene huonompi kuin nyky-tuotanto)

Joo ei chrome huonompi ole, mutta ei se ihan myöskään soluihin kirjoittaessa seuraa tahdissa mukana. Pitäisiköhän jotenkin se taulukon näppäinten kuuntelu poistaa kirjoittamisen ajaksi. Tosin se vaatisi kuuntelijoiden tuplaamista että pikkueditorissa kuunneltaisiin samoja että nuolet yms. toimisivat.

[dezhidki]

In GitLab by @vesal on Jan 21, 2020, 22:44

• solujen tyylien cache ei päivity, jos muokkaa taulukkoa

Periaatteessa nuo tyylit muuttuvat aika hallitusti, eli niitä voisi ihan itse päivittää silloin kun ne muuttuvat, jos sillä välttäisi turhaan "kuuntelua".

[dezhidki]

In GitLab by @Smibu on Jan 27, 2020, 20:20

Pitäisiköhän jotenkin se taulukon näppäinten kuuntelu poistaa kirjoittamisen ajaksi.

Ei Chromen hitaus näppäinkuuntelijoista johdu. Kopioin 430x50-kokoisesta timtablesta (siis likimain se sun "worst case") pelkän staattisen DOM-puun ja heitin tänne. Voi todeta, että Chromella jos esim. klikkailee fokusta inputtiin ja pois edestakaisin, niin menee hyvin jähmeäksi. Eikä tuolla sivulla ole yhtään kuuntelijaa eikä JavaScriptiä (muuta kuin tuo stackblitzin bootstrappauskoodi). Tässä editori, jolla tuon testisivun tein.

Kun sitten yrittää Chromen profilointityökaluilla tutkia, niin siellä näkyy vain tyhjä task ilman call stackia:

TimTable:

Vastaava staattisessa versiossa (stackblitz-sivu):

Ongelmaa on esiintynyt muillakin, ja Chromen bug trackerissa on tähän liittyvä kortti, johon joku Chromium-kehittäjä on kommentoinut "Interesting..".

Mutta siis kuten sanoit, niin se emailin kirjoitus ei Chromellakaan ole enää toivottoman hidasta, joten tyydytään toistaiseksi tähän ja sain tuota solun muokkausta optimoitua vielä sen verran, että Firefoxilla muokkaus on tuolla jättitaulukollakin aika sujuvaa.

Vielä siis nuo pari muuta bugia korjaamatta. Sitten voi mennä tuotantoon.

[dezhidki]

In GitLab by @Smibu on Jan 31, 2020, 17:15

Ei Chromen hitaus laajennuksistakaan johdu, koska vaikka ne kaikki ottaa pois päältä, niin ei auta. Agoran työasemalla on jokin muu ero, koska siellä Chromessa ei ole hitautta.

Päivittelin solun highlight-tyyliä ja taulukon edit-tilan highlight-tyyliä. Kelpaako sulle nuo, niin päivittelen ne testikuvat?

Päivitin devs5:lle myös: https://timdevs02-5.it.jyu.fi/teacher/kurssit/tie/ohj1/2019s/mailit

[dezhidki]

In GitLab by @Smibu on Jan 31, 2020, 17:17

Olikohan muuten mitään syytä, miksi timtablen templatessa oli td:n sisällä vielä div ja vasta sen sisällä solun sisältö? Otin divin pois, enkä ainakaan vielä huomannut, että se olisi hajottanut mitään.

[dezhidki]

In GitLab by @vesal on Jan 31, 2020, 19:09

eihän se vaan verkon nopeus (ping) voisi olla. Mulla se on 25-40 ms...

[dezhidki]

In GitLab by @Smibu on Jan 31, 2020, 19:31

Ei, koska se stackblitz on vain staattinen HTML.

[dezhidki]

In GitLab by @vesal on Jan 31, 2020, 19:34

ootko katsonut ettei chrome yritä jotakin kommunikoida silti Googlelle?

Vesa

[dezhidki]

In GitLab by @Smibu on Jan 31, 2020, 20:29

ootko katsonut ettei chrome yritä jotakin kommunikoida silti Googlelle?

Ei näy networktabissa mitään. Olisihan tosiaan aika kummallista, jos Chrome yrittäisi lähettää Googlelle jotakin, jos staattisella sivulla vain klikkailee fokusta tekstikenttään ja pois :)

Ainoat ulkoiset oireet ovat, että sivu hyytyy ja CPU:n käyttö nousee.

[dezhidki]

In GitLab by @vesal on Jan 31, 2020, 21:09

oisko omituista jos se kuitenkin lähettelee. ja näyttääkö se network tabi sellaiset joita ei haluta nähdä. pitäisikö katsoa jollakin firesharkilla tms

Vesa

[dezhidki]

In GitLab by @Smibu on Jan 31, 2020, 21:55

Ei näy wiresharkilla mitään.

[dezhidki]

In GitLab by @vesal on Feb 1, 2020, 13:05

Ei Chromen hitaus laajennuksistakaan johdu, koska vaikka ne kaikki ottaa pois päältä, niin ei auta. Agoran työasemalla on jokin muu ero, koska siellä Chromessa ei ole hitautta.

Uusi Edge toimii paremmin:

https://click.kotimikro.fi/mail/RLS?mid=1667960668&guid=63zc0rj2020WkDSUaA3Y&lid=84878322&s=1

Myös nuo taulukot näkyvät leveinä kuten pitääkin. Samoin Macin Safarissa. Eli taulukon leveyden suhteen ongelmaksi jää "vain" FireFox.

Mäkin Safarissa ei voi liikkua mitenkään painikkeilla taulukossa :-(

Omituista muuten tuolla mailit taulukossa ettei niissä kahdessa ylemäässä näy kuin avoin. Se näyttää 58 riviä ylänurkassa, mutta näyttää vain yhden. Tosin sitä 58 klikkaamalla se näyttää kaikki. Ihan kuin joku suodatus olisi oletuksena päällä?

Päivittelin solun highlight-tyyliä ja taulukon edit-tilan highlight-tyyliä. Kelpaako sulle nuo, niin päivittelen ne testikuvat?

image

Tuo näytää vähän omituiselta kun on vierekkäisiä/maalattuja taulukon soluja. Eli tuo korostus häviää.

Kannattaisiko se korostus yrittää tehdä samanlaiseksi kuin Google Sheetissä?

Vesa