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) ○ otherwise 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) ○ only 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 CC BY-NC-ND Carrot & Company GmbH
& ↙ 0 2 1 5 ) . . . 7 2 3 4 L 9 M L L L 9 L ) ) ) ) M M M 5 1 9 T 4 M 1 1 9 ( 9 H 9 T T T T 0 9 9 0 9 H H H . H 1 1 2 4 1 ( ( ( ( ↙ ↙ ↙ Internet Explorer ↙ ) t s e ) m r l o a i r f h ( c C i b h ) d e p a W a e r e g r p d M t s i s W e o r i d N d f s ( i w l e a r e N o t i ( s c s W i c a / w c i a v Firefox ) a r 0 E s i p g 9 o e 9 a M 1 t o ( ↙ r 1990 2000 2010 2018 ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ) ) ) ) ) ) ) ) ) ) ) ) 3 4 5 6 5 6 9 0 2 3 ) 7 8 6 0 0 1 1 1 1 1 9 9 9 9 0 1 9 0 0 0 0 0 & 0 0 9 9 9 0 0 1 1 1 1 2 2 2 2 2 2 2 2 0 2 ( ( ( ( ( ( ( ( ( ( ( ( . ( c r r E b b S 9 0 t 2 0 0 c o e 0 i i . . . . i J a I L a L 0 1 r 5 6 t r . a r a 4 s o n e a y e S S l r r o g l i R u p l r a a r i t p u J J M e a v g l l x p y u u g r r u l a E n u i t a a r n g g N o Q c l l A g A u u n n t t e S j n o A A g g e n J A r n n p P r A A a d e n c t n s a I t e t ↗ p ↗ N ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ) ) i 4 r ) 5 ) ) 5 6 7 8 ) ) ) c 5 8 0 9 2 7 9 0 1 1 1 1 e S t 9 9 9 9 0 0 1 0 p d 0 0 0 0 9 0 B 9 9 9 2 0 i 2 2 2 2 2 i r s 1 1 2 2 1 1 ✝ ( V c - ( ( ( ( ( ( t t t t S r x p p p p 1 ( e t 2 5 t 3 a a p i i i i p v 4 r r r r t j c c c c v i t A t i p t r r p r p p a t S S S S e c i c r i p i i J S S r r S A A A A c r c c i c r S a e M M M M S c S & S p v A S A A A C C C C a y M A M M M T E E E E J M C C C C E C E E E E 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
Recommend
More recommend
