java script nirvana in netbeans [con5679]
TRANSCRIPT
JAVASCRIPT NIRVANA IN NETBEANSRyan Cuprak
AboutRyan Cuprak
• @ctjava• [email protected]• http://www.cuprak.info• https://www.linkedin.com/in/rcuprak
Notepad?
JavaScript IDEs• NetBeans 8.1+• WebStorm• VisualStudio 2013+• Sublime Text• Eclipse (with JSDT)• Komodo
Free
$99
Why NetBeans?
• Intuitive
• Integrated
• Adaptable
• Full Stack
• Powerful
NetBeans 8.2 FeaturesNatively supports HTML5 projects.
• CSS3, HTML5, ECMAScript 6, etc.• Support for HTML5 JavaScript libraries.
Features• Syntax highlighting, auto-completion, code folding, etc.• Full-fledged debugger
• Breakpoints on DOM, line, event, and XMLHttpRequests.• Callstack, variables, watches
• JavaScript unit testing support• Grunt Support• SASS/LESS Support• Apache Cordova (mobile HTML5 development)
CONFIGURATIONJavaScript Dependencies
NetBeans Configuration1. Install Node.js2. Install SASS
• Install Ruby 2.2.X• gem install sass
3. Install Chrome Pluginhttp://tinyurl.com/jjcorgm
Chrome Plugin
Tool Configurations
Looks in default locations
Key BindingsDon’t want to re-learn keyboard shortcuts?
PROJECTS TYPESGetting Started
NetBeans & Projects
Open Projects
Project Types
Key questions:1. What JavaScript technology stack?2. Are you starting fresh or with existing sources?
HTML5 Application Templates
ToolsTool Descriptionpackage.json Project dependencies, meta-data, used by npm.
bower.json Manages front-end components like HTML, css, js.
Gruntfile.js JavaScript task runner tool.
gulpfile.js JavaScript task runner tool.
HTML5 Application ExampleAngular Seed Template
Node.js Application
HTML5 + Node.js Application
Example Projects
File TemplatesCategory File TypesHTML5/JavaScript HTML File, JavaScript File, Cascading Style Sheet,
Sass File, Less file, JSON File, react.js, Jade File, package.json, Gruntfile.js, gulpfile.js, bower.json, .bowerrc, Empty JET module, Knockout JET Module
Selenium Tests Protractor Configuration File, Selenium Mocha Test Case, Selenium Jasmine Test Case
Unit Tests Karma Configuration File, jsTestDrive Configuration File
Web Services RESTful JavaScript Client
Custom editor provided for each project type.
EDITOR FEATURES
Syntax and Semantic Highlighting
ECMAScript 6
Navigation
JavaScript Parser
Code Completion
JavaScript Debugging
DOM Debugging
CSS Editing
Popup for adding new properties
LESS Support: New FileFile -> New File
LESS Support: Editor + CSS Generation
Generated CSS
Customizable Palette
• Drag HTML elements from Palette into HTML Window (Wizard appears)
• Drag selections from HTML document to Palette to create new HTML snippets.
Embedded Web Server
Web Server for testing
Managing JavaScript Dependencies
Three different approaches:• npm – Node Package Manager• Bower • CDNJS
Adding JavaScript Libraries (Bower)
https://bower.io/
Adding JavaScript Libraries (Continued…)
Downloads Library
Adding JavaScript Libraries (Continued…)
Insert Library
Drag library into target folder.
GRUNT & GULPBuild Script Automation
Gulp / Grunt• Gulp and Grunt are both task runners (think Ant)• Grunt uses a configuration based approach• Gulp uses streams from Node• Common tasks:
• Compile SASS/Less to CSS• Run JSLint• Minify JavaScript/CSS files
Gulp: Hello World
Gulp: Hello World
Gulp: Configuring IDE Actions
Grunt: Example
Install via npm
Grunt: Install Dependencies
RequireJS
Maps module names to local paths for testing.
NODE.JSServerside JavaScript
What is Node.js?
Node.js is a platform built onChrome’s JavaScript runtime for easily building fast and scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.
Node.js Runtime• V8 JavaScript Engine is an open source JavaScript
engine developed by Google for the Chrome web browser.
• V8 compiles JavaScript to native machine code (IA-32, x86-64, ARM, etc.) before executing it.
Node.js + Express.js
Template Engines• JADE <- supported natively by NetBeans• EJS• Handlebars• Hogan.js
Node.js Express.js Template Engine
NetBeans & Node.js• Fully integrated support for Node.js• Project wizard for creating new projects• Express generator is integrated• Project specific Node.js settings
Demo
UNIT TESTING
Unit TestingSupported Unit Testing frameworks:• Karma• JS Test Driver• MochaDemo• 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
(Chrome/FireFox/etc.)
Karma Configuration & SetupInstalling Karma for a project (from within project directory):• npm install karma --save-dev• npm install karma-jasmine karma-chrome-launcher --
save-dev
Karma Configuration & Setup
1
23
Create Karma Configuration
Karma Configuration
Karma Configuration
Karma Configuration & Setup
Karma: Test Run
Example Unit Test
CORDOVA
Introducing Cordova• Originally named PhoneGap.• Mobile development framework• Development started in 2009.• Wraps HTML5 applications in a native
wrapper.• Purchased by Adobe in 2011.• Code donated to Apache as Apache Cordova.
• PhoneGap built on Cordova
• Adobe provides cloud build system for PhoneGap.
CordovaPlatform SDK
• Certificates to test on devices ($$)
Ant (ant.apache.org)NodeJS (nodejs.org)
• Install Apache Cordova (cordova.apache.org)
ChromeJava 8 (java.oracle.com)NetBeans 8.0.1 (netbeans.org)What might we want to install? Maven (maven.apache.org)
Karma (karma-runner.github.io)Jasmine (jasmine.github.io)Grunt (gruntjs.com)
Cordova Platform Tools and SDKsiOS (xCode)
Apple App Store – search for XCode
Android (Android Studio)https://developer.android.com/tools/index.html
Windows Phonehttp://dev.windows.com/en-us/develop/downloads
Tizenhttps://developer.tizen.org/downloads/tizen-sdk
BlackBerryhttp://developer.blackberry.com
iOS Setup
Apache Cordova SetupInstalling Cordova:
• Mac/Linux: sudo npm install –g cordova• Windows: npm install –g cordova
Adding Platforms:• cordova platform add ios• cordova platform add amazon-fireos• cordova platform add android• cordova platform add blackberry10• cordova platform add firefoxos
Creating a project (without NetBeans)• cordova create hello com.example.hello HelloWorld
Apache CordovaCordova is an HTML Project
• Start with Cordova Project• Start with HTML5 and add Cordova
Cordova Project Creation
Project Layout
Web assets go here: html files, js files, etc
Apache Cordova – index.html
Apache Cordova – index.js
Run Target
Q&A
Best JavaScript IDE!