Lumea Javascript 2017 pentru Incepatori

javascript

(Pîrvan Marian) #1

Salut, am ajuns in punctul in care observ ca javascript a ajuns poate o “provocarea prea mare” , ma intereseaza in scop final sa gasesc un framework care sa ma ajute sa inteleg mai bine celelalte framework-uri si javascript in general.

Personal eu prefer Vue, insa acum trebuie sa lucrez cu Ext Js, asa ca am nevoie de o calea de mijloc cat mai buna pentru gasit macar putin Echilibru.

Am luat in calcul ca prima si prima data trebuie sa inteleg toata notiunile de javascript modern de la oop, la arhitectura MVVM, asemenea ma intereseaza si ceva pentru a face test la nivel universal(ideal fiind un program care sa poata face teste pe orice tip de aplicatie,fara sa conteze framework-ul).

Ma gandesc sincer ca poate Angular sau React ar fi mai potrivit.

Mentionez ca nu pot spune ca am 6 luni sa fac doar javascript simplu fara vrun mvc…


(Ovidiu Grigoras) #2

Salut, din posturile tale pe alte topicuri am tras concluzia(poate gresit) ca incerci sa inveti prea multe in diferite directii si tind sa cred ca asta ar fi una din probleme. Cum ai zis si tu, important e sa intelegi cum functioneaza javascript-ul. Frameworkurile fie ele react, angular, vue, ember etc etc au la baza niste concepte. E mult mai usor sa intelegi un framework daca intelegi defapt ce fac ei in spate. De exemplu eu cand am inceput sa lucrez pe angular m-am uitat ce fac anumite metode in spate si apoi mi-a fost mai usor sa aplic pe ce aveam eu nevoie. Nu zic, pentru fiecare framework trebuie sa treci si prin documentatia lor dar nu inseamna ca tre sa te axezi pe unul anume. Ele sunt aici sa ne usureze munca si nu sa ne bage in mocirla cu 1000 de termeni si metode.


(Pîrvan Marian) #3

Da de la punctul ca trebuie sa invat javascript in sine e un punct de plecare. Ma gandeam ca poate efectiv o fi alta metoda.

Cred ca discutia se rezuma la : recomandarea unei carti de Javascript cu OPP si arhitectura in general de preferat
recomandare tutoriale
concluzia cuiva care a lucrat ceva timp cu ele…

Mersi.


(Ovidiu Grigoras) #4

Cartile si tutorialele au rolul lor si sunt benefice dar in cazul meu a functionat practica si banuiesc ca si in cazul altora. Gasesti pe net o sumedenie de idei de mini-proiecte in care sa-ti puna cunostintele de javascript la incercare.


(Pîrvan Marian) #5

Ma gandeam la recomandarea unui micro framework de js ca si practica, eu nu am lucrat cu javascript deasta am postat aici ma gandeam ca unii au ceva experiente si pareri de inpartit.


(Nicolae) #6

Salut.
Dacă preferi să lucrezi cu Vue ai putea să te uiți la acest wokshop: https://frontendmasters.com/workshops/vue-advanced-features/ în care se explică cum lucrează framework-ul.


(Pîrvan Marian) #7

Lucrez deja cu el la proiectele personale…


(István F.) #8

Umm, cred ca niciodata nu vei stii toate framework-urile, e imposibil, apare minim unul pe zi.
ExtJS e si mai special, e facut pentru firme, e foarte scump si foarte complex, iti da componente pentru aplicatii gata facute, specializat, dai de el doar la proiecte vechi cu buget foarte mare.

