Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

www.onwerk.de $ whoami Martina Kraus • Software Developer@Onwerk Gmbh • Lecturer @HS Mannheim && @DHBW Karlsruhe • JavaScript/ ECMAScript enthusiasm CodeKittey @wing121 [email protected]

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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 ...

Slide 9

Slide 9 text

www.onwerk.de Comparability

Slide 10

Slide 10 text

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)

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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)

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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)

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

www.onwerk.de WebStorm Business and Organizations Individual

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

www.onwerk.de IntelliJ Business and Organizations Individual

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

www.onwerk.de Questions?

Slide 29

Slide 29 text

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/