salvatore rinzivillo visual analyticsdidawiki.cli.di.unipi.it/.../va_lesson2_nodejs_npm_git.pdfuse...

VISUALANALYTICSSalvatoreRinzivillo

DEVELOPMENTFRAMEWORK

Objectives

§  Setupadevelopingenvironment§  InstallNode.jsandNPM§  InstallandconfigureVueandvue-cli§  Configureandinitializeaproject

§  Installandconfiguregit§  Createarepositoryandimportprojectfiles

§  IDEs§  Fork,GitDesktop§ WebStorm,Atom.io,Textmate

Node.jsandNPM

WhatisNode.js

§  “AnasynchronouseventdrivenJavascriptruntime”§  Non-blocking,event-drivenI/Ooperations

§  Lightweightandefficientfordata-intensiveapplications

§  Distributedcomputationandloadbalancing

§  Availablefordownloadathttps://nodejs.org/

Imagesource:https://www.toptal.com/nodejs/why-the-hell-would-i-use-node-js

NPM–NodePackageManager

§  Node.jshasalargelibraryofpublicavailable,reusablecomponents

§  Componentsareavailablethrougharepository

§ Managelibrariesforglobaluseandlocalprojects

§  Handlealldependencies

NPM-Commands

§  npminit§  Initializeaproject,creatingafilepackage.json

§  npminstall<module>§  Downloadandinstallmodulewithinthedirectorynode_modules

§ Withtheflag--save,addthemoduletothepackage.jsonlistofdependencies

§ Withtheflag--global(or-g)themoduleisinstalledgloballyonthesystem

Mostusedpackages

§  Express:awebapplicationdevelopmentframeworkfornode.js

§  Lodash:generalutilitiesforhandlingdatastructuresinjavascript

§  http-server§  Specificallyforthecourse:

§  D3§  Plotly.js§  Bootstrap§  Vue.js§  …

Exercise–CreateaprojectwithNode.js

§  Demo

CONFIGURINGVUE.JSANDVUE-CLI

§  npminstall–gvue-cli§  CreateacommandtomanageVue.jsprojects

§  vueinitsimplemy-project§  cdmy-project§  npminstall§  npmrundev§  ThesecommandscreateaskeletonprojectconfiguredwithVue.js

Webserver

WebServerforNode.js

WebServerinNode.js

§  Thereareseveralmodulesavailableforrunningawebserver

§  Averysimplehttpserver:§  npminstall-ghttp-server

§  Amoresophisticatedapplicationserver:§  npminstall-gexpress

Exercise–Usehttp-servertoaccessourproject

§  Demo

VersionControlwithGIT

WhatisVersionControl?

ImageSource:https://www.git-tower.com/learn/git/ebook/en/command-line/basics/what-is-version-control

WhyUseaVersionControlSystem?

§  Collaboration§  Anymemberofateamcanworkonanyfileatanytime§  MergeofcontributionishandlebytheVCS

§  Storingversions§  Trackingofchangesthroughperiodicsavesofsnapshots§  Onlyoneversionofaprojectatanytime

§  OtherversionsarepackedwithintheVCS§  Restorepreviousversions§  Followthedevelopmentoftheproject§  Backup,whenusingexternalrepositories

WhichVCS?IntroducingGIT

§  Downloadaclientfrompublicrepositories§  Forexample:GITHub,BitBucket

§  UseclientsspecificforyourOS§  Forexample:brewinstallgit(forMacOsX)

§  Initialconfiguration§  gitconfig--globaluser.name“rinziv”§  gitconfig--globaluser.email“rinzivillo@isti.cnr.it”§  gitconfig--global

GIT–CreatingaRepository

§  GIThandlestwokindsofrepositories§  Localrepository

§ Containedwithinafolder.gitintherootoftheprojectfolder

§ Onlyonpersonaccessthisrepo§  Remoterepository

§  Locatedintoaremoteserver§  Locallystoredwithinthe.gitfolder§  Teammembersworkconcurrentlyonremoterepository

GIT–Createalocalrepository

§  Movewithintheprojectrootdirectory§  Usegitinittostartversioningtracking§  Therootoftheprojectiscalledworkingcopy

§  Thereisonlyoneworkingcopyatanymoment§  Itispossibletoupdatethecurrentworkingcopywithpreviousversionsfromtherepository

§  Somefiles(usuallyrelatedtotheOS)canbeignoredfortheversioning§  Createafilecalled.gitignoreintherootoftheprojectfolder

§  Listthefilestoignorewithinthefile

GIT–Clonearemoterepository

§  AremoterepositoryhaveaURLoftheform:§  ssh://user@server/git-repo.git§  user@server:git-repo.git§  http://example.com/git-repo.git§  https://example.com/git-repo.git§  git://example.com/git-repo.git

GIT-Commit

§  Commitoperationsavethesnapshotoftheworkingcopyontherepository§  gitadd–A§  gitcommit–m“Initialcommit”

GIT–Statusoftheproject

§  Eachfilewithintheprojecthaveoneofthefollowingstate§  Untracked:thefileisnotunderversioncontrol.GITdonottrackanychangeonthisfile

§  Tracked:GITreportschangesonthesefiles§  gitstatusreportsthelistoffileswithintheprojectthathavechangedandthosethatarenottracked

GIT–StagingArea

ImageSource:https://www.git-tower.com/learn/git/ebook/en/command-line/basics/working-on-your-project#start

GIT–Preparingthestagingareaandcommit

§  Addthefilestoincludeinthestagingarea§  gitaddnew-page.htmlindex.htmlcss/*§  gitrmerror.html§  Checkthestatuswith:gitstatus

§  Commitchanges§  gitcommit-m"Implementthenewloginbox”

Whentocommit?

§  Eachcommitshouldcontainschangesrelatedtoasingletopic

§  Saveonlycompletedwork(fortemporarysavinguseStash)

§  Testtheprojectbeforecommitting§  Adddescriptivemessage§  Commitoften

DesktopGUIVersion

Fork

https://git-fork.com

Exercise–Createarepositoryforourproject

§  Demo

ClassroomSpring2020repositoryhttps://github.com/va602aa-2020