Decoupled Drupal with Angular

Size: px
Start display at page:

Download "Decoupled Drupal with Angular"

Transcription

1 Decoupled Drupal with Angular

2 Agenda Introduction Short intro on Drupal What is decoupled and choosing the right architecture Introduction to Angular Setting up Angular development environment Demo Application Showcase Angular & Drupal application Advanced usage of Angular Q&A

3 Introduction Adrian Pintilie 37 years old From Bacău, România General Softescu Drupal Developer for 10 years

4 Introduction Ionuț Stan 33 years old From Bacău, România Director of Softescu Drupal Developer for 9 years Acquia Certified Drupal Developer

5 Softescu Software and Design Agency established in 2008 in Bacău, România. Drupal Community sponsor since Providing services for portals and enterprise business applications with Drupal, Magento, Angular and Xamarin.

6 Short intro on Drupal

7 Drupal What is Drupal? Drupal is the #1 platform for web content management among global enterprises, governments, higher education institutions, and NGOs. Drupal is an Open Source Content Management System written in PHP. Drupal started to be used for blogs and presentations sites but now is also used for Enterprise Business Applications. Appeared in early 2000 (Dries Buytaert) Large community of developers and enthusiasts Drupal Association ( Drupal 8 (the latest major release)

8 How to tell if Drupal is the right choice for me? Is it suitable for my needs? How can I use it and how difficult it is to use it? What skills do I need to be in full control of it? Can I extend/adapt it if it s needed?

9 Extending Drupal

10 Monolithic vs. Decoupled Monolithic Decoupled

11 Choosing the right architecture

12 Advantages of a decoupled architecture Modern UI interfaces Modern UI components Extremely fast web interfaces (eg. Facebook)

13

14 API First Web services by default Drupal based API First distributions: Contenta and Acquia Reservoir Others: Contently etc.

15 Coupled Layout and Display management without a developer s help Contextual links and in-place editing Content workflow and preview Unified administrative menu (toolbar) Contributed modules Accessible markup that can be interpreted by screen readers Caching and performance System notifications

16 Coupled Drupal Data layer Use Drupal with its template system(twig) and additional jquery and AJAX functionality. Presentation layer

17 Progressively Decoupled Drupal Data layer Use Drupal to render the initial state and rely on a JavaScript framework for further processing on the client side and from time to time on the server Presentation layer

18 Fully Decoupled Drupal Data layer Use Drupal only to expose DATA and a JavaScript framework for interface Presentation layer

19 How can we Decouple Drupal? Content Management & Data Repository is inside Drupal Frontend interface is done in any other system JavaScript (Angular, React, etc) Mobile Applications Desktop Applications Etc. Communication is done via RESTFUL services

20 How can we Decouple Drupal? RESTful Web Services Core module Builds on top of Drupal 8's Serialization module to provide a customizable, extensible RESTful API of data managed by Drupal Allows interactions with any content entity (nodes, users, comments) or config entity (vocabularies, user roles)

21 Angular, React, Ember, VUE.js UIs? All based on TypeScript Backed by different organisations, groups, communities Angular is supported by Google (financially, organisation, etc) React was the first javascript frontend

22 Getting started Read the REST documentation practical Expose data as a REST Resource Grant necessary permissions (if any) Configure REST Resource s formats (JSON, XML, HAL+JSON, CSV, etc.) Configure REST Resource s authentication protocols (cookie, Basic Authentication, Oauth, etc.) Decide what requests (HTTP Verbs) you want to implement: GET, HEAD, POST, DELETE, TRACE, OPTIONS, CONNECT and PATCH Some of these methods are safe and some are non safe.

23 HTTP Requests (HTTP verbs) Safe methods are considered the ones that can be used only for reading data: HEAD GET OPTIONS TRACE Non-safe methods are considered the ones that can be used to write data: POST DELETE CONNECT PATCH Drupal 8 requires a X-CSRF-Token request header to be sent when using a non-safe method. So, when performing non-read-only requests, we need to obtain a token from: /session/token

24 HTTP Requests (HTTP verbs) Formatting the request Each REST requests, must tell Drupal about the serialization format that is used Specify the?_format query argument e.g. When sending a request body containing data in that format, we need to specify the Content-Type request header. This is the case for POST and PATCH.

25 Introduction to Angular

26 Is it AngularJS or Angular? AngularJS Appeared in 2010 Code production was very fast comparing to other JavaScript Based APIs Two way data binding Directives Supported by Google People started to rewrite existing applications in AngularJS Angular Complete rewrite of the framework Components (independent and loosely coupled as possible) Views (refers to a template which is managed by at least a controller) The application is now a component which contains a set of components(routable)

27 Angular components Components are a way of organizing User Interface code into reusable bits with their own logic and view. AngularJS s directives are Angular s components without a view Components create a user interface. We define a component for every UI element Angular application = Tree of components

28 Setting up the Angular environment Introducing angular-cli

29 angular-cli Node npm JavaScript runtime built on Chrome s V8 JavaScript engine Runs JavaScript without a browser Used to build task runners, compilers, linters and module loaders Cross-platform Installing Node for the official installer for your operating system Package manager for Node Comes with Node Installs dependencies Used for runtime Next step: Install angular-cli and generate a project

30 Installing angular-cli and generating an Angular Project angular-cli can be installed using npm: Open the Terminal (Command Line) Enter npm install -g That s it! Generating an Angular Project Open the Terminal (Command Line) Enter the ng new [project_name] command angular-cli will create a directory and build the project inside it Navigate inside the project folder Enter ng serve command That s it!

31 Project successfully generated

32 TypeScript Language It is not a new language! Superset of ES6 (ECMAScript) -> JavaScript Used in various frameworks: React Angular Express ASP.NET Core React Native Vue.js etc.

