Java script nirvana in netbeans [con5679]

209 views

Published on

JavaOne 2016
NetBeans is not just a Java IDE. It supports JavaScript as a first-class citizen and provides a complete integrated development environment. It also provides project types for server-side JavaScript (Node.js) as well as web browsers and mobile (Apache Cordova). In addition, it supports Grunt, Mocha and Selenium, Angular and Knockout, and more. This session provides an update on NetBeans 8.1 and demonstrates the top new JavaScript features. You will see a Node.js application in action, look at the support for JavaScript unit testing, and also see how easy it is to debug an Apache Cordova application running on a tethered iPhone.

Published in: Software
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
209
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • I would like to welcome everybody to
  • It is 2016, are you still coding with Notepad or Notepad++.
  • What do you need to get started?
  • Java script nirvana in netbeans [con5679]

    1. 1. JAVASCRIPT NIRVANA IN NETBEANS Ryan Cuprak
    2. 2. About Ryan Cuprak • @ctjava • rcuprak@gmail.com • http://www.cuprak.info • https://www.linkedin.com/in/rcuprak
    3. 3. Notepad?
    4. 4. JavaScript IDEs • NetBeans 8.1+ • WebStorm • VisualStudio 2013+ • Sublime Text • Eclipse (with JSDT) • Komodo Free $99
    5. 5. Why NetBeans? • Intuitive • Integrated • Adaptable • Full Stack • Powerful
    6. 6. NetBeans 8.2 Features Natively 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)
    7. 7. CONFIGURATION JavaScript Dependencies
    8. 8. NetBeans Configuration 1. Install Node.js 2. Install SASS • Install Ruby 2.2.X • gem install sass 3. Install Chrome Plugin http://tinyurl.com/jjcorgm
    9. 9. Chrome Plugin
    10. 10. Tool Configurations Looks in default locations
    11. 11. Key Bindings Don’t want to re-learn keyboard shortcuts?
    12. 12. PROJECTS TYPES Getting Started
    13. 13. NetBeans & Projects Open Projects
    14. 14. Project Types Key questions: 1. What JavaScript technology stack? 2. Are you starting fresh or with existing sources?
    15. 15. HTML5 Application Templates
    16. 16. Tools Tool Description package.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.
    17. 17. HTML5 Application Example Angular Seed Template
    18. 18. Node.js Application
    19. 19. HTML5 + Node.js Application
    20. 20. Example Projects
    21. 21. File Templates Category File Types 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. 22. EDITOR FEATURES
    23. 23. Syntax and Semantic Highlighting
    24. 24. ECMAScript 6
    25. 25. Navigation
    26. 26. JavaScript Parser
    27. 27. Code Completion
    28. 28. JavaScript Debugging
    29. 29. DOM Debugging
    30. 30. CSS Editing Popup for adding new properties
    31. 31. LESS Support: New File File -> New File
    32. 32. LESS Support: Editor + CSS Generation Generated CSS
    33. 33. Customizable Palette • Drag HTML elements from Palette into HTML Window (Wizard appears) • Drag selections from HTML document to Palette to create new HTML snippets.
    34. 34. Embedded Web Server Web Server for testing
    35. 35. Managing JavaScript Dependencies Three different approaches: • npm – Node Package Manager • Bower • CDNJS
    36. 36. Adding JavaScript Libraries (Bower) https://bower.io/
    37. 37. Adding JavaScript Libraries (Continued…) Downloads Library
    38. 38. Adding JavaScript Libraries (Continued…)
    39. 39. Insert Library Drag library into target folder.
    40. 40. GRUNT & GULP Build Script Automation
    41. 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. 42. Gulp: Hello World
    43. 43. Gulp: Hello World
    44. 44. Gulp: Configuring IDE Actions
    45. 45. Grunt: Example Install via npm
    46. 46. Grunt: Install Dependencies
    47. 47. RequireJS Maps module names to local paths for testing.
    48. 48. NODE.JS Serverside JavaScript
    49. 49. 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.
    50. 50. 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.
    51. 51. Node.js + Express.js Template Engines • JADE <- supported natively by NetBeans • EJS • Handlebars • Hogan.js Node.js Express.js Template Engine
    52. 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. 53. Demo
    54. 54. UNIT TESTING
    55. 55. 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 (Chrome/FireFox/etc.)
    56. 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. 57. Karma Configuration & Setup 1 2 3
    58. 58. Create Karma Configuration
    59. 59. Karma Configuration
    60. 60. Karma Configuration
    61. 61. Karma Configuration & Setup
    62. 62. Karma: Test Run
    63. 63. Example Unit Test
    64. 64. CORDOVA
    65. 65. 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.
    66. 66. Cordova Platform SDK • Certificates to 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. 67. Cordova Platform Tools and 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. 68. iOS Setup
    69. 69. Apache Cordova Setup Installing 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
    70. 70. Apache Cordova Cordova is an HTML Project • Start with Cordova Project • Start with HTML5 and add Cordova
    71. 71. Cordova Project Creation
    72. 72. Project Layout
    73. 73. Apache Cordova – index.html
    74. 74. Apache Cordova – index.js
    75. 75. Run Target
    76. 76. Q&A Best JavaScript IDE!

    ×