Live Webinar: React+TypeScript+TDD in IntelliJ IDEA
On October 23rd we’re doing a webinar which is a bit of an experiment for us: we’re inviting another JetBrains developer advocate, Paul Everitt, over to show us about React and TypeScript in IntelliJ IDEA.
Why an experiment? Here’s an interview I (Trisha Gee) did with Paul to help frame the webinar, explain what we’ll be doing, and dive into our ideas about “fail faster” and “flow.”
Let’s jump right in… what’s the webinar about, why should people care?
If you’re a web front-end or full-stack developer, you’ve probably seen React. You’ve probably seen TypeScript. Perhaps you’ve seen both, but as an IntelliJ IDEA user, haven’t spent the time to get oriented.
This webinar is for you. We’ll show some of the key concepts and how the IDE can help do your janitorial work during front-end development. The webinar is for people somewhat familiar with web technologies, though React/TypeScript experience isn’t necessary.
All they need is IntelliJ IDEA Ultimate, right?
Indeed. You and I have talked about how important it is to let people know, most of our IDEs bundle WebStorm, our IDE for web development. And WebStorm kicks ass, it’s just wonderful, and we need to talk about it more. Just last week, in fact, a major PyCharm user and friend of mine said he had both PyCharm Professional and WebStorm as he didn’t know the former includes the latter.
If you know and like IntelliJ IDEA and you want to do modern web development, you’ll love the features for web development that come from WebStorm and are in IntelliJ IDEA Ultimate.
When you say “experiment”, what’s that all about?
Several things. First, you and I set this up to do the same webinar across multiple IDEs. I’m doing it this week for PyCharm, you and I are doing it next week for IntelliJ IDEA, and next month I’m with Maarten doing it for Rider.
Could people just watch one? Sure. Will they? Probably not. Language communities are strong and people like me need to respect that and show up at your place, so to speak. Also, it gives a chance for you to help frame it and explain it in the context of a Java, Kotlin or other JVM language project.
Plus, any chance to hang out with you is a good day indeed.
What else makes it kind of an experiment?
There’s another reason you could have skipped this session: all the material comes from a 12-step online tutorial. Each step has a narrated tutorial plus an in-depth write up with working code.
But again, people like multiple avenues for their learning path. Doing a webinar with you and folks who use IntelliJ IDEA gives us a chance to take questions, focus on different aspects, discuss in the context of a Java back-end, etc.
I like doing webinars with detailed material prepared in advance. It lets people free their mind and absorb rather than learn details, knowing there is a backstop online. And for those that want to deep-dive, they can do the tutorial.
As a note, we won’t be doing a Java back-end in this tutorial.
TDD is one of my favourite techniques, tell me a bit about that
When I first wrote the tutorial, I was basically documenting for myself the pain of React and TypeScript eighteen months ago, when most stuff online was outdated or broken. As I expanded it to outsiders, I realized I wanted to show how I do my work.
I’m big on getting into the “flow” and staying there. For React and TypeScript, I do my development in tests, in the IDE, code on the left, tests on the right, “visual” test runner at the bottom. I almost never go over to the browser and click around. I find that clumsy and flow-killing. So I decided to teach these concepts from within a test.
I also prattle on about “fail faster”. You’re going to make mistakes. In modern web development, finding your mistake by clicking around in Chrome is just abysmal. What can we do to find your mistakes earlier, meaning, how can we “fail faster”?
I find TDD in the IDE to be astonishingly better and more joyful for “fail faster”. Your test fails? Well, we all know how to click on links in exceptions to open a line, run the tests under the IDE’s debugger to poke around. The addition of TypeScript means I fail even before the test runs, with a yellow squiggle.
Is this mainly React stuff or do you also show some IDE tips?
Good point, thanks for bringing that up.
When I first wrote this, I planned to leave any IDE promotion out of it. I wanted it to be 100% non-propaganda, with a high search score, to help people struggling to glue together React and TypeScript.
I quickly changed my mind! First, React and TypeScript became a lot more normal when Create React App made it first class. Second, as I said above, I wanted to show how I do things, what excites me, and that meant “getting into the flow” and “fail faster”. Letting the IDE do your janitorial work, etc.
So yes, this tutorial is probably 70% “Learn React+TS+TDD”, 30% “Use the IDE to go fast.”
What if someone misses the webinar?
It’s OK because all the material is there in the tutorial. In addition, as usual the webinar will be recorded. The webinar will be an hour, which isn’t remotely enough time to more than an overview on each segment. But it’s a nice compressed way to get oriented and ask questions.
As a note, the tutorial is a little out of date. Since I recorded everything, the React+TS world shifted from TSLint to ESLint. When that settled down, Create React App shipped a major release with the new ESLint, which spent a while in a semi-broken state. Once our 2019.3 releases ship, I’ll consider getting the courage to re-do it.
Space is limited, please register now!
Subscribe to IntelliJ IDEA Blog updates
