Frontend Web Development with Angular CC BY-NC-ND Carrot & - - PowerPoint PPT Presentation

CC BY-NC-ND Carrot & Company GmbH

Frontend Web Development with Angular

CC BY-NC-ND Carrot & Company GmbH

Agenda

• Questions
• Some infos
• Presentations

○ Presentation ○ Discussion ○ Grading

• Tutorial for practicals
• A bit of web and angular history

CC BY-NC-ND Carrot & Company GmbH

Questions?

CC BY-NC-ND Carrot & Company GmbH

Some Infos

• Who has not yet a fbr code?
• anonymous feedback, comments, suggestions in fbr.io

○ room “feedback”

• Topics you want to to learn

○ Testing Angular ○ Continous Integration/DevOps (out of scope) ○ Angular Structure/Architecture ○ Mobile App Development ○ Live data streaming to the client ○ Building large scale applications

• Add/vote for topics

○ fbr.io → Room “Feedback”

CC BY-NC-ND Carrot & Company GmbH

Some Infos 2

• Submit the presentations in the gitlab wiki at latest tuesday (the day before

presentation 23:59)

○

• therwise you’ll get 0 points for the presentation

CC BY-NC-ND Carrot & Company GmbH

Order of Presentations

• Team Image Puzzle
• Team Coupon Management
• Team Crypto Portfolio
• Team UnravelTEC
• Team Horsing arround

Note: 10 minutes presentation, 15 minutes discussion and grading Students grading in fbr.io (use your code from last class)

CC BY-NC-ND Carrot & Company GmbH

Team Projects

practical part

CC BY-NC-ND Carrot & Company GmbH

Team Projects

• Recommended IDE: Webstorm (or any other Intellij based IDE)

○ Students get the pro version for free

• Linux or MacOS
• Use the Angular Styleguide

○ https://angular.io/guide/styleguide

• Track your time on the issue
• Move the user story to “doing” when you start coding
• Do code reviews in gitlab before merging a merge request back to develop

CC BY-NC-ND Carrot & Company GmbH

Prerequisites

• Linux or MacOS
• Docker CE with Docker Compose
• Node >= 8.9.4
• NPM >= 6.1.0

CC BY-NC-ND Carrot & Company GmbH

Start the base project

1. Clone your project

git clone git@gitlab.fwda.cnc.io :fwda/your-project.git cd your-project

2. Add the upstream repository

git remote add upstream git@gitlab.fwda.cnc.io :fwda/fwda-base.git git pull upstream master

3. Install Development Environment

./cli/install_dev_frontend_web.sh ./cli/install_dev_server_express.sh

4. Run the web application

./cli/start_dev_docker.sh

CC BY-NC-ND Carrot & Company GmbH

Submission

• Initially create the submission branch (to this only once before you start

coding)

git branch submission git push origin submission

• Submit your code at the end of each sprint (at latest Tuesday, 23:59)

○ Create a Merge Request in Gitlab which has the Submission branch as target. ○ Never squash commits!

• App will be tested and have to run with ./cli/start_dev_docker.sh

○ in development environment and in production environment ○ don’t modify ./cli/start_dev_docker.sh ■ if you think you need it, it is the wrong place, think of modifying the Dockerfile or the docker-compose.yml

CC BY-NC-ND Carrot & Company GmbH

Code

• You must use git flow as git workflow
• Never squash commits
• Reference issues in the commit message

○ git commit -m “Frontend #12: Added signup”

• Every user story (issue) has its own feature branch
• Don’t merge implicitly instead use merge request (=pull request)

○

• nly use implicit merging for syncing/updating

■

• eg. update a feature branch to the latest version of the develop branch
• create meaningful and reasonable short branch and merge request names

1990 2000 2010 2018

H T M L ↙ ( 1 9 9 1 ) H T M L 2 . ↙ ( 1 9 9 5 ) H T M L 3 . 2 & ↙ 4 . ( 1 9 9 7 ) H T M L 4 . 1 ↙ ( 1 9 9 9 ) H T M L 5 ↙ ( 2 1 4 ) M

• s

a i c ( 1 9 9 3 ) ↗ N e t s c a p e N a v i g a t

• r

( 1 9 9 4 ) ↗ I n t e r n e t E x p l

• r

e r ( 1 9 9 5 ) ↗ W

• r

l d W i d e W e b ( f i r s t ) E r w i s e ( f i r s t g r a p h i c a l ) M

• s

a i c ( w i d e s p r e a d ) ↙ ( 1 9 9 )

M

• s

a i c / N e t s c a p e N a v i g a t

• r

Internet Explorer C h r

• m

e Firefox

J a v a S c r i p t & S e r v e r

• s

i d e J a v a S c r i p t ( 1 9 9 5 ) ↗ V B S c r i p t a n d J S c r i p t i n I E ( 1 9 9 6 ) ↗ E C M A S c r i p t 1 ( 1 9 9 7 ) ↗ E C M A S c r i p t 2 ( 1 9 9 8 ) ↗ E C M A S c r i p t 3 ( 1 9 9 9 ) ↗ E C M A S c r i p t 4 ( ✝ 2 4 ) ↗ A j a x ( 2 5 ) ↗ j Q u e r y L i b ( 2 6 ) ↗ P r

• t
• t

y p e L i b ( 2 5 ) ↗ E C M A S c r i p t 5 ( 2 9 ) ↗ E C M A S c r i p t 2 1 5 ↗ E C M A S c r i p t 2 1 6 ↗ E C M A S c r i p t 2 1 7 ↗ E C M A S c r i p t 2 1 8 ↗ A n g u l a r J S ( 2 9 ) ↗ A n g u l a r J S 1 . ( 2 1 2 ) ↗ A n g u l a r J S . 9 ( 2 1 ) ↗ A n g u l a r 2 . & A n g u l a r 4 . ( 2 1 6 ) ↗ A n g u l a r 5 . ( 2 1 7 ) ↗ A n g u l a r 6 . ( 2 1 8 ) ↗ T y p e S c r i p t ( 2 1 2 ) ↗ R e a c t ( 2 1 3 ) ↗

Schematic representation of the JS history, CC BY-NC-ND Carrot & Company GmbH

AngularJS vs Angular

• Angular 2 was a complete rewrite

○ Switched from JavaScript (ES5) to Typescript

• No smooth upgrade path
• Angular 1.X Versions were called AngularJS
• Angular 2+ Version are called Angular
• Current Version is Angular 6 (Version 7 will be released soon)
• There was never a Version 3 of Angular
• They're very eager to make upgrade between major versions smooth

Todos

• Get your project up and running
• Start implementing your first sprint

○ Typescript Intro: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html ○ A real basic Angular tutorial is at https://angular.io/tutorial ○ If you have questions google, stack overflow, official docs, … newsgroup ■ usually 99% of all problems have already been solved by someone

Live Coding

History of Angular 2

From announcement (almost) to release Shai Reznik 2016: https://www.youtube.com/watch?v=aSFfLVxT5vA