Flutter Essentials ft. Allen Wyma - JSJ 494

On today’s episode of JavaScript Jabber, Charles Max Wood and panelist Joe Eames chat with Rebecca Turner, tech lead for https://www.npmjs.com/, a popular Javascript package manager with the worlds largest software registry. Learn about the newly released NPM 5 including a few of the updated features. Stay tuned![1:58] Was the release of node JS 8 tied to NPM5?- Features in NPM5 have been in planning for 2 years now.- Planned on getting it out earlier this year.- Node 8 was coming out and got pushed out a month.- Putting NPM5 into Node 8 became doable.- Pushed really hard to get NPM5 into https://nodejs.org/en/blog/release/v8.0.0/ so that users would get NPM5 and updates to NPM5.[2:58] Why would it matter? NPM doesn’t care right?- Right you can use NPM5 with any version of node.- Most people don’t update NPM, but upgrade Node.- So releasing them together allowed for when people updated Node they would get NPM 5.[3:29] How does the upgrade process work if you’re using NVM or some node version manager?- Depends. Different approaches for each- NVM gets a fresh copy of Node with new globals. NVM5 and Node 8 are bundled.- For some, If you manually upgrade NVM you’ll always have to manually. It will keep the one you manually upgraded to.[4:16] Why NPM 5?- It’s night and day faster.- 3 to 5 times speed up is not uncommon.- Most package managers are slow.- NPM 5 is still growing. Will get even faster.[5:18] How did you make it faster?- The NPM’s cache is old. It’s very slow. Appalling slow.- Rewrote cache- Saw huge performance gains[5:49] What is the function of the cache?- Cache makes it so you don’t have to reinstall modules from the internet.- It has registry information too.- It will now obey http headers for timing out cache.[6:50] Other things that made it faster?- Had a log file for a long time. It was called https://docs.npmjs.com/cli/shrinkwrap.- NPM 5 makes it default.- Renamed it to packagelog.json- Exactly like shrinkwrap package file seen before- In combo with cache, it makes it really fast.- Stores information about what the tree should look like and it’s general structure.- It doesn’t have to go back and learn versions of packages.[7:50] Can you turn the default Packagelog.json off?- Yes. Just:- Set packagelog=false in the npmrc[8:01] Why make it default? Why wasn’t it default before?- It Didn’t have it before. Shrinkwrap was added as a separate project enfolded in NPM and wasn’t core to the design of NPM.- Most people would now benefit from it. Not many scenarios where you wouldn’t want one.- Teams not using the same tools causes headaches and issues.[9:38] Where does not having a lock show up as a problem?- It records the versions of the packages installed and where NPM put them so that when you clone a project down you will have exactly the same versions across machines.- Collaborators have the exact same version.- Protects from issues after people introduce changes and patch releases.- NPM being faster is just a bonus.- Store the sha512 of the package that was installed in the glock file so that we can verify it when you install. It’s Bit for bit what you had previously.[11:12] Could you solve that by setting the package version as the same version as the .Json file?- No. That will lock down the versions of the modules that you install personally, not the dependancies, or transitive dependancies.- Package log allows you to look into the head of the installer. This is what the install looks like.[12:16] Defaulting the log file speed things up? How?- It doesn’t have to figure out dependences or the tree which makes it faster.- Shrinkwrap command is still there, it renames it to shrinkwrap but shrinkwrap cannot be published.- For application level things or big libraries, using shrinkwrap to lock down versions is popular.[13:42] You’ve Adopted specifications in a ROC process. When did you guys do that?- Did it in January- Have been using them internally for years. Inviting people into the process.- Specifications- Written in the form of “Here is the problem and here are the solutions.”- Spec folder in NPM docs, things being added to that as they specify how things work.- Spec tests have been great.[14:59] The update adds new tools. Will there be new things in registry as well?- Yes.- Information about a package from registry, it returns document that has info about every version and package json data and full readme for every version.- It gets very large.- New API to request smaller version of that document.- Reduces bandwidth, lower download size, makes it substantially faster.- Used to be hashed with sha1, With this update it will be hashed with sha512 as well as sha1 for older clients.[16:20] Will you be stopping support for older versions?- LTS version of NPM was a thing for a while. They stopped doing that.- Two models, people either use whatever version came with Node or they update to the latest.- The NPM team is really small. Hard to maintain old NPM branches.- Supports current versions and that’s pretty much it.- If there are big problems they will fix old versions. Patches , etc.[17:36] Will there ever be problems with that?- Older versions should continue to work. Shouldn’t break any of that.- Can’t upgrade from 0.8.- It does break with different Node version- Does not support Node versions 0.10 or 0.12.[18:47] How do you upgrade to NPM?- sudo npm install -gmpm- Yes, you may not need sudo. depend on what you’re on.[19:07] How long has it been since version 4?- Last October is when it came out.[19:24] Do you already have plans for version 6?- Yes!- More releases than before coming up.- Finally deprecating old features that are only used in a few packages out of the whole registry.- Running tests on getting rid of things.[20:50] Self healing cache. What is it and why do we want it?- Users are sometimes showing up where installs are broken and tarbols are corrupted.- This happens sometimes with complicated containerization setups makes it more likely. It’s unclear where the problem actually is.- https://www.npmjs.com/package/cacache - content addressable cache. Take the hash of your package and use it to look up address to look it up in the cache.- Compares the Tarbol using an address to look it up in the cache.- Compares to see if it’s old. Trashes old and downloads updated one.- Came out with the cache. Free side effect of the new cache.[23:14] New information output as part of the update?- NPM has always gave back you the tree from what you just installed.- Now, trees can be larger and displaying that much information is not useful.- User patch - gives you specifically what you asked for.- Information it shows will be something like: “I installed 50 items, updated 7, deleted 2.”[24:23] Did you personally put that together?- Yes, threw it together and then got feedback from users and went with it.- Often unplanned features will get made and will be thrown out to get feedback.- Another new things ls output now shows you modules that were deduped. Shows logical tree and it’s relationships and what was deduped.[25:27] You came up to node 4 syntax. Why not go to node 8?- To allow people with just node 4 be able to use NPM.- Many projects still run Node 4. Once a project has been deployed, people generally don’t touch it.[26:20] Other new features? What about the File Specifier?- File specifier is new. File paths can be in package json, usually put inside pointing to something inside your package.- It will copy from there to your node modules.- Just a node module symlink.- Much faster. Verifiable that what’s in your node modules matches the source. If it’s pointing at the right place it’s correct. If not, then it’s not.- Earlier, sometimes it was hard to tell.[27:38] Anything else as part of the NPM 5 release? Who do you think will be most affected by it?- For the most part, people notice three things:- 1st. no giant tree at the end- 2nd. Much faster- 3rd. Package lock.[28:14] If it’s locked, how do you update it?- Run npm installer and then npm update- Used to be scary, but works well now.- Updates to latest semver, matches semver to package json to all node modules.- Updates package lock at the same time- Summary in Git shows what’s changed.[28:59] Did Yarn come into play with your decisions with this release?- The plans have been in play for a long time for this update.- https://yarnpkg.com/en/ inclusion of similar features and the feedback was an indicator that some of the features were valuable.[29:53] Other plans to incorporate features similar to yarn?- Features are already pretty close.- There are other alternative package managers out there.- PMPM interesting because when it installs it doesn’t copy all the files. It cBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

