Talk about ... IDEs

Onwerk Talks Meetup

1. www.onwerk.de Let’s talk about... IDEs Martina Kraus, Onwerk GmbH Onwerk Talks 01.06.2017
2. www.onwerk.de Agenda • IDE? • Decision criterion • How to compare? • Visual Studio • WebStorm • VS Code • IntelliJ
3. 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
4. www.onwerk.de IDE • What is actually an IDE? • What do you expect using an IDE?
5. www.onwerk.de IDE? • Eclipse, NetBeans, IntelliJ • WebStorm, AppStorm, PhpStorm • Xcode • Visual Studio, Visual Studio Code • Vim, Nano, Vi • Sublime, Atom, Brackets • NotePad++
6. 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
7. 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
8. 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 ...
9. www.onwerk.de Comparability
10. 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)
11. 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
12. 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
13. 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
14. 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
15. 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
16. 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)
17. 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
18. 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)
19. 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
20. www.onwerk.de WebStorm • Cross-platform • provides UI for VCS • Local History ◦ easily rolling back files • Customizations ◦ Plugins: https://plugins.jetbrains.com/webstorm
21. 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
22. www.onwerk.de WebStorm Business and Organizations Individual
23. 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
24. www.onwerk.de IntelliJ • Detecting Duplicates ◦ finds repetitive code • Built-in developer tools: ◦ VCS ◦ Build Tools (gradle support) ◦ Test runner ◦ Terminal ◦ Database Tools ◦ Docker
25. 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
26. www.onwerk.de IntelliJ Business and Organizations Individual
27. www.onwerk.de Know your Tools!!!!
28. www.onwerk.de Questions?
29. 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/