Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Talk about ... IDEs

E54070c941e73381a3473df8e2aab667?s=47 Martina Kraus
June 01, 2017
40

Talk about ... IDEs

Onwerk Talks Meetup

E54070c941e73381a3473df8e2aab667?s=128

Martina Kraus

June 01, 2017
Tweet

Transcript

  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/