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“[email protected]”§ 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