Web Workshop MEAN Development

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

MEAN Development Full Stack JavaScript

Slide 3

Slide 3 text

MEAN and Hybrid Mobile Development Who am I Paul Sutherland Construction Surveyor at Black & Veatch Member of Software Society from formation Founding Member of Dundee MakerSpace [email protected] @ipaulsutherland paulsutherland.net

Slide 4

Slide 4 text

MEAN and Hybrid Mobile Development

Slide 5

Slide 5 text

MEAN and Hybrid Mobile Development Fullstack JavaScript Development

Slide 6

Slide 6 text

MEAN and Hybrid Mobile Development

Slide 7

Slide 7 text

MEAN and Hybrid Mobile Development Disclaimer ● I know you can do similar development in: Python, Ruby, PHP, .NET yada yada … ● I am not promoting that this is the best or only or the righteous path to do web development ● Tool for the job ● The point is never stop experimenting ● Don’t develope programming prejudices

Slide 8

Slide 8 text

MEAN and Hybrid Mobile Development Gateway to MEAN Resources ● This slide deck is intended to be a gateway to MEAN resources ● Hands on workshop making Apps and get help from experienced developers ● Questions on the mailing list ● Email me ● Drop into the MakerSpace on our Monday Evening open night

Slide 9

Slide 9 text

MEAN and Hybrid Mobile Development Development Environment

Slide 10

Slide 10 text

MEAN and Hybrid Mobile Development Integrated Development Environment: WebStorm https://www.jetbrains.com/webstorm/

Slide 11

Slide 11 text

MEAN and Hybrid Mobile Development Integrated Development Environment: Visual Studio http://www.visualstudio.com/products/visual-studio-community-vs

Slide 12

Slide 12 text

MEAN and Hybrid Mobile Development Text Editor and Terminal http://www.sublimetext.com/

Slide 13

Slide 13 text

MEAN and Hybrid Mobile Development Version Control

Slide 14

Slide 14 text

MEAN and Hybrid Mobile Development Version Control Git Install Git on Linux Install Git on Mac Install Git on Windows Available in all major distribution repositories Available in xcode command line tools Available from Git for Windows $ sudo yum install git $ sudo apt-get install git $ sudo pacman -S git Install xcode in App Store Download installer from http://git-scm.com/download/mac Install Github tools http://mac.github.com Install git for Windows http://git-scm.com/download/win Install Github tools http://msysgit.github.io/.

Slide 15

Slide 15 text

MEAN and Hybrid Mobile Development Register an Account at Github Sign up at: https://github.com/

Slide 16

Slide 16 text

MEAN and Hybrid Mobile Development Get an Account at Gitlab Sign up at: https://gitlab.com/users/sign_up

Slide 17

Slide 17 text

MEAN and Hybrid Mobile Development

Slide 18

Slide 18 text

MEAN and Hybrid Mobile Development Workshop Task: Install and setup Git ● Get Git installed and accounts at Gitlab and Github set up. ● Walk through the basic commands. mkdir MEAN cd MEAN git init git add -A git commit -m “Initial Commit” git remote add origin [email protected]/YOUR_ACCOUNT/mean.git git push -u origin

Slide 19

Slide 19 text

MEAN and Hybrid Mobile Development Homework: Git Tutorial

Slide 20

Slide 20 text

MEAN and Hybrid Mobile Development JavaScript

Slide 21

Slide 21 text

MEAN and Hybrid Mobile Development JavaScript ● Developed in 10 days in 1995 ● Considered a toy language by developers ● It has bad parts and good parts ● Some bad parts are really bad ● Some good parts are excellent ● Making use of a subset of the good parts has improved the use of the language

Slide 22

Slide 22 text

MEAN and Hybrid Mobile Development JavaScript ● The universal programming language of the web ● Installed on almost every smartphone and desktop web browser ● Mac OSx now supports building apps with JavaScript ● Google’s V8 and Rhino’s JavaScript engines bring JavaScript to the server, enabling MEAN full stack development

Slide 23

Slide 23 text

