www.onwerk.de Let’s talk about... IDEs Martina Kraus, Onwerk GmbH Onwerk Talks 01.06.2017

www.onwerk.de Agenda • IDE? • Decision criterion • How to compare? • Visual Studio • WebStorm • VS Code • IntelliJ

www.onwerk.de $ whoami Martina Kraus • Software Developer@Onwerk Gmbh • Lecturer @HS Mannheim && @DHBW Karlsruhe • JavaScript/ ECMAScript enthusiasm CodeKittey @wing121 kraus.martina.m@googlemail.com

www.onwerk.de IDE ● What is actually an IDE? ● What do you expect using an IDE?

www.onwerk.de IDE? ● Eclipse, NetBeans, IntelliJ ● WebStorm, AppStorm, PhpStorm ● Xcode ● Visual Studio, Visual Studio Code ● Vim, Nano, Vi ● Sublime, Atom, Brackets ● NotePad++

www.onwerk.de Decision criterion ● Code in multiple Languages: ○ full-blown IDE ○ one Tool can’t rule everything ● Syntax Highlighting: ○ even for templating languages ○ detecting the right language ● In-Product Compilation: ○ compile your code right inside the IDE ○ main distinction between IDE and plain text editor ● Built-In Testing Tools

www.onwerk.de Decision criterion ● License Model ● Extensibility: ○ PlugIns/ Addons ○ Possibility to write your own macros ○ Configuration (shortcut) ● Built-in Debugging: ○ Web debugging ● Drag’n’ Drop Layouts for GUIs (Code Generation): ○ losing flexibility ○ limited to what the IDE generates

www.onwerk.de Decision criterion ● Class Browsers: ○ Navigation through you code ● Autocompletion (Intellisense): ○ Variables and functions ● Code Analysis (suggested fixes) ○ detecting unused variables/ imports ● Usablitity ○ formatting ○ search and replace ○ find all Usage for ...

www.onwerk.de Comparability

www.onwerk.de Visual Studio ● full-blown IDE for Developing: ○ Windows Apps ○ Mobile Apps ○ Web Apps ○ Azure Apps ○ Games ○ Office ● Code generation for all kind of projects (including project structure)

www.onwerk.de Visual Studio ● Supported Technologies: ○ C#, C++, Node.js, Python, R, .NET. JavaScript / TypeScript ○ now even for iOS Apps ● mostly for .NET development (C#) ● Debugging: ○ Remote Debugging ○ Performance Diagnosis ○ Profiling tools

www.onwerk.de Visual Studio ● In-Built Test-tools: ○ monitor testing effort ○ quality metrics, indicators ○ test status reports ● Integrated version control tools ● Customizing ○ many high quality Extensions ○ marketplace.visualstudio.com

www.onwerk.de Visual Studio (In a nutshell) Code in multiple Languages Syntax Highlighting In-Product Compilation Built-In Testing Tools Extensibility Debugging Code Generation (UI) Autocompletion Code Analysis

www.onwerk.de Visual Studio ● heavy for Web Development ○ long loading time ● Windows only ● Pricing: (Standard subscription) https://www.visualstudio.com/vs/pricing/ ● Standalone License: $499 | $45/mon ● Visual Studio Express for free

www.onwerk.de Visual Studio Code ● lightweight cross-platform editor ● Supports: ○ R, Less, SQL, Swift, Sass, JavaScript, Python ○ Java, HTML, C#, Go, ○ Jade, Handlebars, HTML, Markdown ● IntelliSense ○ especially for TypeScript with Angular ● Built-In Debugging Tools ● Built-In Git commands

www.onwerk.de Visual Studio Code ● iOS Web Debugging with built-in simulator ● Extensions: ○ Docker Tools for VS Code ○ Azure CLI ○ NoSQL MongoDB extension (only on Insiders build yet)

www.onwerk.de Visual Studio Code (In a nutshell) Code in multiple Languages best support for Web Development Syntax Highlighting some issues In-Product Compilation for TypeScript Built-In Testing Tools Extensibility huge community / good documentation Debugging Code Generation (UI) Autocompletion with some helping tools (like CodeLens) Code Analysis With Plugins

www.onwerk.de Visual Studio Code ● good for cross-platform development ● short release circles ● have to write your own configuration files (for debugging, testing and compilation)

www.onwerk.de WebStorm ● Light-weight coding assistance for JavaScript ○ Angular, React, Vue.js Meteor ● Support for React Native, Cordova and Ionic ● Testing: ○ integrates Karma test runner ● Debugging: ○ provides built-in debugger for client-side code ● integrates spy-js ○ or tracing JavaScript Code

www.onwerk.de WebStorm ● Cross-platform ● provides UI for VCS ● Local History ○ easily rolling back files ● Customizations ○ Plugins: https://plugins.jetbrains.com/webstorm

www.onwerk.de WebStorm (In a nutshell) Code in multiple Languages JavaScript / TypeScript Syntax Highlighting In-Product Compilation for TypeScript Built-In Testing Tools Extensibility Debugging Code Generation (UI) Creating new Project structure Autocompletion only suggestions Code Analysis With Plugins / eslint-files

www.onwerk.de WebStorm Business and Organizations Individual

www.onwerk.de IntelliJ ● good for Android and Java Development ○ Android studio is based on IntelliJ ● supports: ○ Groovy, Scala, Kotlin ○ JavaScript, TypeScript ● Cross-language refactorings ● Inspections and quick-fixes

www.onwerk.de IntelliJ ● Detecting Duplicates ○ finds repetitive code ● Built-in developer tools: ○ VCS ○ Build Tools (gradle support) ○ Test runner ○ Terminal ○ Database Tools ○ Docker

www.onwerk.de IntelliJ (In a nutshell) Code in multiple Languages best support for Java / Android Syntax Highlighting In-Product Compilation Built-In Testing Tools Extensibility huge community / good documentation Debugging Code Generation (UI) Autocompletion Huge Featureset of supporting tools Code Analysis

www.onwerk.de IntelliJ Business and Organizations Individual

www.onwerk.de Know your Tools!!!!

www.onwerk.de Questions?

www.onwerk.de Further Readings • choosing an IDE: http://insights.dice.com/2015/05/19/choosing-an-ide-right-for-you/ • https://www.jetbrains.com/idea • https://code.visualstudio.com/updates/v1_12 • https://www.visualstudio.com/vs/features/