/angular-component-based

Developing a Component-based application with Angular 1.5 and Angular 2.0 Codemotion Workshop - Slides & Labs

Primary LanguageJavaScript

Materials and samples for my workshop on

#Developing a Component-based application with Angular 1.5 and Angular 2.0

#In Short In your first Angular project, the framework helped you quickly create an HTML5 app. But you now face new challenges as the UI complexity increases and more code moves to the front-end. The workshop shares Patterns and Best Practices on how to structure and implement complex, real-world Angular apps

#Slides

#Labs

#References

#ABSTRACT In your first Angular project, you have experienced first hand how Angular lets developers from any background quickly create HTML5 apps. However, as the UI complexity increases and more code moves to the front-end, you face new challenges such as how to manage huge Controllers, avoid application fragility and increase code reuse. In the workshop, Carlo shares his experience in developing several large scale Angular applications in the last two years, and proposes Patterns and Best Practices on how to structure and implement complex, real-world Angular apps with a Component-based approach.

#REQUIREMENTS

  • Web Browser (Chrome or Firefox)
  • Text Editor (Sublime, Atom, Visual Studio Code,…) and/or IDE (Eclipse, NetBeans, Intellij, Visual Studio,.. )
  • The Open Source Visual Studio Code editor is recommended to participants who have never used a JS-specific editor or IDE Partecipants need to bring to the workshop their own laptop.

#TOPICS During the workshop, all concepts will be explained through extensive code examples, and participants will implement first-hand a simple but representative Component-based application using modern Angular 1.5 style and constructs.

##Beyond Hello World and TodoMVC

  • Issues and challenges in developing complex / large HTML5 applications
  • From huge controllers and "scope soup" to Component-based Uis

##Designing with Components

  • How to identify application Components

##Creating an angular.component()

##Complex Applications with collaborating components

  • How to interconnect multiple collaborating Components to achieve complex UI interactions

##Component Roles

  • "Smart", "dumb" and "stateless" components
  • When to use two-way DataBinding and when One-Way Data Flow
  • refactoring

##Enter Angular 2

  • From AngularJS 1.5 to Angular 2.0: syntax changes, but Component-based architecture remains
  • How to incrementally upgrade an application from 1.5 to 2.0 with ng-upgrade
  • Sidenote: performance tips

###Lab - porting to Angular 2 A final lab will demonstrate porting the application to Angular 2.0.

##How to continue by yourself: references for further learning

  • Principles of Package Design
  • Testing Components

For each module, hands-on lab will include

  • quizzes (which of these variants is better? trade-offs)
  • interactive examples to complete and modify in an online IDE

##AUDIENCE AngularJS Developers who master the basics of the framework and would like to learn an effective approach to design and implement complex real-world Angular applications in a robust, modular and future-proof way

##TRAINING OBJECTIVES The workshop will make you understand:

  • The challenges in developing large/complex Angular applications
  • The advantages of a Component-based approach to the UI
  • The differences between various types and roles of UI components

After the workshops you will be able to:

  • Design a complex UI by splitting it into separate, reusable components
  • Implement the components in Angular JS 1.5
  • Create complex interactions by having multiple components talk to each other
  • If needed, incrementally port your application to Angular 2.0

##PREREQUISITES

  • Practical experience in Javascript and AngularJS development (you should be able to write/compile/test/debug by yourself an AngularJS 1.x application including Data Binding, Controllers and Services).
  • Working knowledge of AngularJS syntax, Controllers and Services is required as these topics will NOT be explained in the workshop.
  • Knowledge of AngularJS Directive is useful, but not required.
  • Basic knowledge of HTML5 and of the DOM.

##About me Carlo’s passion for Software began with a C128, then grew with Linux, Java/JavaScript, web & enterprise apps, and now cloud & security. After a PhD and research experience at the University of Genova and the CNIT National TLC Research Consortium, and an exciting time at startup Eptamedia, he’s now a Solution Architect and Senior Trainer at NIS s.r.l.. His personal communication style as an architect and trainer, both technically precise and able to present in an engaging way complex topics to an heterogeneous audience has been appreciated online and at many events from Devoxx to Codemotion.