33 TypeScript Architecture Types of data Classes Components Modules Increase complexity Based on Model - View - Controller architecture (like Ruby on Rails) PHP Architecture Types of data Classes Functions Libraries Increase complexity Based on Model - View - Controller architecture (like Zend, Symfony)

34 Types TypeScript supports standard types like JavaScript: string, boolean, number, array TypeScript also includes specific types like: enum, any and void TypeScript supports custom types which can be defined by creating a class, an interface or using special files that declare types for an existing library

35 Classes Define a class using the class keyword Classes in TypeScript might have constructors and methods Inheritance using the extends keyword

36 Classes in TypeScript Classes in PHP class Product { color; price; class Product { private color; protected price; constructor(color, price) { this.color = color; this.price = price; } getproductdetails() { return `${this.color}, ${this.price}`; } } class Tshirt extends Product { size; constructor(color, price, size) { super(color, price); this.size = size; } getproductdetails(){ return `${this.color}, ${this.price}, ${this.size}`; } } public function _construct(color, price) { $this->color = color; $this->price = price; } } class Tshirt extends Product { private size; public function construct(color, price, size){ parent::_construct(color, size); $this->size = size; } }

37 Examples for classes and types // strings let name: string = "Ionut"; // boolean let isoffline: boolean = true; // number let height: number = 24; let width: number = 12; // arrays let colors: string[] = ['red', 'green', 'blue']; let colors: Array<string> = ['red', 'green', 'blue']; // value can be any type, init with a number let value: any = 5; // different types can assigned value = false; value = "this value is a string"; // default behavior, value of color will be 2; enum Color {Red, Green, Blue} let color: Color = Color.Blue; interface Model { get(query:string): any[]; } // manual initialize, value of color will be 6; enum Color {Red = 2, Green = 4, Blue = 6} let color: Color = Color.Blue; class Account implements Model { get(query:string):any[] { return []; } } class Model {} class Account extends Model {} class Controller { model:model; constructor(model:model) { this.model = Model; } } new Controller(Account); class Controller { model:model; constructor(model:model) { this.model = Model; } }

38 Managing dependencies with modules export and import keywords are used to share code between modules Avoids javascript limitation in terms of scope for variables and functions between files [file.ts] export function getanumber() { return Math.random(); } export class Client { constructor(name) { this.name = name; } } export const id = 12345; // import only the function from the module import { getanumber } from './file'; // import both the function and the class from the module import { getanumber, Client } from './file; // import the function and bind it to a random variable import { getanumber as random } from './file'; // import everything from the module and // bind it to a usermodule variable import * as UserModule from './file';

39 Components A component is a class that exposes data to the view and implements the logic for user interaction Angular Component = Model + View + Controller Additional definitions in metadata

40 Components angular-cli generated our project earlier creating a component with our application name (that we supplied to the ng new command). That component resides under the src/app/app.component.ts file: [app.component.ts] import { Component } from selector: 'app-root', templateurl: './app.component.html', styleurls: ['./app.component.css'] }) export class AppComponent { title = 'app works!'; } View Model & Controller

41 Component selector [index.html] <html> <head> <!-- other code related to the page head --> </head> <body> <app-root>loading...</app-root> </body> </html>

42 Component template selector: 'app-root', templateurl: './app.component.html' }) selector: 'app-root', template: ` <h1> {{title}} </h1> ` }) [app.component.html] <h1> {{title}} </h1>

43 Embedding styles in component template selector: 'app-root', template: ` <h1> {{title}} </h1> `, styleurls: ['./app.component.css'] }) selector: 'app-root', template: ` <h1> {{title}} </h1> `, styles: [` h1 { color: darkblue } `] })

44 Data bindings in component template [app.component.ts] import { Component, ViewEncapsulation } from selector: 'app-root', encapsulation: ViewEncapsulation.None, template: ` <h1> {{title}} </h1> `, styles: [` h1 { color: darkblue } `] }) export class AppComponent { title = 'app works!'; }

45 Components in Browser HTML output

46 Application bootstrapping in Angular import { platformbrowserdynamic } from '@angular/platform-browser-dynamic'; import { enableprodmode } from '@angular/core'; import { environment } from './environments/environment'; import { AppModule } from './app/'; if (environment.production) { enableprodmode(); } platformbrowserdynamic().bootstrapmodule(appmodule);

47 With this Angular application we will show how to decouple Drupal by interacting with it (managing content) without using the Drupal interface.

48 Configuring Drupal for our demo application

49 Step by step Drupal configuration Create a content type called Person Define 4 text fields (Age, Experience, Image and Profession) Activate the necessary modules to be able to expose content (RESTful Web Services, REST UI, HTTP Basic Authentication, HAL, CORS) Enable the Content Resource in REST configuration to allow CRUD operations (configure Basic Authentication) Create a View called Persons with a REST export Display mode and configure it to display fields from the Person Content type Go ahead and create several Person nodes in the site

50 Configuring Angular for our demo application

51 Step by step Angular configuration Generate the application skeleton using angular-cli (as shown earlier). This process is also known as scaffolding your application In the main app.component.ts file import the necessary modules and declare the components that are going to be used inside the application Declare the base component along with its template and selector (app.component.ts) Create the HTML markup of the application in the base component template (app.component.html) Define a class to represent Persons(Employees - person.ts) Create 3 components to represent the homepage of the application, the listing page of the persons and the person page

52 Step by step Angular configuration Define a service using the rxjs library and import it in the listing component as well as in the people page component (people.service.ts) Define 2 custom validators for verifying the age of the employees when they are edited Define the routes using the Angular Route module and RouterModule module. Import these in the app.module.ts Install and start the application

53 Advanced usage of Angular Consuming data with http, using forms and routes.

54 Advanced Usage of Angular Routes Forms Elastic Search Integration with other libraries for AngularJS (HighCharts, etc)

