Download to read offline
Uploaded byRyan Cuprak
Java script nirvana in netbeans [con5679]
This document discusses using NetBeans as an IDE for JavaScript development. It provides an overview of NetBeans' features for JavaScript including syntax highlighting, code completion, debugging, support for frameworks like Angular and Node.js, and mobile development with Apache Cordova. It also demonstrates how to set up and configure NetBeans for common JavaScript tasks like adding libraries, using build tools like Grunt and Gulp, and setting up unit testing with Karma and Jasmine.
Java script nirvana in netbeans [con5679]
- 1.
- 2. About Ryan Cuprak • @ctjava •rcuprak@gmail.com • http://www.cuprak.info • https://www.linkedin.com/in/rcuprak
- 3.
- 4. JavaScript IDEs • NetBeans8.1+ • WebStorm • VisualStudio 2013+ • Sublime Text • Eclipse (with JSDT) • Komodo Free $99
- 5. Why NetBeans? • Intuitive •Integrated • Adaptable • Full Stack • Powerful
- 6. NetBeans 8.2 Features Nativelysupports 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)
- 7.
- 8. NetBeans Configuration 1. InstallNode.js 2. Install SASS • Install Ruby 2.2.X • gem install sass 3. Install Chrome Plugin http://tinyurl.com/jjcorgm
- 9.
- 10.
- 11. Key Bindings Don’t wantto re-learn keyboard shortcuts?
- 12.
- 13. NetBeans & Projects OpenProjects
- 14. Project Types Key questions: 1.What JavaScript technology stack? 2. Are you starting fresh or with existing sources?
- 15.
- 16. Tools Tool Description package.json Projectdependencies, 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.
- 17. HTML5 Application Example AngularSeed Template
- 18.
- 19. HTML5 + Node.jsApplication
- 20.
- 21. File Templates Category FileTypes HTML5/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.
- 22.
- 23. Syntax and SemanticHighlighting
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30. CSS Editing Popup foradding new properties
- 31. LESS Support: NewFile File -> New File
- 32. LESS Support: Editor+ CSS Generation Generated CSS
- 33. Customizable Palette • DragHTML elements from Palette into HTML Window (Wizard appears) • Drag selections from HTML document to Palette to create new HTML snippets.
- 34. Embedded Web Server WebServer for testing
- 35. Managing JavaScript Dependencies Threedifferent approaches: • npm – Node Package Manager • Bower • CDNJS
- 36. Adding JavaScript Libraries(Bower) https://bower.io/
- 37. Adding JavaScript Libraries(Continued…) Downloads Library
- 38. Adding JavaScript Libraries(Continued…)
- 39. Insert Library Drag libraryinto target folder.
- 40. GRUNT & GULP BuildScript Automation
- 41. 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
- 42.
- 43.
- 44. Gulp: Configuring IDEActions
- 45.
- 46.
- 47. RequireJS Maps module namesto local paths for testing.
- 48.
- 49. What is Node.js? Node.jsis 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.
- 50. Node.js Runtime • V8JavaScript 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.
- 51. Node.js + Express.js TemplateEngines • JADE <- supported natively by NetBeans • EJS • Handlebars • Hogan.js Node.js Express.js Template Engine
- 52. NetBeans & Node.js •Fully integrated support for Node.js • Project wizard for creating new projects • Express generator is integrated • Project specific Node.js settings
- 53.
- 54.
- 55. Unit Testing Supported UnitTesting 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 (Chrome/FireFox/etc.)
- 56. Karma Configuration &Setup Installing Karma for a project (from within project directory): • npm install karma --save-dev • npm install karma-jasmine karma-chrome-launcher -- save-dev
- 57. Karma Configuration &Setup 1 2 3
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65. Introducing Cordova • Originallynamed 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.
- 66. Cordova Platform SDK • Certificatesto test on devices ($$) Ant (ant.apache.org) NodeJS (nodejs.org) • Install Apache Cordova (cordova.apache.org) Chrome Java 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)
- 67. Cordova Platform Toolsand SDKs iOS (xCode) Apple App Store – search for XCode Android (Android Studio) https://developer.android.com/tools/index.html Windows Phone http://dev.windows.com/en-us/develop/downloads Tizen https://developer.tizen.org/downloads/tizen-sdk BlackBerry http://developer.blackberry.com
- 68.
- 69. Apache Cordova Setup InstallingCordova: • 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
- 70. Apache Cordova Cordova isan HTML Project • Start with Cordova Project • Start with HTML5 and add Cordova
- 71.
- 72.
- 73. Apache Cordova –index.html
- 74. Apache Cordova –index.js
- 75.
- 76.