20 Jun 201741min

JSJ 265 Wade Anderson and Ramya Rao on Visual Studio CodeThis episode is live at the Microsoft Build 2017 with Charles Max Wood and AJ O’Neal. We have Wade Anderson and Ramya Rao from the Visual Studio Code Team at Microsoft. Tune in and learn more about what’s new with Visual Studio Code![00:01:20] – Introduction to Ramya Rao and Wade AndersonRamya Rao and Wade Anderson are in the Visual Studio Code Team at Microsoft.Questions for Wade and Ramya[00:02:00] – Elevator Pitch for Visual Studio CodeOur vision on Visual Studio Code is to take what was best out of the IDE world (Visual Studio, Eclipse, IntelliJ, etc.) and bring what was best from the lightweight editor world (Sublime Text, Notepad++, Atom) and merge those two together. We wanted the lightweight features from text editors and the debugging capabilities of Visual Studio and Eclipse. We did general availability last year. We’ve been stable for a year. Additionally, this is Visual Studio Code for Mac, Windows, or Linux. It’s also built in Electron.[00:03:45] – What are your roles on the team? Do you have particular parts that each of you work on?Wade’s title is a Program Manager. He does more non-developer things but Ramya is an engineer on the team so she gets a lot more coding that Wade does. Everybody has a key area to own but nothing stops them to go into another area. We try to share knowledge between people but we always have that one key owner that you always go to.Ramya is a recent addition to the team. She started out maintaining the Go extension, maintaining and adding features. She’s slowly branching out to the Emmet features of the product.[00:05:30] What is Emmet?Emmet, or Zen Coding, is a must-have tool for you. You can write, say abbreviations and that expands to really huge HTML to update tags, rename tags, etc. That is one of the features of Emmet and Sergey actually wrote the library. We have an in built integration in the product. I [Ramya] am currently working on that.[00:06:28] Does Visual Studio Code make it easy to go to the parts that I need to customize on an HTML?In that case, we have a multi-cursor software in Visual Studio Code, as well. You could place your cursor in different positions, and then, simultaneously edit things.[00:07:42] Is Emmet an extension or does it come with Visual Studio Code?Right now, it’s in Built. If you want to know more about Emmet features, you can to emmet.io. That has all the documentation that you need to learn about Emmet features. In Visual Studio Code right now, we’re looking at making into an extension. We pull it out of the main code and maybe more people can contribute and make it even more better.[00:08:21] – What’s new in Visual Studio Code?One of our main pillars for this year is to improve performance of the product. We’ve grown a larger team so we’re adding a lot more features every month. Last few months has been, “How can we get some stability on the issues coming in while making sure we’re reducing our tech load?” We really keep to those core principles that we started with at the beginning, which was, we want a fast, lightweight editor.We built a few extensions that we call key map extensions. They are just a mapping of key bindings that you learned in Sublime Text. You don’t have to re-learn any key bindings in Visual Studio Code.We also build this Welcome page where you can flip through and see features really briefly. In that Welcome page, one of the key things is an interactive playground where you can play with existing code in different sections. Additionally, as we’ve mentioned, we also put multi-cursor features.Another thing is workbench naming. You can change the theme of Visual Studio Code but it will be restricted to the editor and not the rest of the workbench.[00:13:40] – Do you know how Xterm.js works as it was one of the features that you’ve added in Visual Studio Code?Daniel’s another engineer that’s here with us today. He was the largest contributor to the Xterm.js project. He built the integrated terminal for Visual Studio code so I can’t speak to the internals of how that works.[00:14:12] – Are we going to start seeing Visual Studio Code integrated into web experiences with other Microsoft products?That’s actually where we started. We were Monaco editor where you get this cloud-based editing experience. We’re getting people to use it but we’re only getting people who were already using Microsoft products.  When electron came out, we saw an opportunity of, “Hey, can we port this  Monaco editor to Electron and we could then, run it on Mac and Linux.”[00:19:45] – What are the performance things that you’ve done?One thing that we did recently was adding an ability to calculate the start time for Visual Studio Code? That’s one of our full steps to get more information from the user-side. How can you get a profile of what things are running? Which part of the process took much time?We also need to identify what are the things people are doing that’s causing the editor slow down. An example is when you open a large file and things get laggy.Another exercise we did was we looked at all of our extension API’s to see which one of those could be a malicious extension.The difference between VS Code and Atom is that, we ask questions like, “Are we using good data structures? Are we managing our memory properly? Are we removing stuff we don’t need anymore?” That just comes down to all those little things you learn from basic textbooks that have been around for decades about how to write good code. That’s what we have been doing and that’s what we’ll continue to try to do, to try and improve the performance.[00:25:55] – Do you have problem on the desktop? Are all the modules just load at once?We definitely don’t load everything at once. Different parts of the editor is loaded differently. When you do the Require, we don’t do it at first load. We do it when we notice that the user wants to use Emmet. We don’t try to load all the library at the beginning and delay the whole process.We try to lazy load as much as possible, even the extensions. We have a separate process called extension host that takes care of loading all the extensions. Whether the extensions are completed loading or not, that does not stop you from typing in a file. Simple actions shouldn’t be bugged down by fancy actions.[00:28:25] – What’s coming next for Visual Studio Code?Every month, when we plan our iteration, we create iteration draft plan. We put it out there for people to see. Performance and helping people get started are probably the top two for us. You can look at github.com/Microsoft/vscode, look for the label ‘iteration plan draft.’ So that’s the current work that we’re doing that month.Another feature is the multi-root workspace where you can open multiple folders. When you look at the issues and sort by most comments, multi-root is the number one. The second one that is little paper cuts around formatting and auto-intending – just things that make your code prettier.PicksAJ O’nealBreath on the WildMicrosoft’s Intelligent EdgeCharles Max WoodBoom BeachBluetick.ioEmacs key binding extension for Visual Studio CodeWade AndersonKindle Paperwhite Twitter @waderyan_Ramya RaoOpen sourceTwitter @ramyanexusSpecial Guests: Ramya Rao and Wade Anderson. Support this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