55 Angular debugging Chrome Profiler Batarang Performance tips

56 Showcase Angular & Drupal application

57 Q&A

58 Thank you! ありがとうございました

One Framework. Angular

One Framework. Angular One Framework. Angular Web 2.0 Marc Dangschat Introduction AngularJS (1) released in 2009 Angular (2) released October Short: ng Framework TypeScript, JavaScript, Dart MIT license

More information

IN4MATX 133: User Interface Software

IN4MATX 133: User Interface Software IN4MATX 133: User Interface Software Lecture 13: Components in Angular Professor Daniel A. Epstein TA Jamshir Goorabian TA Simion Padurean 1 Notes Important: please put your name/email/id in the readme.txt

More information

By the end of this Angular 6 tutorial, you'll learn by building a real world example application:

By the end of this Angular 6 tutorial, you'll learn by building a real world example application: Throughout this Angular 6 tutorial, we'll learn to build a full-stack example web application with Angular 6, the latest version of Angular The most popular framework/platform for building mobile and desktop

More information

Hands on Angular Framework

Hands on Angular Framework FACULTY OF AUTOMATION AND COMPUTER SCIENCE COMPUTER SCIENCE DEPARTMENT Hands on Angular Framework Ioan Salomie Tudor Cioara Ionut Anghel Marcel Antal Teodor Petrican Claudia Daniela Pop Dorin Moldovan

More information

Lab 1 - Introduction to Angular

Lab 1 - Introduction to Angular Lab 1 - Introduction to Angular In this lab we will build a Hello World style Angular component. The key focus is to learn how to install all the required code and use them from the browser. We wont get

More information

Advance Mobile& Web Application development using Angular and Native Script

Advance Mobile& Web Application development using Angular and Native Script Advance Mobile& Web Application development using Angular and Native Script Objective:- As the popularity of Node.js continues to grow each day, it is highly likely that you will use it when you are building

More information

Simple AngularJS thanks to Best Practices

Simple AngularJS thanks to Best Practices Simple AngularJS thanks to Best Practices Learn AngularJS the easy way Level 100-300 What s this session about? 1. AngularJS can be easy when you understand basic concepts and best practices 2. But it

More information

AngularJS Fundamentals

AngularJS Fundamentals AngularJS Fundamentals by Jeremy Zerr Blog: http://www.jeremyzerr.com LinkedIn: http://www.linkedin.com/in/jrzerr Twitter: http://www.twitter.com/jrzerr What is AngularJS Open Source Javascript MVC/MVVM

More information

Angular 2 Programming

Angular 2 Programming Course Overview Angular 2 is the next iteration of the AngularJS framework. It promises better performance. It uses TypeScript programming language for type safe programming. Overall you should see better

More information

Modern and Responsive Mobile-enabled Web Applications

Modern and Responsive Mobile-enabled Web Applications Available online at www.sciencedirect.com ScienceDirect Procedia Computer Science 110 (2017) 410 415 The 12th International Conference on Future Networks and Communications (FNC-2017) Modern and Responsive

More information

ANGULAR 2.X,4.X + TYPESRCIPT by Sindhu

ANGULAR 2.X,4.X + TYPESRCIPT by Sindhu ANGULAR 2.X,4.X + TYPESRCIPT by Sindhu GETTING STARTED WITH TYPESCRIPT Installing TypeScript Compiling the code Building a simple demo. UNDERSTANDING CLASSES Building a class Adding properties Demo of

More information

Sample Copy. Not For Distribution.

Sample Copy. Not For Distribution. Angular 2 Interview Questions and Answers With Typescript and Angular 4 i Publishing-in-support-of, EDUCREATION PUBLISHING RZ 94, Sector - 6, Dwarka, New Delhi - 110075 Shubham Vihar, Mangla, Bilaspur,

More information