In general framework-urile se impart in ~4 categorii daca nu ai observat pana acum :

  1. Librarii bazate pe jsx/hyperscript/h, care merg pe nisa react/elm si mai adauga sau scot anumite lucruri. Deci daca inveti react nu ai treaba cu acestea.
    Daca inveti JSX e cam tot ce trebuie sa stii pe langa cum sa transmiti informatiile prin props si lifecycle-urile in care folosesti setState sau alte functii pentru componente.
    – Foarte util e sa stii si programare functionala (map/reduce/filter/…), react e de obicei folosit cu redux, care e un concept foarte simplu, dar care are foarte multe solutii mindfuck (vezi sagas/thunk) pentru side-effects pentru a crea o arhitectura cat mai pura. Dar daca nu iti mai ajunge setState go for mobx, redux e ok, dar te pune la munca.
    Mai nou in loc de redux poti folosi pur si simplu clientul apollo-graphql daca ai un api graphql.
    .

  2. Librarii bazate pe schema angular.js (primul angular), care pun logica in html, doar ca scapa de directivele ng- sau le redenumesc. Respectiv au modele pentru date inspirate din backbone.js si altele.
    Acestea sunt foarte simplu de inteles dar la proiecte complexe te limiteaza mult.
    (vezi vue, extjs-ul vechi parca)

  3. Librarii care imita angular (noul angular 2/4/5…), in general aceste librarii/framework-uri au decoratori precum @Component, @Injector, @Inject… Se inspira mult din tooling-ul pentru Java, asa ca e foarte multa abstractizare si inversare a dependintelor pentru a fi framework-uri gata facute pentru arhitectura profesionala.

  4. Librarii hibride/vanilla, acestea sunt cele mai noi framework-uri care se inspira si din angular si din react, pun laolalta partile bune, inlocuiesc cat mai multe functii custom cu vanilla, gen scapa de jsx cu template strings, folosesc template strings peste tot, sunt foarte functionale (chiar si pipe/compose), se folosesc de metodele/obiectele disponibile in window/document la maxim.

Multe librarii vor mai recomanda webpack, care are o configuratie ciudata, dar totusi usor de inteles daca te joci putin cu el.


(Cosmin Popescu) #9

@LevelCoding ia-o usor

nu stiu daca poti sa inveti JS din framework-uri, nu mi se pare o metoda buna de invatare. Mai intai trebuie sa stapanesti bine bazele, apoi sa treci la nbivelul urmator.
In ziua de azi JS-ul este un limbaj complex, apare cate un framework in fiecare zi

Nu ai nevoie de un framework pt a face ceva simplu. Vrei sa afisezi ceva dintr-o baza de date pe o pagina web ? $.ajax() este suficient.


(Pîrvan Marian) #10

Genial raspuns, ai 2 beri din partea mea :D. M-ar interesa 2-3 carti de OOP, MVVM , MVC pentru javascript si eventual ceva pentru micro framework si topicul e inchis.

Cred ca Ecma 6 e ceva ce ar trebuii sa vad eu.

Am ajuns pe aici : https://www.packtpub.com/all?search=MVVM+Javascript&offset=&rows=&sort=ss_cck_field_date_of_publication+desc ceva pareri ?


(Red) #11

Pe vremea mea se făcea:

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "page.php", true);
  xhttp.send();

Desigur, IE și restul browser-elor foloseau două clase diferite așa că trebuia să identifici care clasă e disponibilă.


(Pîrvan Marian) #12

@RedGuard
Cred ca si 2013 se mai folosea asta ,eu in 2014 vazusem un curs care folosea asta, cred ca prin 2014-2015 a aparut nebunie cu framework-urile(sau ma rog s-a amplificat nebunia)…


(Red) #13

Și eu folosesc vraja din jQuery, dar la o adică pot scrie apelul de mână.

La fel cu orice e in orice framework. Plus că ce cod scriu poate sa aibă 5 kb in loc de 90 cât are tot jQuery-ul minimizat.

Așa că limbajul + funcțiile și metodele din el, pe urma restul.


(Cosmin Popescu) #14

mi se pare una dintre cele mai bune referinte JS


(Cosmin Popescu) #15

eeee

old school !


(István F.) #16

Nici vorba.

http://javascript.info e hands down cea mai buna referinta.

Dupa https://devhints.io pentru cheatsheet.

Eu ma mai uit la https://github.com/DrkSephy/es6-cheatsheet cand uit de destructurare sau imi trebuie ceva mai detaliat.

Daca imi trebuie inspiratie pentru ce cum sa scriu ma uit la https://github.com/airbnb/javascript

Ca si carte sau referinta seria You Don’t Know JS explica foarte multe lucruri ciudate si cazuri de limita, e superba fiecare carte.


(Cosmin Popescu) #17

Nice !
O sa le pun in bookmark !


(Pîrvan Marian) #18

Mersi, mersi imi faci topicul mai frumos.
@navaru ceva pareri ?


(lorenzo) #19

salut. Acum care este cea mai buna metoda ? Eu am invatat-o pe asta si o folosesc. Multumesc


(István F.) #20

XMLHttpRequest e tot ok, doar ca exista si fetch care e mai nou si simplu.

Exista un wrapper foarte practic pentru el :

sau tot old school, dar are ~ 17kb gzipped