Extending Blue Ocean Keith Zantow

Size: px
Start display at page:

Download "Extending Blue Ocean Keith Zantow"

Transcription

1 Extending Blue Ocean Keith Zantow

2 About Keith Senior Software Engineer at CloudBees, Inc. Jenkins & Blue Ocean core contributor 15+ years full-stack development Github: kzantow

3 Intended Audience Development experience Java JavaScript HTML & CSS Node Existing Jenkins plugin development experience or desire to implement a plugin for Blue Ocean

4 Example Code github.com/kzantow/blueocean-executor-info-plugin

5 Introduction

6 Recap: what is Blue Ocean? Re-thinking of the Jenkins user experience Focused on Pipeline Visualisation Creation Editing Extensible, like Jenkins

7 Blue Ocean

8 Pipeline Creation

9 Pipeline Editor

10 Pipeline Visualization: Execution

11 Pipeline Visualization: Post-Execution

12 Pipeline Visualization: Post-Execution

13 Pipeline Activity

14 How is it built?

15 Technologies Used Java (java.sun.com) Maven (maven.apache.org) Stapler (stapler.kohsuke.org) React (facebook.github.io/react) MobX (mobx.js.org) Node * (nodejs.org) Babel * (babeljs.io) LESS * (lesscss.org) too many more to list here * build-time only

16 React? Node? Wut? React: a modern, well maintained component framework JSX: familiar syntax that aids React development Node ecosystem has tools to expedite front-end development Babel: transpile JSX, ES7 -> ES5

17 MobX? Makes state management across the React tree easier to understand Automatically updates components when data is updated

18 js-modules, js-builder & js-extensions Creates bundles containing CommonJS modules js-modules built to load things from Jenkins js-builder is a gulp buld & plugin for Browserify to build js-modules compatible bundles with easy js-extensions is a plugin for js-builder that processes the jenkins-js-extensions.yaml

19 Building a plugin The basics

20 Quick starts Yeoman plugin generator-blueocean-usain Maven Archetype almost Copy/pasta Blue Ocean Executor Info Plugin

21 Project Structure Based on Maven: / / / /.mvn_exec_node - tells Maven to use maven-frontend-plugin package.json - node build info pom.xml - maven build src/main/js / jenkins-js-extension.yaml - defines extensions / src/main/less / extensions.less - defines css rules

22 pom.xml <project...> <parent> <groupid>org.jenkins-ci.plugins</groupid> <artifactid>plugin</artifactid> <version>2.30</version> </parent> <name>blue Ocean Executor Info</name> <artifactid>blueocean-executor-info-plugin</artifactid> <packaging>hpi</packaging>

23 pom.xml <properties> <blueocean.version>1.2.0</blueocean.version> </properties> <dependencies> <dependency> <groupid>io.jenkins.blueocean</groupid> <artifactid>blueocean</artifactid> <version>${blueocean.version}</version> </dependency>...