13 Jun 201747min

Support this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

9 Jun 201720min

This episode features Moving from Node.js to .NET and Raygun.io with John-Daniel Trask. John-Daniel is the Co-founder and CEO of Raygun, a software intelligence platform for web and mobile. He's been programming for many years, and is originally from New Zealand. Tune in and learn what prompted them to move to the .NET framework!Special Guest: John-Daniel Trask. Support this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

23 Mai 201745min

Join AJ, Aimee, and Joe as they discuss Mozilla Firefox Developer Tools with Jason Laster. Jason just started working at Mozilla since March. But even before that, he has been working on Chrome's dev tool extension called Marionette. That's when he discovered that the browser is an open source that anyone can play with. Now, he is working on a new debugger in Firefox. Tune in!Special Guest: Jason Laster. Support this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

16 Mai 201736min

On today's episode, Charles, Aimee, and Cory discuss HTTP 2 with Surma. Alongside being part of the Chrome DevRel Team for Google, Surma works on different web app performance. He is also engaged in HTTP 2, interaction, UX, and spec work. Stay tuned to discover what HTTP 2 can do for you!Special Guest: Surma. Support this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

9 Mai 20171h 2min

On today's episode, Charles, Joe, and Cory discuss Practical JavaScript with Gordon Zhu. Gordon is the founder of Watch and Code, and teaches the Practical JavaScript online course. His mission is to help beginners become developers through tutorials. Tune in!Special Guest: Gordon Zhu. Support this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

2 Mai 201750min

On today's JavaScript Jabber Show, Charles, Joe, Aimee, Cory, and AJ discuss Clean Code JavaScript with Ryan McDermott. Ryan is a UX Engineer at Google and has been a professional developer for 5 years. He's focused on frontend Angular and backend node.js. Stay tuned to learn more about his current project with JavaScript!Special Guest: Ryan McDermott. Support this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

25 Apr 201754min