Web Workshop MEAN Development

Updated slides for the Web Workshop presentation

Transcript

2. MEAN Development Full Stack JavaScript
3. 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 mail@paulsutherland.net @ipaulsutherland paulsutherland.net
4. MEAN and Hybrid Mobile Development
5. MEAN and Hybrid Mobile Development Fullstack JavaScript Development
6. MEAN and Hybrid Mobile Development
7. 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
8. 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
9. MEAN and Hybrid Mobile Development Development Environment
10. MEAN and Hybrid Mobile Development Integrated Development Environment: WebStorm https://www.jetbrains.com/webstorm/
11. MEAN and Hybrid Mobile Development Integrated Development Environment: Visual Studio http://www.visualstudio.com/products/visual-studio-community-vs
12. MEAN and Hybrid Mobile Development Text Editor and Terminal http://www.sublimetext.com/
13. MEAN and Hybrid Mobile Development Version Control
14. 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/.
15. MEAN and Hybrid Mobile Development Register an Account at Github Sign up at: https://github.com/
16. MEAN and Hybrid Mobile Development Get an Account at Gitlab Sign up at: https://gitlab.com/users/sign_up
17. MEAN and Hybrid Mobile Development
18. 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 git@gitlab.com/YOUR_ACCOUNT/mean.git git push -u origin
19. MEAN and Hybrid Mobile Development Homework: Git Tutorial
20. MEAN and Hybrid Mobile Development JavaScript
21. 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
22. 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
23. MEAN and Hybrid Mobile Development JavaScript Resources
24. MEAN and Hybrid Mobile Development JavaScript Tutorial
25. MEAN and Hybrid Mobile Development MEAN
26. MEAN and Hybrid Mobile Development MEAN STACK M E A N
27. 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)
28. 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
29. 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
30. 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/
31. 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
32. MEAN and Hybrid Mobile Development
33. 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
34. 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
35. MEAN and Hybrid Mobile Development Introducing your toolbox http://yeoman.io/ http://gruntjs.com/ http://gruntjs.com/
36. 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
37. 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
38. 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:
39. MEAN and Hybrid Mobile Development Phew that is a lot to learn - how do I put it all together to get started?
40. MEAN and Hybrid Mobile Development Fear not MEAN warrior, help is at hand!
41. MEAN and Hybrid Mobile Development
42. MEAN and Hybrid Mobile Development
43. MEAN and Hybrid Mobile Development MEAN.JS Demo
44. MEAN and Hybrid Mobile Development Angular Fullstack https://github.com/DaftMonk/generator-angular-fullstack
45. MEAN and Hybrid Mobile Development Angular Fullstack Demo
46. MEAN and Hybrid Mobile Development MEAN Resources https://thinkster.io/angulartutorial/a-better-way-to-learn-angularjs/
47. MEAN and Hybrid Mobile Development MEAN Resources https://www.youtube.com/playlist?list=PLTb5l9yU4_QbCC9MP-mme8S2gIJYc6s8X https://github.com/johnpapa/angularjs-styleguide
48. MEAN and Hybrid Mobile Development Hybrid Mobile Applications
49. MEAN and Hybrid Mobile Development Source: https://developer.salesforce.com/page/Native,_HTML5,_or_Hybrid:_Understanding_Your_Mobile_Application_Development_Options
50. MEAN and Hybrid Mobile Development
51. MEAN and Hybrid Mobile Development Ionic Demo
52. MEAN and Hybrid Mobile Development
53. MEAN and Hybrid Mobile Development StrongLoop Demo
54. MEAN and Hybrid Mobile Development
55. MEAN and Hybrid Mobile Development Cisco Meraki Demo
56. MEAN and Hybrid Mobile Development Finally
57. MEAN and Hybrid Mobile Development
58. MEAN and Hybrid Mobile Development
59. 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/
60. MEAN and Hybrid Mobile Development Now it’s your turn Questions