Tuesday, March 27, 2018

What I did last year at Google: IDE Tooling for AngularDart 5


I haven't blogged in over a year now, because I ended up joining Google to work on Dart, where I've been slowly easing into my opinionated state while learning from the experts.

I've also been really really focused on this new tooling which I've already announced elsewhere but wanted to share here too!

AngularDart

Dart is a statically typed language which I've grown to really enjoy using, and Dart 2 will be even more strictly typed. That is why it makes such a great platform for the Angular framework, where components are mostly statically linked together in templates to create performant UIs.

So, to further improve the productive and safe developer experience we've created for developers, I got the chance to work on IDE tools for preserving that type-safety inside of AngularDart templates! It requires AngularDart 5, and works out of the box with IntelliJ/WebStorm. It can also be configured to work in VSCode, vim, and more.

It's been a blast to create, and I am so fortunate to have had the chance to do this all open source. Let's see what it offers so far!

Errors

The new analysis plugin will find many type errors inside your templates for you. Expressions are validated against the directives you use, the inputs they contain, and the references you bind (#foo, let item of, …).

Here’s a misspelled member, so you don’t have to play human-spellchecker!


And mismatched types on a component input are no longer a problem either.


We can also give you errors related to $event variable types,


And we check the content you transclude inside your directives. This is one example of where we catch not only type errors but also dead code.


And we could go on! We catch a slew of other types of errors, both in templates, and component definitions.

In addition to being highlighted in your editor, the full listing of errors is displayed in the Dart Analysis panel.


Autocomplete

We didn’t just stop at validation! While much of the work was getting our analysis to be performant and fully well-behaved in regards to the compiler, much of the value comes from using that resolved template state to deliver you the goodness of regular Dart autocompletion in your templates:


But we can complete more than regular Dart members — how about inputs, outputs, and HTML tags?

Tags? Check.


Attributes? Check.


Stars? Check.


Attributes within stars? Check.


Bonus points: Suggested tags with attributes within component transclusions!


Transclusions are a famously advanced topic within angular, so if you think you know what exactly it is that we’re suggesting, pat yourself on the back for knowing AngularDart very well.

Suffice it to say, component APIs are much easier to follow when using our plugin!

Navigation

Support here varies a lot more by editor, but within IntelliJ you can click through parts of Dart expressions. In other editors you may be able to navigate on even more entities such as tags and inputs/outputs.

How To Use

Make sure you are using an AngularDart 5 beta release, and Dart 2.0.0-dev.31 or newer.

Simply add this to your analysis_options.yaml file:
analyzer:
  plugins:
    angular:
      enabled: true
And restart your IDE. Note, it may take a few seconds to spin up the plugin. It will first have to download sources & dependencies for you, and the first analysis will be slower than subsequent ones.

You can also play around with it in our analyzer plugin demo project.

If you are using IntelliJ, this should be all you have to do. For other editors, they may not run our plugin on HTML without extra work — for instance, VSCode requires a flag.

Closing Thoughts

If you have never tried the Dart language, and enjoy or want to explore the angular framework, I definitely recommend AngularDart which is very popular within Google. For anyone just learning, I hope that the IDE tooling here can play interactive-tutor to get you off the ground quickly!

Our plugins source code lives on Github, which has more information on what’s supported and where you can file issues if you have questions or come across any bugs.

The new IDE tooling will be part of the next stable release of AngularDart (v5). It's been a blast to work on offering even better productivity for the AngularDart community.

And I hope I check in here with updates more regularly since I'd say this was a pretty interesting last year and a half!

68 comments:

  1. Personal Improvement, in my experience envelops all aspects of our lives. Mental, enthusiastic, physical, and profound. There is a well-known adage in A.A, which says, "in case you're not going ahead in your life, that is no joke".اختبارات الشخصية

    ReplyDelete
  2. Superior post, keep up with this exceptional work. It's nice to know that this topic is being also covered on this web site so cheers for taking the time to discuss this! Thanks again and again! Desarrollo de apps

    ReplyDelete
  3. Attend Business Analytics Training in Mumbai with 100% Syllabus Covered also Attend the Best Data Science Course in Mumbai. Faculty are From IIT & ISB. ExcelR is the Best Institute for Data Science Training in Mumbai
    Data Analytics Courses in Mumbai

    ReplyDelete
  4. Wonderful blog post, thank you so much for the great information which you provided.
    https://rokucomlinks.org/

    ReplyDelete
  5. Attend The Artificial Intelligence course in bangalore From ExcelR. Practical Artificial Intelligence course in bangalore Sessions With Assured Placement Support From Experienced Faculty. ExcelR Offers The Artificial Intelligence course in bangalore.
    artificial intelligence course in bangalore

    ReplyDelete
  6. Attend The Data Analytics Courses From ExcelR. Practical Data Analytics Courses Sessions With Assured Placement Support From Experienced Faculty. ExcelR Offers The Data Analytics Courses.
    ExcelR Data Analytics Courses

    ReplyDelete
  7. Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    microservices online training

    ReplyDelete
  8. Thank you for sharing this information.your information very helpful for my business. I have gained more information about your sites. I am also doing business related this.
    Thank you.
    Data Science Training in Hyderabad

    Hadoop Training in Hyderabad

    Java Training in Hyderabad

    Python online Training in Hyderabad

    ReplyDelete
  9. After reading your article I was amazed. I know that you explain it very well. And I hope that other readers will also experience how I feel after reading your article.
    data analytics courses

    ReplyDelete
  10. I am a new user of this site so here i saw multiple articles and posts posted by this site,I curious more interest in some of them hope you will give more information on this topics in your next articles.
    ExcelR artificial Intelligence certification

    ReplyDelete
  11. You actually make it look so easy with your performance but I find this matter to be actually something which I think I would never comprehend. It seems too complicated and extremely broad for me. I'm looking forward for your next post, I’ll try to get the hang of it!
    data science courses in bangalore

    ReplyDelete
  12. This is a wonderful article, Given so much info in it, These type of articles keeps the users interest in the website, and keep on sharing more ... good luck.
    data analytics courses in mumbai
    data science interview questions

    ReplyDelete
  13. I finally found great post here.I will get back here. I just added your blog to my bookmark sites. thanks.Quality posts is the crucial to invite the visitors to visit the web page, that's what this web page is providing.
    data science course Mumbai
    data science interview questions
    data analytics course in mumbai

    ReplyDelete
  14. I finally found great post here.I will get back here. I just added your blog to my bookmark sites. thanks.Quality posts is the crucial to invite the visitors to visit the web page, that's what this web page is providing.
    data science course Mumbai
    data science interview questions
    data analytics course in mumbai

    ReplyDelete
  15. This is a wonderful article, Given so much info in it, These type of articles keeps the users interest in the website, and keep on sharing more ... good luck... Thank you!!! ai training in bangalore

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete
  17. Internet marketing encompasses reaching out to organizations who have an online presence. Examples are blogger outreach, social media, affiliate programs, email etc.
    ExcelR Digital Marketing Courses In Bangalore

    ReplyDelete
  18. This is a wonderful article, Given so much info in it, These type of articles keeps the users interest in the website, and keep on sharing more ... good luck... Thank you!!! artificial intelligence course

    ReplyDelete
  19. This is a wonderful article, Given so much info in it, These type of articles keeps the users interest in the website, and keep on sharing more ... good luck... Thank you!!! artificial intelligence course in bangalore

    ReplyDelete
  20. You completed a number of nice points there. I did a search on the issue and found ExcelR Data Analytics Courses In Pune nearly all people will have the same opinion with your blog.

    ReplyDelete
  21. Whatever we gathered information from the blogs, we should implement that in practically then only we can understand that exact thing clearly, but it’s no need to do it, because you have explained the concepts very well software testing courses online . It was crystal clear, keep sharing....

    ReplyDelete
  22. This is a wonderful article, Given so much info in it, These type of articles keeps the users interest in the website, and keep on sharing more ... good luck... Thank you!!! digital marketing courses in Bangalore

    ReplyDelete
  23. Such a very useful article. Very interesting to read this article.I would like to thank you for the efforts you had made for writing this awesome article. bangalore digital marketing course

    ReplyDelete


  24. This post is really nice and informative. The explanation given is really comprehensive and informative. I also want to say about the best digital marketing course

    ReplyDelete
  25. Awesome article, it was exceptionally helpful! I simply began in this and I'm becoming more acquainted with it better. The post is written in very a good manner and it contains many useful information for me. Thank you very much and will look for more postings from you.


    digital marketing blog
    digital marketing bloggers
    digital marketing blogs
    digital marketing blogs in india
    digital marketing blog 2020
    digital marketing blog sites
    skartec's digital marketing blog
    skartec's blog
    digital marketing course
    digital marketing course in chennai
    digital marketing training
    skartec digital marketing academy

    ReplyDelete
  26. I have to search sites with relevant information on given topic ExcelR Digital Marketing Course Pune and provide them to teacher our opinion and the article.

    ReplyDelete
  27. This is a wonderful article, Given so much info in it, Thanks for sharing. CodeGnan offers courses in new technologies and makes sure students understand the flow of work from each and every perspective in a Real-Time environmen python training in vijayawada. , data scince training in vijayawada . , java training in vijayawada. ,

    ReplyDelete
  28. Awesome Post!!! I really enjoyed reading this article. It's really a nice experience to read your post. Thanks for sharing.
    Data Science Course
    Data Science Course in Marathahalli
    Data Science Course Training in Bangalore

    ReplyDelete
  29. This Was An Amazing ! I Haven't Seen This Type of Blog Ever ! Thankyou For Sharing, data science courses

    ReplyDelete
  30. Thanks for giving me the time to share such nice information. Thanks for sharing.
    Data Science Course

    ReplyDelete
  31. You are so interesting news! I don't suppose I've read something like that before. So good to find someone with unique thoughts on this subject. Seriously.. many thanks for starting this up. This website is something that is needed on the internet, someone with a bit of originality!

    ReplyDelete
  32. Having read this I thought it was very informative. I appreciate you taking the time and energy to put this content together. I once again find myself personally spending way too much time both reading and leaving comments. But so what, Webdevelop it was still worthwhile!

    ReplyDelete
  33. I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.satta king

    ReplyDelete
  34. Cool stuff you have and you keep overhaul every one of us.
    Data Analytics Course in Pune

    ReplyDelete
  35. Awesome blog, I enjoyed reading your articles. This is truly a great read for me. I have bookmarked it and I am looking forward to reading new articles. Keep up the
    good work!.data analytics courses

    ReplyDelete
  36. Nice Post ,Thank you for sharing the informative article share with us, your blog was creative writing ability has inspired me. Keep Updating.
    Artificial Intelligence Training In Hyderabad

    ReplyDelete
  37. Your work is very good and I appreciate you and hopping for some more informative posts
    Know more Data Analytics Course in Pune

    ReplyDelete
  38. Awesome blog, I enjoyed reading your articles. This is truly a great read for me. I have bookmarked it and I am looking forward to reading new articles. Keep up the
    good work!.artificial intelligence course in bangalore

    ReplyDelete