Talk about ... IDEs

Onwerk Talks Meetup

Transcript

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

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

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

   View Slide

9. www.onwerk.de
   Comparability
   

   View Slide

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)
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

22. www.onwerk.de
    WebStorm
    Business and Organizations Individual
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

26. www.onwerk.de
    IntelliJ
    Business and Organizations Individual
    

    View Slide

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

    View Slide

28. www.onwerk.de
    Questions?
    

    View Slide

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/
    

    View Slide