[{"data":1,"prerenderedAt":690},["ShallowReactive",2],{"tag-development":3},[4,230,488],{"id":5,"title":6,"body":7,"categories":206,"coverImage":208,"date":209,"description":210,"extension":211,"lang":212,"legacy":213,"meta":214,"navigation":213,"path":215,"seo":216,"stem":217,"sticky":218,"tags":219,"translation":228,"updated":228,"__hash__":229},"articles/vue-js-e-il-framework-front-end-piu-hot-del-momento.md","Vue.js è il framework front-end più hot del momento",{"type":8,"value":9,"toc":193},"minimark",[10,17,22,25,32,39,42,47,54,60,67,71,76,83,90,94,101,108,119,125,129,132,138,147,150,154,160,163,181,185],[11,12,13],"p",{},[14,15,16],"em",{},"In questo post vorrei parlare delle caratteristiche che mi hanno fatto innamorare di Vue.js e che a mio avviso sono alla base dell'incredibile tasso di crescita di questo framework su GitHub e non solo.",[11,18,19],{},[14,20,21],{},"Questo non significa che strumenti come React ed Angular (2+) non siano a mio avviso validi, ma semplicemente che trovo che Vue.js sia la soluzione più bilanciata per iniziare un nuovo progetto.",[11,23,24],{},"La scelta di un framework o di una libreria per lo sviluppo di un nuovo progetto (ad esempio una web app) non è solo una scelta personale.",[11,26,27,31],{},[28,29,30],"strong",{},"L'adozione di una libreria piuttosto che di un'altra potrebbe avvantaggiare o svantaggiare nel prosieguo dello sviluppo"," ed incidere nei tempi, costi di manutenzione così come le performances dell'applicazione stessa nel tempo man mano che il progetto cresce.",[11,33,34,35,38],{},"Da professionista del settore ho lavorato con tutti i maggiori framework frontend in circolazione (Angularjs, Angular, React, Vue.js, Ember), eppure ",[28,36,37],{},"sono finito per prediligere Vue su tutti",".",[11,40,41],{},"Per non ridurre l'argomento del post ad una narrazione da fanboy, vorrei affrontare qui punto per punto le caratteristiche che ho trovato più interessanti e che motivano questa mia predilezione.",[43,44,46],"h2",{"id":45},"popolarità-️","Popolarità ?️",[11,48,49,50,53],{},"Osservando i trend di crescita in termini di star su GitHub notiamo una ",[28,51,52],{},"ascesa vertiginosa"," del gradimento verso \"il nuovo arrivato\" rispetto ai più longevi Angular e React.",[11,55,56,59],{},[28,57,58],{},"Vue ha addirittura superato React"," alla fine del 2018.",[11,61,62],{},[63,64],"img",{"alt":65,"src":66},"Trend di crescita di Vue.js su GitHub","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/image.png",[43,68,70],{"id":69},"caratteristiche","Caratteristiche",[72,73,75],"h3",{"id":74},"flessibilità","Flessibilità",[11,77,78,79,82],{},"Forse la cosa che apprezzo di più: Vue è pensato per essere adottabile ",[14,80,81],{},"progressivamente",". Questo significa che posso decidere di volta in volta se utilizzarlo come una semplice libreria per arricchire una sola porzione di una pagina web, con un footprint bassissimo (= peso aggiuntivo dovuto all'introduzione della libreria) oppure come un framework completo e dotato di strumenti robusti.",[11,84,85,86,89],{},"Vue infatti è suddiviso in moduli perfettamente progettati ed oliati per lavorare fra loro, ma ",[28,87,88],{},"completamente opzionali",". Questo mo consente di selezionare solo ciò di cui ho realmente bisogno e non appesantire la struttura dell'applicazione con moduli inutilizzati.",[72,91,93],{"id":92},"stabilità","Stabilità",[11,95,96,97,100],{},"Vue.js è un ",[28,98,99],{},"framework stabile",". Con questo non intendo dire che non crasha, ma che la sua sintassi è fatta per rimanere stabile nel tempo.",[11,102,103,104,107],{},"Se hai sviluppato software che abbia una certa importanza business (o se hai intenzione di farlo) converrai con me che ",[28,105,106],{},"è fondamentale poter contare su uno strumento che, se aggiornato nel tempo, non richiede la riscrittura delle funzionalità sviluppate"," ad ogni aggiornamento delle dipendenze (chi ha detto Angular?).",[11,109,110,111,118],{},"Ti basti pensare che al rilascio della versione 2 del framework ",[112,113,117],"a",{"href":114,"rel":115},"https://vuejs.org/v2/guide/migration.html",[116],"nofollow","il 90% delle api sono rimaste invariate",", garantendo un processo di migrazione quasi totalmente indolore.",[11,120,121,122,38],{},"In contesti business questo significa ",[28,123,124],{},"meno costi e tempi più brevi nella manutenzione dell'applicazione",[72,126,128],{"id":127},"developer-experience","Developer Experience",[11,130,131],{},"Si parla sempre di User Experience, ma chi pensa a noi sviluppatori? Ecco, Vue.js lo fa.",[11,133,134,135,38],{},"Gli sviluppatori come me amano Vue.js non solo per la sua tecnologia, ma anche perché è ",[28,136,137],{},"disegnato per rendere la nostra vita più semplice possibile",[11,139,140,141,146],{},"Oltre a strumenti comodi come la CLI o l'",[112,142,145],{"href":143,"rel":144},"https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd",[116],"estensione DevTools"," di una efficacia e semplicità d'uso disarmanti, possiamo contare su una documentazione ufficiale completa e veramente ben fatta.",[11,148,149],{},"La struttura stessa del framework consente una curva di apprendimento davvero molto bassa e perfetta anche per i newbie che si approcciano per la prima volta allo sviluppo di una applicazione.",[43,151,153],{"id":152},"curioso-di-iniziare-ad-utilizzare-vuejs","Curioso di iniziare ad utilizzare Vue.js? ?",[11,155,156,157],{},"Il web è pieno di tutorial e documentazione in merito (specialmente in inglese e cinese). Nonostante questo ho voluto creare un piccolo ",[28,158,159],{},"testo interamente in italiano che possa aiutare a muovere i primi passi.",[11,161,162],{},"Il testo illustra i principi del framework da un punto di vista operativo, accompagnando ogni elemento con esempi pratici e mini-progetti.",[11,164,165,166,173,174,38],{},"Il libro è ",[28,167,168],{},[112,169,172],{"href":170,"rel":171},"https://amzn.to/30T952A",[116],"disponibile su Amazon in versione Kindle"," oppure ",[112,175,178],{"href":176,"rel":177},"https://amzn.to/3839ulN",[116],[28,179,180],{},"in versione cartacea",[43,182,184],{"id":183},"dubbiopinioni","Dubbi/Opinioni?",[11,186,187,188,38],{},"Parliamone nei commenti o contattami ",[112,189,192],{"href":190,"rel":191},"https://www.facebook.com/therealenricodeleo",[116],"sulla mia pagina Facebook",{"title":194,"searchDepth":195,"depth":195,"links":196},"",2,[197,198,204,205],{"id":45,"depth":195,"text":46},{"id":69,"depth":195,"text":70,"children":199},[200,202,203],{"id":74,"depth":201,"text":75},3,{"id":92,"depth":201,"text":93},{"id":127,"depth":201,"text":128},{"id":152,"depth":195,"text":153},{"id":183,"depth":195,"text":184},[207],"dev","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/pov-thumb.jpg","2020-01-26T13:09:09.000Z","Vue è il framework frontend con il tasso d'adozione più alto tra gli sviluppatori, e per ottime ragioni.","md","it",true,{},"/vue-js-e-il-framework-front-end-piu-hot-del-momento",{"title":6,"description":210},"vue-js-e-il-framework-front-end-piu-hot-del-momento",false,[220,221,222,223,224,225,226,227],"vue","frontend","javascript","es6","development","code","react","angular",null,"iJzcpvkpugcJMu4qpfPELr9uF3QNLKLLmX5a76YBEZE",{"id":231,"title":232,"body":233,"categories":474,"coverImage":475,"date":476,"description":477,"extension":211,"lang":212,"legacy":213,"meta":478,"navigation":213,"path":479,"seo":480,"stem":481,"sticky":218,"tags":482,"translation":228,"updated":228,"__hash__":487},"articles/i-10-migliori-plugin-visual-studio-code-per-qualsiasi-front-end-developer.md","Visual Studio Code: i 10 migliori plugin per qualsiasi front-end developer",{"type":8,"value":234,"toc":462},[235,242,249,252,256,263,269,281,285,291,297,300,304,310,316,319,323,329,335,338,342,348,354,363,367,373,379,382,386,392,397,400,404,410,421,425,431,437,443,447,453,459],[11,236,237,238,241],{},"Tutti amiamo Visual Studio Code: l'",[28,239,240],{},"editor gratuito e moderno"," sviluppato da Microsoft pensato per scrivere, ottimizzare e debuggare applicazioni web e cloud.",[11,243,244,245,248],{},"Visual Studio Code è disponibile su tutte le piattaforme (Windows, MacOS, Linux) ed è ",[14,246,247],{},"estendibile"," grazie all'ausilio di plugins, che ne aumentano le capacità introducendo funzionalità e comportamenti.",[11,250,251],{},"Al di là di casi specifici, a seguire quelli che secondo me sono i plugin imprescindibili per poter vivere bene quando si sviluppano webapp frontend.",[43,253,255],{"id":254},"live-server","Live Server",[11,257,258],{},[112,259,262],{"href":260,"rel":261},"https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer",[116],"https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome",[11,264,265],{},[63,266],{"alt":267,"src":268},"Explorer Window Control","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/vscode-live-server-explorer-menu-demo-1.gif",[11,270,271,272,277,278,38],{},"Questo plugin è in grado di creare un web server locale utile per testare la web app, risolvendo molti dei problemi che possono presentarsi effettuando la preview su protocollo file anziché http. Il pezzo forte è il ",[14,273,274],{},[28,275,276],{},"livereload",", e cioè l'",[28,279,280],{},"auto-aggiornamento della pagina ad ogni salvataggio del sorgente che stiamo scrivendo",[43,282,284],{"id":283},"bracket-pair-colorizer","Bracket Pair Colorizer",[11,286,287],{},[112,288,289],{"href":289,"rel":290},"https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer",[116],[11,292,293],{},[63,294],{"alt":295,"src":296},"Screenshot","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/example.png",[11,298,299],{},"Le parentesi (tonde, quadre, graffe) sono il pane quotidiano di ciascun developer. Quando l'applicazione inizia ad avere una certa complessità può essere difficile individuare inizio e fine dei blocchi/parentesi senza un aiuto. Questo plugin fa proprio questo: colora in maniera diversa ed evidenzia le parentesi per rendere immediatamente individuabile la coppia di parentesi di interesse per capire immediatamente dove iniziano e dove finiscono.",[43,301,303],{"id":302},"auto-close-tag","Auto Close Tag",[11,305,306],{},[112,307,308],{"href":308,"rel":309},"https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag",[116],[11,311,312],{},[63,313],{"alt":314,"src":315},"Usage","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/usage.gif",[11,317,318],{},"Questo plugin piazza automaticamente un tag di chiusura ogni volta che questo è necessario.",[43,320,322],{"id":321},"path-intellisense","Path Intellisense",[11,324,325],{},[112,326,327],{"href":327,"rel":328},"https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense",[116],[11,330,331],{},[63,332],{"alt":333,"src":334},"IDE","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/iaHeUiDeTUZuo.gif",[11,336,337],{},"Path Intellisense suggerisce automaticamente il percorso di file e cartelle man mano che viene digitato. Comodissimo per chi detesta dover verificare e/o aprire le cartelle interessate per individuare il file corretto da includere (sia esso JS, CSS ecc).",[43,339,341],{"id":340},"git-lens","Git Lens",[11,343,344],{},[112,345,346],{"href":346,"rel":347},"https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens",[116],[11,349,350],{},[63,351],{"alt":352,"src":353},"Git Code Lens","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/code-lens.png",[11,355,356,357,362],{},"Questa estensione integra ",[112,358,361],{"href":359,"rel":360},"https://git-scm.com/",[116],"git"," direttamente all'interno del sorgente, mostrando di volta in volta chi e quando ha modificato un determinato blocco o riga del sorgente. Perfetto per tutti coloro che sono soliti sviluppare applicazioni a più mani e desiderano avere il polso della situazione.",[43,364,366],{"id":365},"better-comments","Better Comments",[11,368,369],{},[112,370,371],{"href":371,"rel":372},"https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments",[116],[11,374,375],{},[63,376],{"alt":377,"src":378},"Annotated code","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/better-comments.PNG",[11,380,381],{},"Arricchisce i commenti variando colore ed evidenziandone immediatamente il significato.",[43,383,385],{"id":384},"colorize","Colorize",[11,387,388],{},[112,389,390],{"href":390,"rel":391},"https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize",[116],[11,393,394],{},[63,395],{"alt":194,"src":396},"https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/demo.gif",[11,398,399],{},"Visualizza il colore corrispondete al codice colore selezionato (supporta hex, rgb, rgba, hsl) aiutando qualsiasi web designer a comprendere immediatamente il colore utilizzato nel codice.",[43,401,403],{"id":402},"material-theme","Material Theme",[11,405,406],{},[112,407,408],{"href":408,"rel":409},"https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme",[116],[11,411,412,413,420],{},"Applica un tema ",[112,414,417],{"href":415,"rel":416},"https://material.io/",[116],[14,418,419],{},"material"," a tutto l'editor.",[43,422,424],{"id":423},"material-icon-theme","Material Icon Theme",[11,426,427],{},[112,428,429],{"href":429,"rel":430},"https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme",[116],[11,432,433],{},[63,434],{"alt":435,"src":436},"file icons","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/fileIcons.png",[11,438,439,440,442],{},"Applica l'icona giusta al file o cartella giusti, in stile ",[14,441,419],{},". Adoro il modo in cui queste icone rendono tremendamente esplicita la tipologia di file e cartelle di cui si sta parlando.",[43,444,446],{"id":445},"sort-lines","Sort lines",[11,448,449],{},[112,450,451],{"href":451,"rel":452},"https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines",[116],[11,454,455],{},[63,456],{"alt":457,"src":458},"Usage animation","https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/usage-animation.gif",[11,460,461],{},"Ordina alfabeticamente le righe di codice selezionate, regalando una incredibile sensazione di ordine al sorgente.",{"title":194,"searchDepth":195,"depth":195,"links":463},[464,465,466,467,468,469,470,471,472,473],{"id":254,"depth":195,"text":255},{"id":283,"depth":195,"text":284},{"id":302,"depth":195,"text":303},{"id":321,"depth":195,"text":322},{"id":340,"depth":195,"text":341},{"id":365,"depth":195,"text":366},{"id":384,"depth":195,"text":385},{"id":402,"depth":195,"text":403},{"id":423,"depth":195,"text":424},{"id":445,"depth":195,"text":446},[207],"https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/vscode-plugins.jpg","2019-09-27T21:18:09.000Z","A grande richiesta 10 dei plugin che più raccomando per una esperinza di coding veramente zen.",{},"/i-10-migliori-plugin-visual-studio-code-per-qualsiasi-front-end-developer",{"title":232,"description":477},"i-10-migliori-plugin-visual-studio-code-per-qualsiasi-front-end-developer",[225,224,483,484,221,485,486],"editor","extensions","ide","vscode","LS09X9mWL_pm91jfp_hURGIZMxLisSQ2HvlJldF2wPg",{"id":489,"title":490,"body":491,"categories":676,"coverImage":677,"date":678,"description":679,"extension":211,"lang":212,"legacy":213,"meta":680,"navigation":213,"path":681,"seo":682,"stem":683,"sticky":218,"tags":684,"translation":228,"updated":228,"__hash__":689},"articles/modern-gentlemens-wordpress-un-nuovo-approccio-al-web.md","Modern Gentlemen's WordPress: Come sviluppare applicazioni WordPress oggi (2016)",{"type":8,"value":492,"toc":664},[493,498,505,509,512,540,544,547,556,562,582,586,589,605,609,612,626,630,639,643,646,650,653],[11,494,495],{},[14,496,497],{},"Il 26 agosto 2016 ho presentato al Meetup WordPress di Roma il mio approccio allo sviluppo moderno e professionale di applicazioni WordPress. In questo articolo voglio condividere i punti chiave del mio intervento.",[11,499,500,501,504],{},"WordPress viene spesso celebrato per la sua installazione semplice e rapida, ma questa stessa caratteristica può indurre a pratiche di sviluppo approssimative. Con il talk ",[14,502,503],{},"Modern Gentlemen's WordPress",", ho voluto offrire una prospettiva alternativa: un metodo strutturato e scalabile per affrontare progetti WordPress con eleganza e professionalità.",[43,506,508],{"id":507},"perché-modernizzare-lo-sviluppo-wordpress","Perché modernizzare lo sviluppo WordPress?",[11,510,511],{},"La \"famosa installazione in 5 minuti\" non deve essere un pretesto per trascurare la qualità del codice. Al contrario, uno sviluppo professionale richiede:",[513,514,515,522,528,534],"ul",{},[516,517,518,521],"li",{},[28,519,520],{},"Codice pulito e leggibile:"," seguire standard di codifica chiari per facilitare manutenzione e collaborazione.",[516,523,524,527],{},[28,525,526],{},"Scalabilità:"," strutturare i progetti per supportare futuri sviluppi senza difficoltà.",[516,529,530,533],{},[28,531,532],{},"Automazione:"," sfruttare strumenti che semplifichino il lavoro manuale.",[516,535,536,539],{},[28,537,538],{},"Deploy e gestione:"," garantire processi fluidi per il rilascio e l'aggiornamento delle applicazioni.",[43,541,543],{"id":542},"gli-strumenti-del-mestiere","Gli strumenti del mestiere",[11,545,546],{},"Durante il talk, ho illustrato strumenti e metodologie chiave per elevare lo sviluppo WordPress. Ecco una panoramica:",[72,548,550,551],{"id":549},"boilerplate-professionale-wpacked","Boilerplate professionale: ",[112,552,555],{"href":553,"rel":554},"https://github.com/enricodeleo/wpacked",[116],"wPacked",[11,557,558,559,561],{},"Il mio boilerplate, ",[14,560,555],{},", è pensato per fornire una base robusta per progetti WordPress. Esso include:",[513,563,564,570,576],{},[516,565,566,569],{},[28,567,568],{},"Struttura modulare:"," organizza codice e asset in modo coerente.",[516,571,572,575],{},[28,573,574],{},"Supporto per Composer:"," gestione delle dipendenze semplificata.",[516,577,578,581],{},[28,579,580],{},"Compatibilità con moderni strumenti di build:"," come Webpack o Gulp per il processing di CSS e JavaScript.",[72,583,585],{"id":584},"versionamento-con-git","Versionamento con Git",[11,587,588],{},"Git è uno strumento indispensabile per tracciare modifiche, lavorare in team e mantenere un controllo preciso sullo stato del progetto. Consiglio di:",[513,590,591,602],{},[516,592,593,594,597,598,601],{},"Utilizzare un ",[225,595,596],{},".gitignore"," adeguato per escludere file inutili (es. ",[225,599,600],{},"wp-config.php"," o directory di cache).",[516,603,604],{},"Creare branch specifici per ogni funzionalità o bug fix.",[72,606,608],{"id":607},"local-development-con-vagrant-o-docker","Local Development con Vagrant o Docker",[11,610,611],{},"Ambienti di sviluppo locali come Vagrant o Docker permettono di replicare con precisione l'ambiente di produzione, evitando \"funziona solo sul mio computer\". Questi strumenti garantiscono:",[513,613,614,620],{},[516,615,616,619],{},[28,617,618],{},"Coerenza:"," ogni membro del team lavora sullo stesso setup.",[516,621,622,625],{},[28,623,624],{},"Portabilità:"," facilità di condivisione e replica dell'ambiente.",[72,627,629],{"id":628},"coding-standards","Coding Standards",[11,631,632,633,638],{},"Seguire gli standard ufficiali di WordPress (PHP, CSS, JavaScript) migliora la leggibilità e facilita il lavoro di squadra. Strumenti come ",[112,634,637],{"href":635,"rel":636},"https://github.com/squizlabs/PHP_CodeSniffer",[116],"PHP CodeSniffer"," possono essere configurati per verificare automaticamente il rispetto degli standard.",[72,640,642],{"id":641},"automazione-con-gulp-o-webpack","Automazione con Gulp o Webpack",[11,644,645],{},"Automatizzare processi come il minifying di CSS/JS, la gestione di immagini o la rigenerazione automatica del browser durante lo sviluppo rende il workflow più efficiente.",[43,647,649],{"id":648},"conclusione","Conclusione",[11,651,652],{},"La mia presentazione al Meetup WordPress di Roma aveva l'obiettivo di ispirare sviluppatori e team a vedere WordPress non come un CMS limitato, ma come una piattaforma capace di supportare applicazioni moderne e performanti, purché si adottino le giuste metodologie e strumenti.",[11,654,655,656,658,659,663],{},"Se vuoi approfondire, il boilerplate ",[14,657,555],{}," è disponibile su ",[112,660,662],{"href":553,"rel":661},[116],"GitHub",". Fammi sapere cosa ne pensi o se hai suggerimenti nei commenti o sui miei canali social!",{"title":194,"searchDepth":195,"depth":195,"links":665},[666,667,675],{"id":507,"depth":195,"text":508},{"id":542,"depth":195,"text":543,"children":668},[669,671,672,673,674],{"id":549,"depth":201,"text":670},"Boilerplate professionale: wPacked",{"id":584,"depth":201,"text":585},{"id":607,"depth":201,"text":608},{"id":628,"depth":201,"text":629},{"id":641,"depth":201,"text":642},{"id":648,"depth":195,"text":649},[207],"https://i2.wp.com/enricodeleo.s3.eu-south-1.amazonaws.com/images/modern-gentlemens-wordpress-un-nuovo-approccio-al-web.jpg","2016-08-26T00:00:00.000Z","Una panoramica delle migliori pratiche per lo sviluppo di applicazioni WordPress, basata sul talk presentato al WordPress Meetup di Roma nel 2016.",{},"/modern-gentlemens-wordpress-un-nuovo-approccio-al-web",{"title":490,"description":679},"modern-gentlemens-wordpress-un-nuovo-approccio-al-web",[685,224,686,687,361,688],"wordpress","boilerplate","php","wpacked","-X1lknBtcNSID-MY0oI2e9ss-HOf8tp3CTTC4JirbgM",1784577235938]