Arjen de Blok. Senior Technical Consultant bij ICT Groep ( sinds 1995 Programmeren sinds 1990 Technologiën. Links

Arjen de Blok. Senior Technical Consultant bij ICT Groep (  sinds 1995 Programmeren sinds 1990 Technologiën. Links Arjen de Blok Senior Technical Consultant bij ICT Groep (www.ict.eu) sinds 1995 Programmeren sinds 1990 Technologiën Links Visual C++ met Microsoft Foundation Classes.NET WinForms & WPF Silverlight ASP.NET

More information

Integrating Angular with ASP.NET Core RESTful Services. Dan Wahlin

Integrating Angular with ASP.NET Core RESTful Services. Dan Wahlin Integrating Angular with ASP.NET Core RESTful Services Dan Wahlin Dan Wahlin https://blog.codewithdan.com @DanWahlin Get the Content: http://codewithdan.me/angular-aspnet-core Agenda The Big Picture Creating

More information

DECOUPLING PATTERNS, SERVICES AND CREATING AN ENTERPRISE LEVEL EDITORIAL EXPERIENCE

DECOUPLING PATTERNS, SERVICES AND CREATING AN ENTERPRISE LEVEL EDITORIAL EXPERIENCE DECOUPLING PATTERNS, SERVICES AND CREATING AN ENTERPRISE LEVEL EDITORIAL EXPERIENCE Who we are and Why we are here? Saurabh Chugh Started Drupal journey in 2010 with Drupal 6, long journey with Drupal

More information

Course Outline. ProTech Professional Technical Services, Inc. Comprehensive Angular 7 Course Summary. Description

Course Outline. ProTech Professional Technical Services, Inc. Comprehensive Angular 7 Course Summary. Description Course Summary Description Use Angular 7 to easily build web applications that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server. Learn

More information

"Charting the Course... Comprehensive Angular. Course Summary

Charting the Course... Comprehensive Angular. Course Summary Description Course Summary Angular is a powerful client-side JavaScript framework from Google that supports simple, maintainable, responsive, and modular applications. It uses modern web platform capabilities

More information

A Closer Look at XPages in IBM Lotus Domino Designer 8.5 Ray Chan Advisory I/T Specialist Lotus, IBM Software Group

A Closer Look at XPages in IBM Lotus Domino Designer 8.5 Ray Chan Advisory I/T Specialist Lotus, IBM Software Group A Closer Look at XPages in IBM Lotus Domino Designer 8.5 Ray Chan Advisory I/T Specialist Lotus, IBM Software Group 2008 IBM Corporation Agenda XPage overview From palette to properties: Controls, Ajax

More information

PHP WITH ANGULAR CURRICULUM. What you will Be Able to Achieve During This Course

PHP WITH ANGULAR CURRICULUM. What you will Be Able to Achieve During This Course PHP WITH ANGULAR CURRICULUM What you will Be Able to Achieve During This Course This course will enable you to build real-world, dynamic web sites. If you've built websites using plain HTML, you realize

More information

Introduction to. Angular. Prof. Dr.-Ing. Thomas Wiedemann.

Introduction to. Angular. Prof. Dr.-Ing. Thomas Wiedemann. EwA - Web based systems Introduction to Angular Prof. Dr.-Ing. Thomas Wiedemann email: wiedem@informatik.htw-dresden.de HOCHSCHULE FÜR TECHNIK UND WIRTSCHAFT DRESDEN (FH) Fachbereich Informatik/Mathematik

More information

Full Stack Web Developer

Full Stack Web Developer Full Stack Web Developer Course Contents: Introduction to Web Development HTML5 and CSS3 Introduction to HTML5 Why HTML5 Benefits Of HTML5 over HTML HTML 5 for Making Dynamic Page HTML5 for making Graphics

More information

Comprehensive AngularJS Programming (5 Days)

Comprehensive AngularJS Programming (5 Days) www.peaklearningllc.com S103 Comprehensive AngularJS Programming (5 Days) The AngularJS framework augments applications with the "model-view-controller" pattern which makes applications easier to develop

More information

Before proceeding with this tutorial, you should have a basic understanding of HTML, CSS, JavaScript, TypeScript, and Document Object Model (DOM).

Before proceeding with this tutorial, you should have a basic understanding of HTML, CSS, JavaScript, TypeScript, and Document Object Model (DOM). i About the Tutorial Angular 4 is a JavaScript framework for building web applications and apps in JavaScript, html, and TypeScript, which is a superset of JavaScript. Angular provides built-in features

More information

Angular 4 Training Course Content

Angular 4 Training Course Content CHAPTER 1: INTRODUCTION TO ANGULAR 4 Angular 4 Training Course Content What is Angular 4? Central Features of the Angular Framework Why Angular? Scope and Goal of Angular Angular 4 vs Angular 2 vs. AngularJS

More information

Ten interesting features of Google s Angular Project

Ten interesting features of Google s Angular Project Ten interesting features of Google s Angular Project - 1 Ten interesting features of Google s Angular Project Copyright Clipcode Ltd 2018 All rights reserved Ten interesting features of Google s Angular

More information

Frontend UI Training. Whats App :

Frontend UI Training. Whats App : Frontend UI Training Whats App : + 916 667 2961 trainer.subbu@gmail.com What Includes? 1. HTML 5 2. CSS 3 3. SASS 4. JavaScript 5. ES 6/7 6. jquery 7. Bootstrap 8. AJAX / JSON 9. Angular JS 1x 10. Node

More information

Stencil: The Time for Vanilla Web Components has Arrived

Stencil: The Time for Vanilla Web Components has Arrived Stencil: The Time for Vanilla Web Components has Arrived Gil Fink sparxys CEO @gilfink / www.gilfink.net Typical Application Web Page Design From Design to Implementation Session List Day tabs Component

More information

Full Stack boot camp

Full Stack boot camp Name Full Stack boot camp Duration (Hours) JavaScript Programming 56 Git 8 Front End Development Basics 24 Typescript 8 React Basics 40 E2E Testing 8 Build & Setup 8 Advanced JavaScript 48 NodeJS 24 Building

More information

The course also includes an overview of some of the most popular frameworks that you will most likely encounter in your real work environments.

The course also includes an overview of some of the most popular frameworks that you will most likely encounter in your real work environments. Web Development WEB101: Web Development Fundamentals using HTML, CSS and JavaScript $2,495.00 5 Days Replay Class Recordings included with this course Upcoming Dates Course Description This 5-day instructor-led

More information

Mobile App Development

Mobile App Development Mobile App Development NativeScript e Angular 2+ filippo Filippo Matteo Riggio CTO @ Sviluppatore Full-Stack e Mobile Scenario Scenario Nativo WebView-ed Soluzioni cross - from web to native Swift - Objective

More information

10267A CS: Developing Web Applications Using Microsoft Visual Studio 2010

10267A CS: Developing Web Applications Using Microsoft Visual Studio 2010 10267A CS: Developing Web Applications Using Microsoft Visual Studio 2010 Course Overview This instructor-led course provides knowledge and skills on developing Web applications by using Microsoft Visual

More information

Advanced Angular & Angular 6 Preview. Bibhas Bhattacharya

Advanced Angular & Angular 6 Preview. Bibhas Bhattacharya Advanced Angular & Angular 6 Preview Bibhas Bhattacharya Agenda Lazy loading modules Using Bootstrap with Angular Publish/subscribe with the RxJS Subject API What's new in Angular 6 Lazy Loading Modules

More information

UI Course HTML: (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) Introduction. The World Wide Web (WWW) and history of HTML

UI Course HTML: (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) Introduction. The World Wide Web (WWW) and history of HTML UI Course (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) HTML: Introduction The World Wide Web (WWW) and history of HTML Hypertext and Hypertext Markup Language Why HTML Prerequisites Objective

More information

SHAREPOINT DEVELOPMENT FOR 2016/2013

SHAREPOINT DEVELOPMENT FOR 2016/2013 SHAREPOINT DEVELOPMENT FOR 2016/2013 Course Code: AUDIENCE: FORMAT: LENGTH: SP16-310-GSA (CP GSA2016) Professional Developers Instructor-led training with hands-on labs 5 Days COURSE INCLUDES: 5-days of

More information

Open Source Library Developer & IT Pro

Open Source Library Developer & IT Pro Open Source Library Developer & IT Pro Databases LEV 5 00:00:00 NoSQL/MongoDB: Buildout to Going Live INT 5 02:15:11 NoSQL/MongoDB: Implementation of AngularJS INT 2 00:59:55 NoSQL: What is NoSQL INT 4

More information

Full Stack Web Developer

Full Stack Web Developer Full Stack Web Developer S.NO Technologies 1 HTML5 &CSS3 2 JavaScript, Object Oriented JavaScript& jquery 3 PHP&MYSQL Objective: Understand the importance of the web as a medium of communication. Understand

More information

"Charting the Course... Comprehensive Angular 6 Course Summary

Charting the Course... Comprehensive Angular 6 Course Summary Course Summary Description Build applications with the user experience of a desktop application and the ease of deployment of a web application using Angular. Start from scratch by learning the JavaScript

More information

This course is designed for web developers that want to learn HTML5, CSS3, JavaScript and jquery.

This course is designed for web developers that want to learn HTML5, CSS3, JavaScript and jquery. HTML5/CSS3/JavaScript Programming Course Summary Description This class is designed for students that have experience with basic HTML concepts that wish to learn about HTML Version 5, Cascading Style Sheets

More information

Application Design and Development: October 30

Application Design and Development: October 30 M149: Database Systems Winter 2018 Lecturer: Panagiotis Liakos Application Design and Development: October 30 1 Applications Programs and User Interfaces very few people use a query language to interact

More information

THE GREAT SHAREPOINT ADVENTURE 2016

THE GREAT SHAREPOINT ADVENTURE 2016 Education and Support for SharePoint, Office 365 and Azure www.combined-knowledge.com COURSE OUTLINE THE GREAT SHAREPOINT ADVENTURE 2016 Course Code GSA2016 Length 5 Days About this course The Great SharePoint

More information

"Charting the Course... Comprehensive Angular 5. Course Summary

Charting the Course... Comprehensive Angular 5. Course Summary Course Summary Description Comprehensive Angular teaches students the skills and best practices they need to design, build, test, and deploy applications that provide rich end-user experiences similar

More information

Angular 2 and TypeScript Web Application Development

Angular 2 and TypeScript Web Application Development Angular 2 and TypeScript Web Application Development Course code: IJ -19 Course domain: Software Engineering Number of modules: 1 Duration of the course: 40 study 1 hours Sofia, 2016 Copyright 2003-2016

More information

Architecting C++ apps

Architecting C++ apps Architecting C++ apps with a multi-device application platform John JT Thomas Director of Product Management jt@embarcadero.com @FireMonkeyPM blogs.embarcadero.com/jtembarcadero/ What is a multi-device

More information

The Great SharePoint 2016/2013 Adventure for Developers

The Great SharePoint 2016/2013 Adventure for Developers The Great SharePoint 2016/2013 Adventure for Developers Developing for SharePoint 2016/2013 On-premises Course Code Audience Format Length Course Description Student Prerequisites GSA2016 Professional

More information

The Now Platform Reference Guide

The Now Platform Reference Guide The Now Platform Reference Guide A tour of key features and functionality START Introducing the Now Platform Digitize your business with intelligent apps The Now Platform is an application Platform-as-a-Service

More information

Apex TG India Pvt. Ltd.

Apex TG India Pvt. Ltd. (Core C# Programming Constructs) Introduction of.net Framework 4.5 FEATURES OF DOTNET 4.5 CLR,CLS,CTS, MSIL COMPILER WITH TYPES ASSEMBLY WITH TYPES Basic Concepts DECISION CONSTRUCTS LOOPING SWITCH OPERATOR

More information

All India Council For Research & Training

All India Council For Research & Training WEB DEVELOPMENT & DESIGNING Are you looking for a master program in web that covers everything related to web? Then yes! You have landed up on the right page. Web Master Course is an advanced web designing,

More information

Get in Touch Module 1 - Core PHP XHTML

Get in Touch Module 1 - Core PHP XHTML PHP/MYSQL (Basic + Advanced) Web Technologies Module 1 - Core PHP XHTML What is HTML? Use of HTML. Difference between HTML, XHTML and DHTML. Basic HTML tags. Creating Forms with HTML. Understanding Web

More information

55249: Developing with the SharePoint Framework Duration: 05 days

55249: Developing with the SharePoint Framework Duration: 05 days Let s Reach For Excellence! TAN DUC INFORMATION TECHNOLOGY SCHOOL JSC Address: 103 Pasteur, Dist.1, HCMC Tel: 08 38245819; 38239761 Email: traincert@tdt-tanduc.com Website: www.tdt-tanduc.com; www.tanducits.com

More information

Developing ASP.NET MVC Web Applications (486)

Developing ASP.NET MVC Web Applications (486) Developing ASP.NET MVC Web Applications (486) Design the application architecture Plan the application layers Plan data access; plan for separation of concerns, appropriate use of models, views, controllers,

More information

PHP + ANGULAR4 CURRICULUM 6 WEEKS

PHP + ANGULAR4 CURRICULUM 6 WEEKS PHP + ANGULAR4 CURRICULUM 6 WEEKS Hands-On Training In this course, you develop PHP scripts to perform a variety to takes, culminating in the development of a full database-driven Web page. Exercises include:

More information

Angular 4 Syllabus. Module 1: Introduction. Module 2: AngularJS to Angular 4. Module 3: Introduction to Typescript

Angular 4 Syllabus. Module 1: Introduction. Module 2: AngularJS to Angular 4. Module 3: Introduction to Typescript Angular 4 Syllabus Module 1: Introduction Course Objectives Course Outline What is Angular Why use Angular Module 2: AngularJS to Angular 4 What s Changed Semantic Versioning Module 3: Introduction to

More information

TYPESCRIPT. Presented by Clarke Bowers

TYPESCRIPT. Presented by Clarke Bowers TYPESCRIPT Presented by Clarke Bowers ABOUT THE PRESENTER Clarke D. Bowers http://www.cbsoftwareengineering.com/ mailto: clarke@cbsoftwareengineering.com 35 years of industry experience Has developed everything

More information

DreamFactory Security Guide

DreamFactory Security Guide DreamFactory Security Guide This white paper is designed to provide security information about DreamFactory. The sections below discuss the inherently secure characteristics of the platform and the explicit

More information

Web Development for Dinosaurs An Introduction to Modern Web Development

Web Development for Dinosaurs An Introduction to Modern Web Development Web Development for Dinosaurs An Introduction to Modern Web Development 1 / 53 Who Am I? John Cleaver Development Team Lead at Factivity, Inc. An Introduction to Modern Web Development - PUG Challenge

More information

Chapter 1 - Development Setup of Angular

Chapter 1 - Development Setup of Angular Chapter 1 - Development Setup of Angular Objectives Key objectives of this chapter Angular Files and Dependencies Node.js Node package manager (npm) package.json Semantic version numbers Installing Angular

More information

Static Webpage Development

Static Webpage Development Dear Student, Based upon your enquiry we are pleased to send you the course curriculum for PHP Given below is the brief description for the course you are looking for: - Static Webpage Development Introduction

More information

Full Stack Web Developer Nanodegree Syllabus

Full Stack Web Developer Nanodegree Syllabus Full Stack Web Developer Nanodegree Syllabus Build Complex Web Applications Before You Start Thank you for your interest in the Full Stack Web Developer Nanodegree! In order to succeed in this program,

More information

Introduction to Sencha Ext JS

Introduction to Sencha Ext JS Introduction to Sencha Ext JS Olga Petrova olga@sencha.com Sales Engineer EMEA Agenda Use Case How It Works Advantages Demo Use case Ext JS a Javascript framework for building enterprise data-intensive

More information

Microsoft. Inside Microsoft. SharePoint Ted Pattison. Andrew Connell. Scot Hillier. David Mann

Microsoft. Inside Microsoft. SharePoint Ted Pattison. Andrew Connell. Scot Hillier. David Mann Microsoft Inside Microsoft SharePoint 2010 Ted Pattison Andrew Connell Scot Hillier David Mann ble of Contents Foreword Acknowledgments Introduction xv xvii xix 1 SharePoint 2010 Developer Roadmap 1 SharePoint

More information

Nagaraju Bende

Nagaraju Bende AngularJS Nagaraju Bende Blog Twitter @nbende FaceBook nbende http://angularjs.org Agenda Introduction to AngularJS Pre-Requisites Why AngularJS Only Getting Started MV* pattern of AngularJS Directives,

More information

Magento 2 Certified Professional Developer. Exam Study Guide

Magento 2 Certified Professional Developer. Exam Study Guide Magento 2 Certified Professional Developer Exam Study Guide U Contents Contents Introduction... 1 Topics and Objectives... 3 1 Magento Architecture and Customization Techniques... 3 1.1 Describe Magento

More information

Basics of Web Technologies

Basics of Web Technologies Dear Student, Based upon your enquiry we are pleased to send you the course curriculum for Web Designing Given below is the brief description for the course you are looking for: Introduction to Web Technologies

More information

Setting up an Angular 4 MEAN Stack (Tutorial)

Setting up an Angular 4 MEAN Stack (Tutorial) Setting up an Angular 4 MEAN Stack (Tutorial) MEAN4 Stack, MongoDB, Express.js, Angular4, Node.js6.11.4 Installed https://coursetro.com/posts/code/84/setting-up-an-angular-4-mean-stack-(tutorial) Node.js

More information

"Charting the Course... MOC A: Developing with the SharePoint Framework. Course Summary

Charting the Course... MOC A: Developing with the SharePoint Framework. Course Summary Course Summary Description This five-day instructor-led course is intended for developers who want to be able to create client-side applications with SharePoint Framework. In this course, students will

More information

Tools for Accessing REST APIs

Tools for Accessing REST APIs APPENDIX A Tools for Accessing REST APIs When you have to work in an agile development environment, you need to be able to quickly test your API. In this appendix, you will learn about open source REST

More information

August, HPE Propel Microservices & Jumpstart

August, HPE Propel Microservices & Jumpstart August, 2016 HPE Propel s & Jumpstart Jumpstart Value Quickly build modern web applications Single page application Modular microservices architecture app generator Modularity provides better upgradeability

More information

55191: Advanced SharePoint Development

55191: Advanced SharePoint Development Let s Reach For Excellence! TAN DUC INFORMATION TECHNOLOGY SCHOOL JSC Address: 103 Pasteur, Dist.1, HCMC Tel: 08 38245819; 38239761 Email: traincert@tdt-tanduc.com Website: www.tdt-tanduc.com; www.tanducits.com

More information

TypeScript. TypeScript. RxJS

TypeScript. TypeScript. RxJS Web 2017.08 About Me TypeScript TypeScript RxJS 2014 X 4 0 Mac/Windows Native UI Web Angular React JavaScript IM User DING Contact RPC Native Nw.js C++ Cef 2014 10 Web 11 nw.js Web App IM DING DING ->

More information

Advantages: simple, quick to get started, perfect for simple forms, don t need to know how form model objects work

Advantages: simple, quick to get started, perfect for simple forms, don t need to know how form model objects work 1 Forms 1.1 Introduction You cannot enter data in an application without forms. AngularJS allowed the user to create forms quickly, using the NgModel directive to bind the input element to the data in

More information

welcome to BOILERCAMP HOW TO WEB DEV

welcome to BOILERCAMP HOW TO WEB DEV welcome to BOILERCAMP HOW TO WEB DEV Introduction / Project Overview The Plan Personal Website/Blog Schedule Introduction / Project Overview HTML / CSS Client-side JavaScript Lunch Node.js / Express.js

More information

Course Outline. Developing Web Applications with ASP.Net MVC 5. Course Description: Pre-requisites: Course Content:

Course Outline. Developing Web Applications with ASP.Net MVC 5. Course Description: Pre-requisites: Course Content: Developing Web Applications with ASP.Net MVC 5 Course Description: The Model View Controller Framework in ASP.NET provides a new way to develop Web applications for the Microsoft.NET platform. Differing

More information

Enterprise Web Development

Enterprise Web Development Enterprise Web Development Yakov Fain, Victor Rasputnis, Anatole Tartakovsky, and Viktor Gamov Beijing Cambridge Farnham Koln Sebastopol Tokyo O'REILLY Table of Contents Preface Introduction xi xxiii Part

More information

Modern SharePoint and Office 365 Development

Modern SharePoint and Office 365 Development Modern SharePoint and Office 365 Development Mastering Today s Best Practices in Web and Mobile Development Course Code Audience Format Length Course Description Student Prerequisites MSD365 Professional

More information

The decoupled CMS in financial services. Preston So 8 Nov 2017 Open Source Strategy Forum 2017

The decoupled CMS in financial services. Preston So 8 Nov 2017 Open Source Strategy Forum 2017 The decoupled CMS in financial services Preston So 8 Nov 2017 Open Source Strategy Forum 2017 Welcome! Preston So has been a web developer and designer since 2001, a creative professional since 2004, and

More information

Advanced React JS + Redux Development

Advanced React JS + Redux Development Advanced React JS + Redux Development Course code: IJ - 27 Course domain: Software Engineering Number of modules: 1 Duration of the course: 40 astr. hours / 54 study 1 hours Sofia, 2016 Copyright 2003-2016

More information

Oracle APEX 18.1 New Features

Oracle APEX 18.1 New Features Oracle APEX 18.1 New Features May, 2018 Safe Harbor Statement The following is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated

More information

a Very Short Introduction to AngularJS

a Very Short Introduction to AngularJS a Very Short Introduction to AngularJS Lecture 11 CGS 3066 Fall 2016 November 8, 2016 Frameworks Advanced JavaScript programming (especially the complex handling of browser differences), can often be very

More information

2310C VB - Developing Web Applications Using Microsoft Visual Studio 2008 Course Number: 2310C Course Length: 5 Days

2310C VB - Developing Web Applications Using Microsoft Visual Studio 2008 Course Number: 2310C Course Length: 5 Days 2310C VB - Developing Web Applications Using Microsoft Visual Studio 2008 Course Number: 2310C Course Length: 5 Days Certification Exam This course will help you prepare for the following Microsoft Certified

More information

Demystifying Angular 2. SPAs for the Web of Tomorrow

Demystifying Angular 2. SPAs for the Web of Tomorrow Demystifying Angular 2 SPAs for the Web of Tomorrow Philipp Tarasiewicz, JavaLand, 08.03.2016 Web Dev / Distributed Systems 15 yr. About Me Philipp Tarasiewicz Consultant / Trainer / Developer philipp.tarasiewicz@googlemail.com

More information

Helpline No WhatsApp No.:

Helpline No WhatsApp No.: TRAINING BASKET QUALIFY FOR TOMORROW Helpline No. 9015887887 WhatsApp No.: 9899080002 Regd. Off. Plot No. A-40, Unit 301/302, Tower A, 3rd Floor I-Thum Tower Near Corenthum Tower, Sector-62, Noida - 201309

More information

Homework 8: Ajax, JSON and Responsive Design Travel and Entertainment Search (Bootstrap/Angular/AJAX/JSON/jQuery /Cloud Exercise)

Homework 8: Ajax, JSON and Responsive Design Travel and Entertainment Search (Bootstrap/Angular/AJAX/JSON/jQuery /Cloud Exercise) Homework 8: Ajax, JSON and Responsive Design Travel and Entertainment Search (Bootstrap/Angular/AJAX/JSON/jQuery /Cloud Exercise) 1. Objectives Get familiar with the AJAX and JSON technologies Use a combination

More information

Angular 2: What s new? Jonas Bandi, IvoryCode GmbH

Angular 2: What s new? Jonas Bandi, IvoryCode GmbH Angular 2: What s new? Jonas Bandi, IvoryCode GmbH Once upon a time the world was peacefully creating applications with AngularJS but change was lurking in the maze of a mailing list https://groups.google.com/forum/#!search/misko$20hevery$20may$2022$202013/polymer-dev/4rsyakmbtek/uyny3900wpij

More information

D3 + Angular JS = Visual Awesomesauce

D3 + Angular JS = Visual Awesomesauce D3 + Angular JS = Visual Awesomesauce John Niedzwiecki Lead UI Developer - ThreatTrack @RHGeek on Twitter and GitHub In addition to turning caffeine into code... disney geek, runner, gamer, father of two

More information

Introduction to decoupled Drupal. Preston So 26 Sep 2017 DrupalCon Vienna 2017

Introduction to decoupled Drupal. Preston So 26 Sep 2017 DrupalCon Vienna 2017 Introduction to decoupled Drupal Preston So 26 Sep 2017 DrupalCon Vienna 2017 Herzlich Willkommen! Preston So has been a web developer and designer since 2001, a creative professional since 2004, and a

More information

P a g e 1. Danish Technological Institute. Scripting and Web Languages Online Course k Scripting and Web Languages

P a g e 1. Danish Technological Institute. Scripting and Web Languages   Online Course k Scripting and Web Languages P a g e 1 Online Course k72853 Scripting and Web Languages P a g e 2 Title Estimated Duration (hrs) JsRender Fundamentals 2 Advanced JsRender Features 3 JavaScript SPA: Getting Started with SPA in Visual

More information

OpenECOMP SDC Developer Guide

OpenECOMP SDC Developer Guide OpenECOMP SDC Developer Guide Copyright 2017 AT&T Intellectual Property. All rights reserved. Licensed under the Creative Commons License, Attribution 4.0 Intl. (the "License"); you may not use this documentation

More information

ANGULAR2 OVERVIEW. The Big Picture. Getting Started. Modules and Components. Declarative Template Syntax. Forms

ANGULAR2 OVERVIEW. The Big Picture. Getting Started. Modules and Components. Declarative Template Syntax. Forms FORMS IN ANGULAR Hello Cluj. I m Alex Lakatos, a Mozilla volunteer which helps other people volunteer. I want to talk to you today about Angular forms. What s a form you ask? A form creates a cohesive,

More information

Guides SDL Server Documentation Document current as of 05/24/ :13 PM.

Guides SDL Server Documentation Document current as of 05/24/ :13 PM. Guides SDL Server Documentation Document current as of 05/24/2018 04:13 PM. Overview This document provides the information for creating and integrating the SmartDeviceLink (SDL) server component with

More information

An Introduction to JavaScript & Bootstrap Basic concept used in responsive website development Form Validation Creating templates

An Introduction to JavaScript & Bootstrap Basic concept used in responsive website development Form Validation Creating templates PHP Course Contents An Introduction to HTML & CSS Basic Html concept used in website development Creating templates An Introduction to JavaScript & Bootstrap Basic concept used in responsive website development

More information

ReportPlus Embedded Web SDK Guide

ReportPlus Embedded Web SDK Guide ReportPlus Embedded Web SDK Guide ReportPlus Web Embedding Guide 1.4 Disclaimer THE INFORMATION CONTAINED IN THIS DOCUMENT IS PROVIDED AS IS WITHOUT ANY EXPRESS REPRESENTATIONS OF WARRANTIES. IN ADDITION,

More information

Getting started with Convertigo Mobilizer

Getting started with Convertigo Mobilizer Getting started with Convertigo Mobilizer First Sencha-based project tutorial CEMS 6.0.0 TABLE OF CONTENTS Convertigo Mobilizer overview...1 Introducing Convertigo Mobilizer... 1-1 Convertigo Mobilizer

More information

Angular from the Beginning

Angular from the Beginning from the Beginning EMEA PUG Challenge, Prague Introduction Robert Prediger 25 years experience in PROGRESS 17 years experience in web development 8 years experience in Node.js robert.prediger@web4biz.de

More information

Practical Course: Web Development Angular JS Part I Winter Semester 2016/17. Juliane Franze

Practical Course: Web Development Angular JS Part I Winter Semester 2016/17. Juliane Franze Practical Course: Web Development Angular JS Part I Winter Semester 2016/17 Juliane Franze Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17-01 - 1 Today s Agenda What is

More information

POWER BI BOOTCAMP. COURSE INCLUDES: 4-days of instructor led discussion, Hands-on Office labs and ebook.

POWER BI BOOTCAMP. COURSE INCLUDES: 4-days of instructor led discussion, Hands-on Office labs and ebook. Course Code : AUDIENCE : FORMAT: LENGTH: POWER BI BOOTCAMP O365-412-PBID (CP PBD365) Professional Developers Instructor-led training with hands-on labs 4 Days COURSE INCLUDES: 4-days of instructor led

More information

React(.js) the Domino Way High-Performance Client for Domino. Knut Herrmann

React(.js) the Domino Way High-Performance Client for Domino. Knut Herrmann React(.js) the Domino Way High-Performance Client for Domino Knut Herrmann CollabSphere 2018 Sponsors Knut Herrmann Senior Software Architect Leonso GmbH Notes Domino developer since version 2 Web application

More information

Angular 2 and TypeScript Web Application Development

Angular 2 and TypeScript Web Application Development Angular 2 and TypeScript Web Application Development Course code: IJ -23 Course domain: Software Engineering Number of modules: 1 Duration of the course: 42 study 1 (32 astr.) hours Sofia, 2016 Copyright

More information

TSInfo Technologies (OPC) Pvt Ltd

TSInfo Technologies (OPC) Pvt Ltd ABSTRACT Courses for SharePoint online Office 365 and SharePoint 2016 training SharePoint Training Courses Prepared By Bijay Kumar Sahoo (Microsoft MVP) SharePoint Online Office 365 SharePoint 2016 SharePoint

More information

Introduction to TypeScript

Introduction to TypeScript AngularJS and TypeScript SPA Development, http://www.iproduct.org/ Introduction to TypeScript e-mail: tiliev@iproduct.org web: http://www.iproduct.org Oracle, Java and JavaScript are trademarks or registered

More information

AngulAr 4 Pocket Primer

AngulAr 4 Pocket Primer Angular 4 Pocket Primer LICENSE, DISCLAIMER OF LIABILITY, AND LIMITED WARRANTY By purchasing or using this book and disc (the Work ), you agree that this license grants permission to use the contents contained

More information