MEAN and Hybrid Mobile Development JavaScript Resources

Slide 24

Slide 24 text

MEAN and Hybrid Mobile Development JavaScript Tutorial

Slide 25

Slide 25 text

MEAN and Hybrid Mobile Development MEAN

Slide 26

Slide 26 text

MEAN and Hybrid Mobile Development MEAN STACK M E A N

Slide 27

Slide 27 text

MEAN and Hybrid Mobile Development ● Released in 2009 by Ryan Dhal ● Was keen to develop a non blocking event driven IO web framework ● Utilises Google’s V8 engine to execute code ● Node is modular and has many packages written in JavaScript and managed by the Node Package Manager (NPM)

Slide 28

Slide 28 text

MEAN and Hybrid Mobile Development Installation Install Node on Linux Install Node on Mac Install Node on Windows Available in all major distribution repositories Available from Node website Available from Node website Ubuntu $ curl -sL https://deb.nodesource.com/setup | sudo bash - $ sudo apt-get install -y nodejs Fedora, RHEL, CentOS $ curl -sL https://rpm.nodesource.com/setup | bash - $ sudo yum install -y nodejs Arch $ sudo pacman -S nodejs Binary Source code http://nodejs.org/dist/v0.10.33/node-v0.10.33.tar.gz See: Installation Instructions for other distributions Download installer from http://nodejs.org/dist/v0.10.33/node-v0.10.33.pkg Install from source http://nodejs.org/dist/v0.10.33/node-v0.10.33.tar.gz Install Node for Windows http://nodejs.org/dist/v0.10.33/node-v0.10.33-x86.msi

Slide 29

Slide 29 text

MEAN and Hybrid Mobile Development ● Mongo is a NoSql database ● Document oriented storage ● Stores JSON objects as BSON (binary JSON) {"employees":[ {"firstName":"John", "lastName":"Doe"}, {"firstName":"Anna", "lastName":"Smith"}, {"firstName":"Peter", "lastName":"Jones"} ]} ● Written in JavaScript ● Autosharding ● Replication and High Availability

Slide 30

Slide 30 text

MEAN and Hybrid Mobile Development ● Documents are similar to native data types in modern languages (Python Dict, Ruby Hash etc) ● Embedded documents and arrays reduce the need for expensive joins ● It does not support transactions, so not ACID compliant ● It is not a relational database Check out the Documentation for more information: http://docs.mongodb.org/manual/

Slide 31

Slide 31 text

MEAN and Hybrid Mobile Development Installation Install MongoDB on Linux Install MongoDB on Mac Install MongoDB on Windows Available in all major distribution repositories Available from MongoDB website Available from MongoDB website Ubuntu Installation Documentation http://docs.mongodb.org/manual/tutorial/install-mongodb-on-ubuntu/ Fedora, RHEL, CentOS Installation Documentation http://docs.mongodb.org/manual/tutorial/install-mongodb-on-red-hat- centos-or-fedora-linux/ Arch Installation Documentation https://wiki.archlinux.org/index.php/MongoDB See: Installation Instructions for other distributions Download installer from https://fastdl.mongodb.org/osx/mongodb-osx-x86_64- 2.6.5.tgz?_ga=1.122936971.1837973966.1416410993 Install from source https://fastdl.mongodb.org/src/mongodb-src-r2.6.5.tar. gz?_ga=1.152755129.1837973966.1416410993 Install MongoDB for Windows https://fastdl.mongodb.org/win32/mongodb-win32- x86_64-2008plus-2.6.5-signed.msi?_ga=1. 92509981.1837973966.1416410993

Slide 32

Slide 32 text

MEAN and Hybrid Mobile Development

Slide 33

Slide 33 text

MEAN and Hybrid Mobile Development Installation Global installation in node $: npm install -g express Create a express project $: express MEAN Run the server $: node app.js Open your browser http://localhost:3000

Slide 34

Slide 34 text

MEAN and Hybrid Mobile Development ● Frontend JavaScript framework ● MVC framework ● Embeds custom tag attributes within the HTML, which are interpreted as Angular directives that bind to a model, which are a mix of JavaScript variables and JSON objects

