Web Development Front-end 2017

114 vizualizări
4 răspunsuri
autor subiect #1
DSF
zZz ツ
6888 mesaje
din 28/04/2005
235 aprecieri
02 februarie 2017, 23:38:41
Salut,

In ultimele luni am prins o pasiune pentru front-end (eu fiind mai mult orientat inspre backend development).
Asa ca am intrat putin in lumea front-end si am ramas uimit ce tooluri si cum se programeaza in lumea front-end. 

Scrii cod JS, schimbi ceva in .sass si in browserele deschise schimbarile au loc fara reload cu ajutorul Webpack Dev Server. Iar cu browsersync si navigarea se sincronizeaza intre browserele deschise (fie ca e pe mobil sau desktop)..

Webpack e unul dintre cele mai utile tooluri ever. 

Toolurile astea sunt scrise in nodejs, o problema ar putea fi ca node_modules sa aibe foarte multe fisiere si foldere din cauza dependentelor intre modulele folosite.

Am lucrat la un proiect de tip SPA (single page application), bazat pe React+Redux. Pe scurt, frontend-ul comunica cu backendul prin schimb de JSONs.


Sa trecem direct la subiect.

Package manager
  • yarn
Javascript
  • React
  • Redux
  • ES6 (promises via fetch, arrow functions, spread operator, destructors, etc) 
CSS
  • sass
Server side development (nodeJS)
  • express JS pentru fake API
  • sockets.io 
  • webpack dev server
Tooluri
  • webpack (pt bundle de js, css, fisiere statice)
  • webpack dev server (pt hot reload js, sass) 
  • babel pt react jsx, es6 transpiling
  • browsersync (ca si plugin la webpack)
  • gulp
  • pm2
  • jslint 
  • jest pt test cases
IDE
  • Visual Studio Code
Am ramas placut impresionat de performanta VScode.. se mista foarte bine, dispune de InteliSense, are GIT, debugger, terminal, etc integrat. 
Avem pasionati de asa ceva pe aici? Daca da, ce folositi?  :D
1 apreciază

Vrei si tu o semnatura asemanatoare? Vezi topicul de creare timeline telefoane mobile.
Publicitate
Publicitate
#2
emmy
MW Addicted
2890 mesaje
din 27/04/2006
23 aprecieri
28 februarie 2017, 12:46:48 • actualizat 28 februarie 2017, 12:48:48 (1 ori)
pentru proiecte mari si foarte mari(corporative) folosesc WebStorm(sau inteliJ). Are multe functii utile.
Front End-ul comunica si cu mysql(nu neaparat doar json).

Angular e foarte interesant, ceva mai complex decat React. Deja s-a tercut la angular 2(interesant e ca e foarte diferit de prima versiune).

Typescript vine in ajutor pentru cei care cunosc C# si nu numai(e scris de microsoft, evident) si se compileaza in javascript.

Pentru CSS sunt frameworkuri cu grid system si responsive(bootstrap, foundation,etc) iar pentru iconite se poate folosi fontawesome.

Ca sa-l completez pe Dsf, sunt mai multe preprocesoare pentru CSS: LESS(care seamana foarte bine cu SASS, dar are cateva minusuri), Stylus e interesant(pentru cei care urasc {} si ; ).
Pentru HTML se poate folosi JADE.

La pachete npm as adauga si uglify(minimizeaza codul css si js).

Front endul e foarte frumos, trebuie doar sa-ti placa si ai de invatat toata viata.  :D

Later Edit: am uitat sa mentionez de yeoman, un pachet npm care foloseste de tooluri care genereaza templateuri. (angular template + build grunt/gulp,bower,etc)
1 apreciază
autor subiect #3
DSF
zZz ツ
6888 mesaje
din 28/04/2005
235 aprecieri
03 martie 2017, 18:16:09 • actualizat 03 martie 2017, 18:23:26 (1 ori)
Eu de la InteliJ am folosit PhpStorm  :D pt php development.

E bine ca ai adus vorba de yoeman, eu nu folosesc inca dar am mai auzit de el.

Am folosit si LESS inainte de SASS.. insa SASS e pe val.

React prmoveaza ES6.. am vazut ca Angular2 e promovat alaturi de Typescript

Webpack vine cu uglify direct. Eu sincer pt aplicatii JS nu vad o solutie mai buna decat webpack. Iar pentru frontend separat complet de backend este absolut ideal. Un super package bundle.

PS: Momentan lucrez la mowned relaunch, o sa fie separat complet de backend (momentan totu e generat prin views php), scris in react si redux in mare. 

O lista cu toolurile folosite aici:
  • React
  • Redux
  • React Router
  • React Router Redux
  • React Motion
  • reselect
  • lodash (throttle, merge)
  • normalizr
  • Font Awesome
  • uuid
  • SASS
  • nodeJS & express (fake API server)
  • isomorphic-fetch
  • webpack + webpack-dev-server
  • babel (es6)
  • postcss + autoprefixer
  • eslint
Node.js a revolutionat tot ce inseamna frontend si tooluri frontend  :D

Vrei si tu o semnatura asemanatoare? Vezi topicul de creare timeline telefoane mobile.
autor subiect #4
DSF
zZz ツ
6888 mesaje
din 28/04/2005
235 aprecieri
06 aprilie 2017, 02:35:18
Am uitat de un tool de care ai inevitabil nevoie cand lucrezi la o aplicatie unde trebuie sa trimiti date.

Postman. foarte util pt un REST API (custom headers, http methods, body json, etc etc)

Vrei si tu o semnatura asemanatoare? Vezi topicul de creare timeline telefoane mobile.
autor subiect #5
DSF
zZz ツ
6888 mesaje
din 28/04/2005
235 aprecieri
15 aprilie 2017, 18:05:50
Pentru development si testing de functii noi recomand Quokka (plugin Visual Code Studio). Adio debugger  & reload in browser.

http://i.imgur.com/hWBuJVY.png

https://quokkajs.com/
3 apreciază

Vrei si tu o semnatura asemanatoare? Vezi topicul de creare timeline telefoane mobile.
Înapoi la Creative Corner
cine e aici?
Subiectul a fost creat la .
Hei! Pentru a putea interacționa cu comunitatea Mobilewave trebuie să ai un cont (care e gratuit) și să fii autentificat.
cumpi logo
Publicitate 158x70
Inițiator acum 3 luni
DSF
zZz ツ
Ultimul acum 1 lună
DSF
zZz ツ
Cauta in topic
Unelte topic
Dacă vă place acest articol trimiteți mai departe!
  • Arăta mai bine înainte.. 27% ⋅ 33
  • E frumos dar nu prea 22% ⋅ 27
  • Laser frate! 52% ⋅ 64
Au votat 124 utilizatori
^
Mobilewave.ro logo
MobileWave.ro 2005-2014
© MW v1.0a PhoeniX
0.020⋅4⋅6
Portalul tău de telefoane mobile!