24 package.json { "name": "blueocean-pipeline-agent-info", "version": "0.0.0", "scripts": { "bundle:watch": "jjsbuilder --tasks bundle:watch", "mvnbuild": "jjsbuilder --tasks bundle", "mvntest": "jjsbuilder --tasks test" },...

25 package.json "devdependencies": { "@jenkins-cd/blueocean-core-js": " ", "@jenkins-cd/design-language": " ", "@jenkins-cd/js-builder": "0.0.59", "@jenkins-cd/js-extensions": "0.0.36",... }, "dependencies": { "@jenkins-cd/js-modules": "0.0.8", }

26 mvn hpi:run & npm run bundle:watch mvn install hpi:run - builds and runs the plugin npm run bundle:watch - recompile js & less while editing * Gotcha: extension changes won t update without restart

27 Debugging the UI Chrome developer tools are your friend! Sources transpiled - find unique strings console.log(<object>) js-logging

28 Plugin Overview

29 What do we want to do? Write a REST endpoint to provide some data Add a top-level link to a new page Add a simple page that provides access to the data Add something within an existing page Make the extension point live update Use modern ES6/7

30 Sample plugin: show executor info Provide API that returns executor status & metadata Add a link & page to display all computers & executors Add active executors to a pipeline list (branches grumble)

31 Constructing the plugin Back-end REST service

32 REST endpoint import hudson.extension; import io.jenkins.blueocean.rest.organizationroute; import io.jenkins.blueocean.rest.model.resource; import org.kohsuke.stapler.export.exported; public class Computers extends Resource implements OrganizationRoute {

33 REST public String geturlname() { return "computers"; public Link getlink() { return getorganization().getlink().rel(geturlname()); }

34 REST public ComputerInfo[] getcomputers() throws Exception { // some code here public String getdisplayname() { return computer.getdisplayname(); }

35 Provide configuration to the BO UI import public class ExecutorinfoPreloader extends PageStatePreloader { static boolean showexecutorinfo = // get sys property public String getstatepropertypath() { return "executor"; } public String getstatejson() { return "{showinfo:" + showexecutorinfo + "}"; } }

36 Provide configuration to the BO UI // In JenkinsScript: import { blueocean } from '@jenkins-cd/blueocean-core-js/dist/js/scopes'; blueocean.executor.showinfo

37 Constructing the plugin Front-end extensions

38 Modern Javascript: Babel Add.babelrc { "presets": ["es2015", "stage-0", "react"], "plugins": [ "transform-decorators-legacy" ] }

39 Find Extension Points Well maintained extension list: git clone cd blueocean-plugin grep -r "extensionpoint=" $(find. -maxdepth 2 -name src)

40 jenkins-js-extension.yaml # Extensions in this plugin extensions: - component: Routes extensionpoint: jenkins.main.routes - component: TopLink extensionpoint: jenkins.blueocean.top.links...

41 Routes.jsx import { Route } from 'react-router'; import { ExecutorInfoPage } from './ExecutorInfoPage'; export default ( <Route path="/organizations/:organization/executor-info" component={executorinfopage} /> );

42 TopLink.jsx import React from 'react'; // Need in all JSX files import { Link } from 'react-router'; // Links to a Route import { AppConfig } from '@jenkins-cd/blueocean-core-js'; export default () => <Link to={`/organizations/${appconfig.getorganizationname()}/executor-i nfo`} title="executor Information">Executors</Link>;

43 ExecutorInfoService.js import { observable, action } from 'mobx'; import { Fetch, UrlConfig, AppConfig, sseconnection } from '@jenkins-cd/blueocean-core-js'; export class ExecutorInfoService // makes this property managed by MobX setcomputers(computers) { this.computers = computers;

44 ExecutorInfoService.js import { Fetch, UrlConfig, AppConfig, sseconnection } from '@jenkins-cd/blueocean-core-js'; constructor() { this.fetchexecutorinfo(); sseconnection.subscribe('pipeline', event => { switch (event.jenkins_event) { case 'pipeline_block_start': case 'pipeline_block_end': { this.fetchexecutorinfo(); }

45 ExecutorInfoService.js import { Fetch, UrlConfig, AppConfig, sseconnection } from '@jenkins-cd/blueocean-core-js'; fetchexecutorinfo() { Fetch.fetchJSON(`${UrlConfig.getRestBaseURL()}/organizations/${Ap pconfig.getorganizationname()}/computers/`).then(response => { this.setcomputers(response.computers); }); }

46 ExecutorInfoService.js // Export an instance to be shared so sseconnection.subscribe // not called multiple times export default new ExecutorInfoService();

47 ExecutorInfoPage.jsx import { observer } from // MobX magic automatically re-render for observable export class ExecutorInfoPage extends React.Component { render() { return ( <JTable columns={columns} classname="executor-info-table"> <TableHeaderRow />...

48 ExecutorInfoPage.jsx import executorinfoservice from './ExecutorInfoService';... render() {... {executorinfoservice.computers && // important pattern or errors executorinfoservice.computers.map(computer => [ <TableRow>...

49 Defining Extension Points

50 Defining Extension Points Extensions object from js-extensions Extensions.Renderer renders all React component extensions extensionpoint property optional filter attribute for various things like ordinals all other properties passed through to the extensions

51 Defining Extension Points import Extensions from render() {... <Extensions.Renderer extensionpoint="jenkins.pipeline.run.list.display" filter={sortbyordinal} run={branch} // passed to the extensions

52 Demo

53 Future Improvements * In the pipeline * subject to change

54 Improvements Finding ExtensionPoints Allow developers to run in a developmentmode UI hints/info where UI extension points are Generate documentation from source

55 Improvements Defining Extensions Remove jenkins-js-extensions.yaml Provide decorators Allow more strongly typed extension points & inheritence Investigating providing TypeScript interface files

56 Improved Code Sharing Allow plugins to export arbitrary javascript objects Allow plugins to import from other plugins without npm

57 Questions?

58 Resources github.com/jenkinsci/blueocean-plugin github.com/kzantow/blueocean-executor-info-plugin

59

Full Stack Developer with Java

Full Stack Developer with Java Full Stack Developer with Java Full Stack Developer (Java) MVC, Databases and ORMs, API Backend Frontend Fundamentals - HTML, CSS, JS Unit Testing Advanced Full Stack Developer (Java) UML, Distributed

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

Jenkins 2 UX Improvements. Keith Zantow Software Engineer, CloudBees, Inc.

Jenkins 2 UX Improvements. Keith Zantow Software Engineer, CloudBees, Inc. Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees, Inc. User Experience Jenkins 1 UX Useful plugins Example: CVS Configuration experience Aging technologies A few pages to configure the

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

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

Getting Started with ReactJS

Getting Started with ReactJS Getting Started with ReactJS By Juned Laliwala About this ReactJS e-book. Basic Understanding of ReactJS Concept of JSX Use of Refs and Keys Practical Demonstrations Animation in ReactJS @2016 Attune World

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

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

Templates and Databinding. SWE 432, Fall 2017 Design and Implementation of Software for the Web

Templates and Databinding. SWE 432, Fall 2017 Design and Implementation of Software for the Web Templates and Databinding SWE 432, Fall 2017 Design and Implementation of Software for the Web Today What are templates? What are frontend components? How can I use these with React? 2 What s wrong with

More information

vrealize Code Stream Plug-In SDK Development Guide

vrealize Code Stream Plug-In SDK Development Guide vrealize Code Stream Plug-In SDK Development Guide vrealize Code Stream 2.2 This document supports the version of each product listed and supports all subsequent versions until the document is replaced

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

AEM React. History. 1 Introduction. AEM components written in React. Why React and AEM? Features. Projects. date author message changed chapters

AEM React. History. 1 Introduction. AEM components written in React. Why React and AEM? Features. Projects. date author message changed chapters AEM React AEM components written in React History date author message changed chapters 21.3.17 stefan meyer fixed typescript source code in documentation /Getting Started/First component /Development Guide/ResourceComponent

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

Tools. SWE 432, Fall Design and Implementation of Software for the Web

Tools. SWE 432, Fall Design and Implementation of Software for the Web Tools SWE 432, Fall 2016 Design and Implementation of Software for the Web Today Before we can really make anything, there s a bunch of technical stuff to get out of the way Tools make our lives so much

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

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

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

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

Webpack. What is Webpack? APPENDIX A. n n n

Webpack. What is Webpack? APPENDIX A. n n n APPENDIX A n n n Webpack Although Webpack is used throughout the book, the primary focus of the book is on React, so Webpack didn t get a comprehensive treatment. In this Appendix, you will have the chance

More information

Selenium Testing Course Content

Selenium Testing Course Content Selenium Testing Course Content Introduction What is automation testing? What is the use of automation testing? What we need to Automate? What is Selenium? Advantages of Selenium What is the difference

More information

A JavaScript Framework for Presentations and Animations on Computer Science

A JavaScript Framework for Presentations and Animations on Computer Science A JavaScript Framework for Presentations and Animations on Computer Science Laszlo Korte Bachelor Thesis Technical Aspects of Multimodal Systems Department of Informatics University of Hamburg 1 / 76 Outline

More information

An Introduction to Eclipse Che Lets build a custom cloud IDE. October 2015 Tyler Jewell, Eclipse Che Project

An Introduction to Eclipse Che Lets build a custom cloud IDE. October 2015 Tyler Jewell, Eclipse Che Project An Introduction to Eclipse Che Lets build a custom cloud IDE October 2015 Tyler Jewell, Eclipse Che Project Lead @TylerJewell Goal Let anyone contribute to any project anywhere at any time. no pre-installation

More information

Drew Skwiers-Koballa. Azure Data Studio Extension Development

Drew Skwiers-Koballa. Azure Data Studio Extension Development Drew Skwiers-Koballa Azure Data Studio Extension Development Hi Drew Skwiers-Koballa @sysadmindrew www.github.com/dzsquared Developer in the Microsoft ecosystem for 8 years, including SQL Server Introverted

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

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

WebStorm, intelligent IDE for JavaScript development

WebStorm, intelligent IDE for JavaScript development , intelligent IDE for JavaScript development JetBrains is a powerful Integrated development environment (IDE) built specifically for JavaScript developers. How does match up against competing tools? Product

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

ReactJS and Webpack for Rails

ReactJS and Webpack for Rails Modern Web Conf 2015 ReactJS and Webpack for Rails Tse-Ching Ho 2015-05-16 @tsechingho 何澤清 紅寶 石商 人 Rubiest 鐵道 工 人 Rails worker 黃碼科技創辦 人 Goldenio founder 生物資訊 Bioinformatics 資料視覺化 Infographics Javascript

More information

Introduction to the SharePoint Framework Bob German Principal Architect - BlueMetal. An Insight company

Introduction to the SharePoint Framework Bob German Principal Architect - BlueMetal. An Insight company Introduction to the SharePoint Framework Bob German Principal Architect - BlueMetal An Insight company Bob German Bob is a Principal Architect at BlueMetal, where he leads Office 365 and SharePoint development

More information

Welcome. Quick Introductions

Welcome. Quick Introductions AEK Introduction Welcome Quick Introductions "The AEK"? Application Extension Kit Technique for delivering cross-platform application screens via a webview A development framework that provides a responsive

More information

React & Redux in Hulu. (Morgan Cheng)

React & Redux in Hulu. (Morgan Cheng) React & Redux in Hulu (Morgan Cheng) About Me @morgancheng About Hulu Challenges System Complexity Legacy code in jquery & Backbone UI non-predictable Lack of component isolation Performance Bottleneck

More information

Vue.js Developer friendly, Fast and Versatile

Vue.js Developer friendly, Fast and Versatile .consulting.solutions.partnership Vue.js Developer friendly, Fast and Versatile Alexander Schwartz, Principal IT Consultant Javaland 2018 Brühl (DE) March 2018 Vue.js developer friendly, fast and versatile

More information

Learn Web Development CodersTrust Polska course outline. Hello CodersTrust! Unit 1. HTML Structuring the Web Prerequisites Learning pathway.

Learn Web Development CodersTrust Polska course outline. Hello CodersTrust! Unit 1. HTML Structuring the Web Prerequisites Learning pathway. Learn Web Development CodersTrust Polska course outline Hello CodersTrust! Syllabus Communication Publishing your work Course timeframe Kick off Unit 1 Getting started with the Web Installing basic software

More information

DrupalCon Barcelona Preston So September 22, 2015

DrupalCon Barcelona Preston So September 22, 2015 DrupalCon Barcelona 2015 Preston So September 22, 2015 Preston So (@prestonso) has designed websites since 2001 and built them in Drupal since 2007. He is Development Manager of Acquia Labs at Acquia and

More information

Front End Nanodegree Syllabus

Front End Nanodegree Syllabus Front End Nanodegree Syllabus Build Stunning User Experiences Before You Start You've taken the first step toward becoming a web developer by choosing the Front End Nanodegree program. In order to succeed,

More information

An Automatic Internationalization and Localization Mechanism for Web Applications

An Automatic Internationalization and Localization Mechanism for Web Applications An Automatic Internationalization and Localization Mechanism for Web Applications Che-Jen Chang, (Wei-Chen Liao, Kai-Wei Kuo, Hsiao-Lin Peng, Chia-Chen Chu) Telecom Laboratory Chunghwa Telecom Co. Ltd.

More information

Building a (resumable and extensible) DSL with Apache Groovy Jesse Glick CloudBees, Inc.

Building a (resumable and extensible) DSL with Apache Groovy Jesse Glick CloudBees, Inc. Building a (resumable and extensible) DSL with Apache Groovy Jesse Glick CloudBees, Inc. Introduction About Me Longtime Jenkins core contributor Primary developer on Jenkins Pipeline Meet Jenkins Pipeline

More information

django-baton Documentation

django-baton Documentation django-baton Documentation Release 1.0.7 abidibo Nov 13, 2017 Contents 1 Features 3 2 Getting started 5 2.1 Installation................................................ 5 2.2 Configuration...............................................

More information

Continuous Integration INRIA

Continuous Integration INRIA Vincent Rouvreau - https://sed.saclay.inria.fr February 28, 2017 Contents 1 Preamble To go through this exercise, you will need to install : 1. Git (sudo apt-get install git sudo yum install git) 2. A

More information

20480C: Programming in HTML5 with JavaScript and CSS3. Course Code: 20480C; Duration: 5 days; Instructor-led. JavaScript code.

20480C: Programming in HTML5 with JavaScript and CSS3. Course Code: 20480C; Duration: 5 days; Instructor-led. JavaScript code. 20480C: Programming in HTML5 with JavaScript and CSS3 Course Code: 20480C; Duration: 5 days; Instructor-led WHAT YOU WILL LEARN This course provides an introduction to HTML5, CSS3, and JavaScript. This

More information

Getting started with Tabris.js Tutorial Ebook

Getting started with Tabris.js Tutorial Ebook Getting started with Tabris.js 2.3.0 Tutorial Ebook Table of contents Introduction...3 1 Get started...4 2 Tabris.js in action...5 2.1 Try the examples...5 2.2 Play with the examples...7 2.3 Write your

More information

Presented by. Dheepa Iyer Managing Consultant. Commissioned for. Reston SharePoint User Group. SharePoint Framework. May 2017

Presented by. Dheepa Iyer Managing Consultant. Commissioned for. Reston SharePoint User Group. SharePoint Framework. May 2017 Presented by Dheepa Iyer Managing Consultant Commissioned for Reston SharePoint User Group SharePoint Framework May 2017 About Me Dheepa Iyer Managing Consultant, Washington DC Metro, XGILITY Personal

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

6 JAVASCRIPT PROJECTS

6 JAVASCRIPT PROJECTS 6 JAVASCRIPT PROJECTS COMPLETE PROJECT TUTORIALS ii 6 JavaScript Projects 6 JavaScript Projects Copyright 2018 SitePoint Pty. Ltd. Product Manager: Simon Mackie English Editor: Ralph Mason Project Editor:

More information

Extensible Components with Sling Models and HTL

Extensible Components with Sling Models and HTL APACHE SLING & FRIENDS TECH MEETUP BERLIN, 25-27 SEPTEMBER 2017 Extensible Components with Sling Models and HTL Vlad Băilescu & Burkhard Pauli, Adobe About us: ref-squad 2 Agenda WCM Components in AEM

More information

Catbook Workshop: Intro to NodeJS. Monde Duinkharjav

Catbook Workshop: Intro to NodeJS. Monde Duinkharjav Catbook Workshop: Intro to NodeJS Monde Duinkharjav What is NodeJS? NodeJS is... A Javascript RUNTIME ENGINE NOT a framework NOT Javascript nor a JS package It is a method for running your code in Javascript.

More information

React + React Native. Based on material by Danilo Filgueira

React + React Native. Based on material by Danilo Filgueira React + React Native Based on material by Danilo Filgueira Prerequisites JS and ES6 HTML and CSS NPM/YARN and NODE React A Javascript library for creating reactive and composable UI components Whenever

More information

Front End. Presentation Layer. UI (User Interface) User <==> Data access layer

Front End. Presentation Layer. UI (User Interface) User <==> Data access layer Angular 2 S1ngS1ng Front End UI (User Interface) User Data access layer Presentation Layer Architecture Conventional VS SPA Angular 1 Framework! Framework! Framework! MVVM (MV*) Modulization Two-way

More information

Modern frontend workflows in Liferay Portal and Liferay DXP. Iván Zaera Avellon, Liferay Chema Balsas, Liferay Pier Paolo Ramon, SMC

Modern frontend workflows in Liferay Portal and Liferay DXP. Iván Zaera Avellon, Liferay Chema Balsas, Liferay Pier Paolo Ramon, SMC Modern frontend workflows in Liferay Portal and Liferay DXP Iván Zaera Avellon, Liferay Chema Balsas, Liferay Pier Paolo Ramon, SMC https://www.youtube.com/watch?v=zcdwd4scz6i https://www.youtube.com/watch?v=8zfvppif-sm

More information

npm install [<name> [<name>...]] [--save --save-dev --save-optional]

npm install [<name> [<name>...]] [--save --save-dev --save-optional] Node Package Manager by Jesse Warden http://www.jessewarden.com v1 npm ls Everything you have installed in the current directory. npm search [search terms] Search the registry for packages matching the

More information

CodeHub. Curran Kelleher 8/18/2012

CodeHub. Curran Kelleher 8/18/2012 CodeHub Curran Kelleher 8/18/2012 Programming is Overly Complex Development environment setup Revision control management Dependency management Deployment = time and effort learning tools, not writing

More information

RequireJS Javascript Modules for the Browser. By Ben Keith Quoin, Inc.

RequireJS Javascript Modules for the Browser. By Ben Keith Quoin, Inc. RequireJS Javascript Modules for the Browser By Ben Keith Quoin, Inc. Traditional Browser JS One global namespace Often inline JS code embedded directly in HTML Many tags with hidden ordering

More information

Index. Elad Elrom 2016 E. Elrom, Pro MEAN Stack Development, DOI /

Index. Elad Elrom 2016 E. Elrom, Pro MEAN Stack Development, DOI / Index A Accessible Rich Internet Applications (ARIA), 101 Amazon AWS, 44 Amazon EC2, 28 Amazon s Relational Database Service (RDS), 28 Amazon Web Services (AWS) cloud, 28 Android SDK Manager, 272 Android

More information

JavaScript Rd2. -Kyle Simpson, You Don t Know JS

JavaScript Rd2. -Kyle Simpson, You Don t Know JS JavaScript Rd2 [JavaScript] is simultaneously a simple, easy-to-use language that has broad appeal, and a complex and nuanced collection of language mechanics which without careful study will elude the

More information

Brunch Documentation. Release Brunch team

Brunch Documentation. Release Brunch team Brunch Documentation Release 1.2.2 Brunch team June 22, 2012 CONTENTS i ii Contents: CONTENTS 1 2 CONTENTS CHAPTER ONE FAQ 1.1 I want to start new project with Brunch. What s the workflow? Create new

More information

MOdern Java(Script) Server Stack

MOdern Java(Script) Server Stack MOdern Java(Script) Server Stack Pratik Patel Pratik Patel CTO Triplingo JAVA CHAMPION PRESIDENT ATLANTA JUG POLYGLOT apple mac vintage 5" screen TURTLE MY FIRST PROGRAM TURING MY FIRST REAL PROGRAM JAVASCRIPT

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

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

Red Hat Developer Studio 12.0

Red Hat Developer Studio 12.0 Red Hat Developer Studio 12.0 Getting Started with Developer Studio Tools Introduction to Using Red Hat Developer Studio Tools Last Updated: 2018-07-16 Red Hat Developer Studio 12.0 Getting Started with

More information

Web Performance in

Web Performance in Web Performance in 2017 with @bighappyface Big thanks to DrupalCon Team Big thanks to you (it s almost a wrap) Please note This session assumes familiarity. I am speaking as if folks are already into this

More information

The Actual Real World at EclipseCon/ALM

The Actual Real World at EclipseCon/ALM Tycho The Actual Real World at EclipseCon/ALM Raise your Hand if you are Sure Addressing the Issues Real World: Tycho Issues World Wide Distributed Teams India, China, Europe, Argentina, United States

More information

Packaging, automation, Continuous Integration

Packaging, automation, Continuous Integration LP IDSE - GL Packaging, automation, Continuous Integration Based on Simon Urli and Sébastien Mosser courses 18/10/2016 Cécile Camillieri/Clément Duffau 1 Previously. 2 Development process Develop features

More information

Overview of BC Learning Network SMS2 Introduction

Overview of BC Learning Network SMS2 Introduction Overview of BC Learning Network SMS2 Introduction This guide is designed to be a cumulative overview of the SMS2 web application. SMS2 is a student management system which integrates with Moodle, a learning

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

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

django-baton Documentation

django-baton Documentation django-baton Documentation Release 1.3.1 abidibo Nov 05, 2018 Contents 1 Features 3 2 Getting started 5 2.1 Installation................................................ 5 2.2 Configuration...............................................

More information

Catbook Workshop 1: Client Side JS. Danny Tang

Catbook Workshop 1: Client Side JS. Danny Tang Catbook Workshop 1: Client Side JS Danny Tang Previously... Some frontend - Profile page - Nav bar - Stories feed page Techniques - DOM manipulation with JS In this workshop... More frontend - Stories

More information

Introduction: Manual Testing :

Introduction: Manual Testing : : What is Automation Testing? Use of Automation. Where do we use. Tools that Do Automation. Web Applications vs Standalone Applications. What is selenium? How selenium works. Manual Testing : HTML: Detailed

More information

6 th October 2018 Milan

6 th October 2018 Milan 6 th October 2018 Milan Mastering Office 365 development with SharePoint Framework Elio Struyf, Valo Intranet Paolo Pialorsi, PiaSys.com Elio Struyf Developer & Architect @eliostruyf www.eliostruyf.com

More information

INF Introduction. Knut Staring gmail}

INF Introduction. Knut Staring gmail} INF5750 - Introduction Knut Staring knutst@{ifi, gmail} Lecture 1 - overview Background to the course Content and expectations Assignments and group work Maven build system Revision control system Object-Relational

More information

Cisco Spark Widgets Technical drill down

Cisco Spark Widgets Technical drill down DEVNET-1891 Cisco Spark Widgets Technical drill down Adam Weeks, Engineer @CiscoSparkDev Stève Sfartz, API Evangelist @CiscoDevNet Cisco Spark How Questions? Use Cisco Spark to communicate with the speaker

More information

Hacking with React. Get started with React, React Router, Jest, Webpack, ES6 and more with this hands-on guide. Paul Hudson.

Hacking with React. Get started with React, React Router, Jest, Webpack, ES6 and more with this hands-on guide. Paul Hudson. Hacking with React Get started with React, React Router, Jest, Webpack, ES6 and more with this hands-on guide. Paul Hudson 2016 Paul Hudson This book is dedicated to my wife, who has been endlessly patient

More information

IN4MATX 133: User Interface Software

IN4MATX 133: User Interface Software IN4MATX 133: User Interface Software Lecture 7: Package Management & TypeScript Professor Daniel A. Epstein TA Jamshir Goorabian TA Simion Padurean 1 A1 Make sure you Push as well as Committing! Need to

More information

Cordova - Guide - Custom Plugins

Cordova - Guide - Custom Plugins Cordova - Guide - Custom Plugins Dr Nick Hayward A brief overview of custom plugin development for Cordova. Contents intro structure and design architecture - Android architecture - cross-platform Plugman

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

THE PRAGMATIC INTRO TO REACT. Clayton Anderson thebhwgroup.com WEB AND MOBILE APP DEVELOPMENT AUSTIN, TX

THE PRAGMATIC INTRO TO REACT. Clayton Anderson thebhwgroup.com WEB AND MOBILE APP DEVELOPMENT AUSTIN, TX THE PRAGMATIC INTRO TO REACT Clayton Anderson thebhwgroup.com WEB AND MOBILE APP DEVELOPMENT AUSTIN, TX REACT "A JavaScript library for building user interfaces" But first... HOW WE GOT HERE OR: A BRIEF

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

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

Red Hat JBoss Developer Studio 11.3

Red Hat JBoss Developer Studio 11.3 Red Hat JBoss Developer Studio 11.3 Getting Started with JBoss Developer Studio Tools Introduction to Using Red Hat JBoss Developer Studio Tools Last Updated: 2018-06-08 Red Hat JBoss Developer Studio

More information

Writing your first Web Data Connector

Writing your first Web Data Connector Welcome # T C 1 8 Writing your first Web Data Connector Brett Taylor Staff Software Engineer Tableau Ashwin Sekar Software Engineer Tableau Enabling Integrations for Developers Embedded Analytics Integrations

More information

JavaScript Frameworks

JavaScript Frameworks JavaScript Frameworks A Comparison Of Titans Philip Esmailzade philipesmailzade@gmail.com Faculty of Computing Blekinge Institute of Technology SE-371 79 Karlskrona Sweden ABSTRACT There are several JavaScript

More information

JavaScript and MVC Frameworks FRONT-END ENGINEERING

JavaScript and MVC Frameworks FRONT-END ENGINEERING FRONT-END ENGINEERING Introduction & History Introduction JavaScript is an incredible language to learn for anyone interested in getting into programming. It is the only programing language that can run

More information

What is Maven? Apache Maven is a software project management and comprehension tool (build, test, packaging, reporting, site, deploy).

What is Maven? Apache Maven is a software project management and comprehension tool (build, test, packaging, reporting, site, deploy). Plan What is Maven? Links : mvn command line tool POM : 1 pom.xml = 1 artifact POM POM Inheritance Standard Directory Layout Demo on JMMC projects Plugins Conclusion What is Maven? Apache Maven is a software

More information

30 th September 2017 Milan

30 th September 2017 Milan 30 th September 2017 Milan SharePoint Framework tips & tricks Giuseppe Marchi, Dev4Side S.r.l. www.peppedotnet.it www.office365italia.com Hi, my name is Peppe! Co-founder of Dev4Side S.r.l. 8 years Microsoft

More information

Maven Introduction to Concepts: POM, Dependencies, Plugins, Phases

Maven Introduction to Concepts: POM, Dependencies, Plugins, Phases arnaud.nauwynck@gmail.com Maven Introduction to Concepts: POM, Dependencies, Plugins, Phases This document: http://arnaud-nauwynck.github.io/docs/maven-intro-concepts.pdf 31 M!! What is Maven? https://maven.apache.org/

More information

5th April Installation Manual. Department of Computing and Networking Software Development Degree

5th April Installation Manual. Department of Computing and Networking Software Development Degree 5th April 2017 Installation Manual Department of Computing and Networking Software Development Degree Project name: Student: Student Number: Supervisor: MaaP (Message as a Platform) Chihabeddine Ahmed

More information

Moving From Studio to Atelier. Wouter Dupré Sales Engineer

Moving From Studio to Atelier. Wouter Dupré Sales Engineer Moving From Studio to Atelier Wouter Dupré Sales Engineer Before we start the journey Introduction Atelier: What is it? Atelier is a modern IDE for applications developers Implemented as a plug-in to Eclipse

More information

Front End Nanodegree Syllabus

Front End Nanodegree Syllabus Front End Nanodegree Syllabus Build Stunning User Experiences Before You Start You've taken the first step toward becoming a web developer by choosing the Front End Nanodegree program. In order to succeed,

More information

JavaScript Fundamentals_

JavaScript Fundamentals_ JavaScript Fundamentals_ HackerYou Course Syllabus CLASS 1 Intro to JavaScript Welcome to JavaScript Fundamentals! Today we ll go over what programming languages are, JavaScript syntax, variables, and

More information

APACHE SLING & FRIENDS TECH MEETUP SEPTEMBER Integrating a Modern Frontend Setup with AEM Natalia Venditto, Netcentric

APACHE SLING & FRIENDS TECH MEETUP SEPTEMBER Integrating a Modern Frontend Setup with AEM Natalia Venditto, Netcentric APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 Integrating a Modern Frontend Setup with AEM Natalia Venditto, Netcentric A modern frontend setup 2 How do we understand a modern setup? A modern

More information

React Loadable: Code Splitting with Server Side Rendering

React Loadable: Code Splitting with Server Side Rendering React Loadable: Code Splitting with Server Side Rendering About me Former Senior Frontend Developer at Oppex Tech Lead at Toughbyte Ltd React github.com/northerneyes medium.com/@northerneyes twitter.com/nordfinn

More information

UNIT -II. Language-History and Versions Introduction JavaScript in Perspective-

UNIT -II. Language-History and Versions Introduction JavaScript in Perspective- UNIT -II Style Sheets: CSS-Introduction to Cascading Style Sheets-Features- Core Syntax-Style Sheets and HTML Style Rle Cascading and Inheritance-Text Properties-Box Model Normal Flow Box Layout- Beyond

More information

widgetjs Documentation

widgetjs Documentation widgetjs Documentation Release 1.2.3 Nicolas Vanhoren Dec 22, 2017 Contents 1 Tutorial 3 1.1 Presentation of widgetjs......................................... 3 1.2 Quickstart................................................

More information

LeanJS Documentation. Release Romain Dorgueil

LeanJS Documentation. Release Romain Dorgueil LeanJS Documentation Release 1.0.0 Romain Dorgueil December 26, 2016 Contents 1 Goals 3 2 Quick start 5 3 Documentation 7 3.1 LeanJS.................................................. 7 3.2 Getting started..............................................

More information

EnterSpace Data Sheet

EnterSpace Data Sheet EnterSpace 7.0.4.3 Data Sheet ENTERSPACE BUNDLE COMPONENTS Policy Engine The policy engine is the heart of EnterSpace. It evaluates digital access control policies and makes dynamic, real-time decisions

More information

Quick Desktop Application Development Using Electron

Quick Desktop Application Development Using Electron Quick Desktop Application Development Using Electron Copyright Blurb All rights reserved. No part of this book may be reproduced in any form or by any electronic or mechanical means including information

More information

Guides SDL Server Documentation Document current as of 04/06/ :35 PM.

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

More information

Nick Senger & Jesse van den Kieboom

Nick Senger & Jesse van den Kieboom Using TypeScript with the ArcGIS API for JavaScript Nick Senger & Jesse van den Kieboom Live version of this presentation is available on: https://jkieboom.github.io/devsummit-palm-springs-2018/presentations/typescript-arcgis-js-api

More information

Webpack 2 The last bundler you would need in Vijay Dharap, Principal Architect, Infosys

Webpack 2 The last bundler you would need in Vijay Dharap, Principal Architect, Infosys Webpack 2 The last bundler you would need in 2017 Vijay Dharap, Principal Architect, Infosys Speaker Bio 14+ Years of experience Principal Architect in Infosys Passionate about delightful UX Open Source

More information

MARIA KERN NETZ98 GMBH MAGENTO 2 UI COMPONENTS THE JS PART

MARIA KERN NETZ98 GMBH MAGENTO 2 UI COMPONENTS THE JS PART MARIA KERN NETZ98 GMBH MAGENTO 2 UI COMPONENTS THE JS PART Magento 2 UI Components The JS part Maria Kern Senior Frontend Architect at netz98 GmbH www.netz98.de @maja_kern CommerceHero: maria-kern AGENDA

More information