Slide 35

Slide 35 text

MEAN and Hybrid Mobile Development Introducing your toolbox http://yeoman.io/ http://gruntjs.com/ http://gruntjs.com/

Slide 36

Slide 36 text

MEAN and Hybrid Mobile Development ● A scaffolding tool for setting up your webapps ● Uses web app templates, which are called generators ● Install Yeoman and the web app generator $: npm install -g yo $: npm install -g generator-webapp ● Create a web app $: mkdir myApp $: cd myApp $: yo webapp

Slide 37

Slide 37 text

MEAN and Hybrid Mobile Development ● A package manager for your webapps ● It fetches and installs your frameworks, libraries, assets and utilities ● Install Bower $: npm install -g bower ● Create a web app $: mkdir myApp $: cd myApp $: bower install jquery

Slide 38

Slide 38 text

MEAN and Hybrid Mobile Development ● A task runner, which does the tedious tasks for you ● Minification, unit testing, linting, compilation, live reloading of browser ● Install Grunt $: npm install -g grunt-cli ● A grunt file contains the tasks to be run:

Slide 39

Slide 39 text

MEAN and Hybrid Mobile Development Phew that is a lot to learn - how do I put it all together to get started?

Slide 40

Slide 40 text

MEAN and Hybrid Mobile Development Fear not MEAN warrior, help is at hand!

Slide 41

Slide 41 text

MEAN and Hybrid Mobile Development

Slide 42

Slide 42 text

MEAN and Hybrid Mobile Development

Slide 43

Slide 43 text

MEAN and Hybrid Mobile Development MEAN.JS Demo

Slide 44

Slide 44 text

MEAN and Hybrid Mobile Development Angular Fullstack https://github.com/DaftMonk/generator-angular-fullstack

Slide 45

Slide 45 text

MEAN and Hybrid Mobile Development Angular Fullstack Demo

Slide 46

Slide 46 text

MEAN and Hybrid Mobile Development MEAN Resources https://thinkster.io/angulartutorial/a-better-way-to-learn-angularjs/

Slide 47

Slide 47 text

MEAN and Hybrid Mobile Development MEAN Resources https://www.youtube.com/playlist?list=PLTb5l9yU4_QbCC9MP-mme8S2gIJYc6s8X https://github.com/johnpapa/angularjs-styleguide

Slide 48

Slide 48 text

MEAN and Hybrid Mobile Development Hybrid Mobile Applications

Slide 49

Slide 49 text

MEAN and Hybrid Mobile Development Source: https://developer.salesforce.com/page/Native,_HTML5,_or_Hybrid:_Understanding_Your_Mobile_Application_Development_Options

Slide 50

Slide 50 text

MEAN and Hybrid Mobile Development

Slide 51

Slide 51 text

MEAN and Hybrid Mobile Development Ionic Demo

Slide 52

Slide 52 text

MEAN and Hybrid Mobile Development

Slide 53

Slide 53 text

MEAN and Hybrid Mobile Development StrongLoop Demo

Slide 54

Slide 54 text

MEAN and Hybrid Mobile Development

Slide 55

Slide 55 text

MEAN and Hybrid Mobile Development Cisco Meraki Demo

Slide 56

Slide 56 text

MEAN and Hybrid Mobile Development Finally

Slide 57

Slide 57 text

MEAN and Hybrid Mobile Development

Slide 58

Slide 58 text

MEAN and Hybrid Mobile Development

Slide 59

Slide 59 text

MEAN and Hybrid Mobile Development Workshop tasks Install Software on your machine: ● Install text editor (Sublime Text) ● Install Git ● Install Mongo ● Install Node When Node is installed: ● Install Yeoman, Grunt and Bower ● Install Mean.js and Ionic ● Install Strongloop Register accounts: Github: https://github.com/ Gitlab: https://gitlab.com/users/sign_up MongoLab: https://mongolab.com/signup/

Slide 60

Slide 60 text

MEAN and Hybrid Mobile Development Now it’s your turn Questions