Node.js Development with Apache NetBeans

Node.js Development with

Apache NetBeansRyan Cuprak

AboutTwitter: @ctjava

Email: rcuprak@gmail.com / r5k@3ds.com

Blog: cuprak.info

Linkedin: www.linkedin.com/in/rcuprak

Why Apache NetBeans?

1. Sublime Test

2. Visual Studio Code

3. Brackets

4. Atom

5. Komodo Edit

6. Notepad++

7. BBEdit

8. TextMate

9. Emacs

10.Vim

https://goo.gl/MNyMMA

Beating Emacs

Problem: Only Java Developers know about NetBeans!

NetBeans MisconceptionsFollowing statements are NOT TRUE:

• JavaScript support is secondary

• JavaScript integration is just for Java web apps

• Projects must be created with NetBeans

• Projects must be refactored to use NetBeans

• NetBeans can’t deal with framework x and/or build tool y

etc.NOT TRUE

Agenda• Overview

• Setup

• Live Code Examples• Simple Node.js

• Node.js + Express

• Gulp Integration

• Angular & Webpack

• Unit Testing

• AWS Lambda Testing

Overview

JavaScript Features• Natively supports HTML5 projects.

• CSS3, HTML5, ECMAScript 6 & 7

• Support for HTML5 JavaScript libraries.

• Features

• Syntax highlighting, auto-completion, code folding, etc.

• Full-fledged debugger

• Breakpoints on DOM, line, event, and XMLHttpRequests.

• Call stack, variables, watches

• JavaScript unit testing

• Grunt Support

• SASS/LESS Support

• Apache Cordova (mobile HTML5 development)

Supported Frameworks

More…

Note: Integrated support for Oracle Jet

File TemplatesCategory File Types

HTML5/JavaScript HTML File, JavaScript File, CSS, Sass File, Less

file, JSON File, react.js, Jade File, package.json,

Gruntfile.js, gulpfile.js, bower.json, .bowerrc, JET

modules, Knockout JET Module

Selenium Tests Protractor Configuration File, Selenium Mocha Test

Case, Selenium Jasmine Test Case

Unit Tests Karma Configuration File, jsTestDrive Config File

Web Services RESTful JavaScript Client

Custom editor provided for each file type.

Project Templates

Code Completion

Code Analysis

CSS3 Editing

Popup for adding

new properties

LESS Support

Generated CSS

JavaScript Debugging + Chrome

DOM Debugging

Customizable Palette

• Drag HTML elements from Palette into HTML Window (Wizard appears)

• Drag selections from HTML document to Palette to create new HTML

snippets.

Dependency Management

Three different approaches:

• npm

• Bower

• CDNJS

Gulp Integration

Gulp Integration

Node.js Integration• Fully integrated support for Node.js

• Node.js project wizard

• Search/find Node modules

• Integrated support Express generator

• Project specific Node.js settings

Setup

NetBeans Setup

1. Install Node.js

2. Download Sources

3. Setup npm/express

Install Chrome Plugin

https://goo.gl/Jc9Tq4

Configure Runtime Environment

Select Browser to use for testing – project specific.

Note testing on connected

devices.

Angular / TypeScript Support

Download plugin: https://github.com/Everlaw/nbts/

Angular / TypeScript Support

Install via Plugin Manager

Deep Dive

Typical Workflow

npm init Edit package.json npm install

NetBeans performs these tasks for us.

Shell commands can be executed at any point

– not locked into the IDE.

Demos• Simple Node.js application & debugging

• Node.js + Express

• Gulp Demo

• Angular 4 Demo with TypeScript & Webpack

• https://github.com/angular/angular2-seed

Unit Testing

Unit Testing• Supported Unit Testing frameworks:

• Karma

• JS Test Driver

• Mocha

• Demo

• Jasmine – JavaScript unit testing framework

• Tests written in JavaScript

• Test synchronous and asychronous JavaScript code

• Karma – JavaScript test runner

• Based on NodeJS

• Launches and executes tests in web browser

Unit Testing Setup• For empty projects:

• Add dependencies in package.json

• Create karma.conf file

• Configure testing

• Implements tests

• For existing projects:• Open project properties and configure

Unit Testing Setup

AWS Lambda Testing

What is AWS Lambda?• Function as a Service (Faas) from AWS

• Stateless function that executes in the cloud

• Executes in response to events (S3, DynamoDB, API Gateway, etc)

• Can be implemented using• JavaScript (Node.js), Java, Python C#

• Billed on executions:• First million executions are free

• $0.20 per each million afterwards

Example Lambda Functionexports.handler = function(event,context) {

context.succeed('Hello ' + event.firstName + ' ' +

event.lastName + ' you are at JavaOne 2017!');

};

{

"firstName": "Ryan",

"lastName": "Cuprak”

}

Handler

Function

SAM – AWS Lambda Testing

https://github.com/awslabs/aws-sam-local

AWS Lambda & NetBeans• NetBeans can test AWS Lambda locally

• Prerequisites:• Install Docker

• Install SAM Local - npm install -g aws-sam-local

• Steps:1. Create a Node.js project in NetBeans

2. Add aws-sdk to project via npm

3. Implement function

4. Add yaml configuration file

5. Add scripts entry to launch SAM

AWS Lambda & NetBeansDebugging steps:

1. Start SAM in debug mode

2. Trigger event for invocation

3. Attach debugger

Q&ATwitter: @ctjava

Email: rcuprak@gmail.com / r5k@3ds.com

Blog: cuprak.info

Linkedin: www.linkedin.com/in/rcuprak

Slides: www.slideshare.net/rcuprak/presentations

Get involved! https://netbeans.apache.org !!