@RodyDavis spoke about IDX and Flutter and demonstrated how much easier life becomes for a developer when using IDX
#flutter #idx #dart #developer #google #fluttersiliconvalley
0:05 · okay awesome uh so cool to see everybody thanks for um be able to uh show up to this awesome Silicon Valley Meetup uh my name is roie and I am super excited to talk about how idx and flutter uh work good together I recently joined idx and
0:21 · I’m a senior developer relations engineer on the deil team but I’ve been at Google for a while been using uh flutter uh for quite a bit and also contributing as well um if you don’t take anything else away from today’s session I want you to go to this URL and try out flutter in idx uh We’ve
0:40 · uh implemented a lot of stuff to make it a lot better have some exciting new features that we’ve been uh prototyping and uh just make sure you take a screenshot and uh and and a photo of that also if you have any questions that I don’t cover or if you want to talk to me after um or even want to reach out on GitHub LinkedIn or Twitter you can just find me ready Davis
1:01 · so today we have a lot to cover but I think it’s going to be worth it uh first off we’re going to start with uh local versus remote development environments then we’re going to move on to Nyx and Docker finally talk about flutter and idx and then hopefully end on some cool use cases with Native tooling uh but first let’s start off with a question how many people have used idx raise your hand awesome how many people have used idx in the last month awesome sweet yeah
1:29 · if you haven’t checked it out recently I highly suggest you to check it out again we have some uh like I said a lot of really cool stuff coming so the first question you might be thinking is like why would I want to use idx or NYX if I already have flutter set up locally so this is a valid uh
1:47 · question that we we can explore one feature requests we get a lot is with idx is we want to be able to support offline in a local version but first we really need to take a step back and think about what the actual problem we’re trying to solve here is you know we what we’re exchanging for a local setup and when it makes sense to do so I want you to think back to the first time that you’re installing any SDK at all
2:13 · usually there’s a lot of uh trouble getting started not necessarily because of the install guide but because of you are a day one developer exploring this new framework you don’t know what the happy path is other than the documentation that you usually find and uh so it’s important to remember
2:33 · that that happens for every user every new time they visit a framework it also happens when you revisit a project after two years of not opening it you are crushed to it again the point is that there’s a lot of unknown and error States you can end up in and you can easily fall into and everything’s fine
2:51 · and still it’s not but if you’ve been working with flutter for longer than uh for a longer period of time then you’ve sure run into the problem where you’ve had multiple flut version conflicts uh if you have production apps this problem is worse because sometimes you may need to pin onto a specific version this is not unique to flutter this exists for every framework out there there’s many people stuck on angularjs or angular one
3:16 · because they’ve launched into production and there’s some maybe reasons why dependencies are holding you back and this problem is even compounded when you bring in external dependencies like whether it be cocoa pods uh xcode Max versions local clis any additional native tooling rust C++ and go all this
3:33 · compounds together to have a specific version that you’re tied to and a lot of these things have workarounds but they’re usually specific to the development environment and the Machine and the intersection of these dependencies so if you work on multiple text Stacks Beyond just flutter you’ll see that this problem gets expanded for example if you have uh we’re working on python there’s a really big migration to Python 3 and a lot of people ran into
4:00 · cases where you needed to either install both versions and then now have to deal with these conflicts I remember when I first got my M1 Mac um MacBook there’s a lot of issues where you had to compile both the arm and the x86 versions and a lot of times they were conflicting you had now had up aliases duplicates of most binaries so you can see how this uh gets expanded out and if you’ve used PHP you know there’s virtual environments and so on and this problem gets worse over time
4:27 · when you get a new machine or you’re trying to set up or even come back back to it and right now when you deploy your code to GitHub or other gith hosta providers it’s really specific to what you need to use to install the app but not necessarily opinionated on where you need to run it GitHub actions can specify what’s needed to build parts of it but not necessarily what you need for developing it so this is all just for your current
4:54 · projects but what about what happens when you want to explore something new if you’re start developer and you want to try out rust or a PHP framework or even running a native tool chain like C or C++ then exploring new projects becomes really difficult because you need to install it before you try it
5:12 · there’s also some tools and web Frameworks out there that let you run them in a browser but these are mostly for JavaScript only kind of applications the goal is to try out the framework to see if you like it before taking the leap and installing it locally but what about Docker you might be thinking I think uh everybody’s seen the where where U you know if it works on my machine well then let’s ship your machine that’s literally how Docker was born but Docker only solves the problem
5:40 · of the environment for building it it and also sometimes running it self-contained this this deployment can be gigabytes on this container image because you’re literally com putting it all together and if you have multiple versions you need to have multiple containers of them it also doesn’t make a lot of sense to use a Docker file for your local development setup although there are some cases out there with Dev containers and some other stuff that try to make a um a leap into this but the problem is
6:07 · it’s also gigabytes it can be very slow but so this is just taking a look at like um a Docker for development Docker files are a way to describe everything you need to build and run an application but really it’s a great way to deploy an application the problem that we have with this file is that everything is imperative and not de ative it requires you to specify all the
6:32 · commands that will be run on the VM but there’s no promise about version conflicts that they there’s no promises about directory clashes or even cashing of true dependencies because if you run two commands that both intersect in the same directory they’re going to overlap and you can have conflicts that’s not docker’s fault that’s just a you know one of the natures of how you’re running you’re literally just getting a VM and running commands but I think we’re on to something here
7:01 · what we want to do is declaratively set up the operating system and everything we need to get started so introducing NYX raise your hand if you’ve heard of Nyx before hey there’s some people uh NYX is
7:16 · a functional package man manager that lets you deterministically build dependencies that do not conflict NYX is declarative where Docker is imperative in fact NYX can build layered Docker images better than even Docker can and this is because NYX can specify all the
7:34 · caching and the dependencies separated so that you can deploy without ever having to worry about them conflicting but before we look at NYX and idx I want to briefly go over what idx looks like and what it can do so first of all it’s entirely web based you just need to visit a URL and you can start coding right away it’s also built on vs code so it’s incredibly familiar to most steps you can bring most of what you use uh in
8:03 · your local environments your preferences and your extensions in your muscle memory right to the browser it’s important to note that this is a full Cloud VM this is not limited to things that only run in the browser this is a real Linux machine behind the scenes that runs NYX and you have access to this in the full NYX workspace one of the major challenges When developing on the web for mobile apps is actually testing out your application so with idx we have a built-in Android
8:36 · emulator and we’ve also got several Google Integrations which make it easier to add apis like gemini or even deploy to Cloud run or Firebase hosting and just about every Google surface in 2024 Gemini is built on and
8:51 · you can get help in understanding generating and improving your code right inside idx there’s also Integrations that help it make you trouble shoot errors with AI and so much more in fact we just launched a feature that’s in preview where you can use Gemini to read and write files and run terminal commands some very exciting stuff and finally the team is actively working on realtime multiplayer collaboration getting this right has been tricky but the team is working really hard on it so now let’s take a look at nxs in idx we use a file called dev.
9:24 · NX this is what you share across team and it saves inside of your get repo David East puts it in a great way def. n is like a package Json for your entire development environment or in this case pups Cel and a way another way to think about it is where terraform is infrastructure as code this is for your production environment dev.
9:49 · NX is a Dev environment as codee for a development environment de. next Define just about everything you need to work and run your app in the cloud from system packages and services to compiler tool trains and local database and providers to Ida extensions and also language support and debugging to the specific wiring needed to boot up your front end and backend service automatically so you can preview your app this is all defined in one file and
10:23 · one thing to important to note here is dev. Nix is built on the open source Nick ecosystem so there’s already an exist in deep Community to pull from that we can run the world software in this kind of environment so let’s take a look at this example this is from our official data connect template it starts by specifying the Nyx Channel which is 23. uh 11 in
10:45 · this case it uses a specific version here so we can have reproducibility this is your so your Dev environment work the same two years later one thing about NYX is we have NYX channels and so anytime you want to upgrade and you maybe want to check and see if like you’re using Deno and you want to make sure it’s using the right version you can go update your channel and all your dependencies will work better
11:09 · together next this is where all the system packages you want are installed and are available here we’re specifying that we want no js20 installed but you could also add Java python Ruby go and Russ and any other compiler tool chain out there usually just with one line next we have a lot of common services that we want to make sure that we install in Buddha when our workspace starts so we can do this with just one line of code or you could also ensure that you have maybe PG Vector installed
11:37 · and enabled and even pre-seeding your database we could even load Docker and Rus and have this all seated right into an our application next we have IDE extensions now because ID idx is built on top of vs code we support most of the extensions that people are going to want one of the caveats though is that idx and any other for CVS code relies on open vsx for the published extensions these usually not a problem because most extensions are duly
12:07 · published now we have two life cycle Hooks oncreate and onart oncreate is when the user first creates their workspace template and it’s the first time that they’re booting it inside of idx it lets you do a one-time setup like running or installing or CD your database and the second is a life life cycle hook called on start this is not here but it’s particularly useful for every time that your application starts and you boot up your workspace again in this case uh
12:37 · since we’re not we’re using the data connect template we only use the install scripts in the mpm1 and so we just Boot It Up Inside the preview section and speaking of which so we have a preview section and this is where you can Define the Android and uh web
12:54 · previews the web preview boots up your app on an HTTP server and shows it inside of an embedded browser inside the IDE and there’s also an Android preview which runs inside of an Android emulator and it is a full Android emulator that you can do anything you would do locally you’re what you’re seeing here is a data connects template called npm runev on the command line it’ll ensure that you run the preview server on a specific Port but that’s about the only restriction now there’s so much more to dev.
13:26 · NX and if you want to learn more I highly suggest you check out the idx blog uh and David just did a really awesome video recently about it as well so next let’s learn about idx and flutter you can get started today with flutter and idx using our default flutter template or you can clone any flutter repo as long as you add the correct dev. n file but first I want to quickly demo a fun use case that should apply to a lot of you you can enable flutter or Dart uh
13:58 · for Developers right away on any Pub package right in the browser without installing anything so I am going to share this real quick
14:32 · okay awesome so what I have here is just a blank uh idx workspace with the um the default flutter uh dev. next already installed I removed the default flutter app just uh to show it here so what I’m going to do is do uh flutter create SLT template plugin
14:57 · ffi platforms Android and we’ll install it locally uh actually we’ll do examp okay that that’s creating um what we’re going to do is uh we’re creating an ffi template if I don’t know if you’ve ever used this before but what’s cool is it uses uh C to be able to
15:26 · create your application uh plugin and call into it but what’s important about that is flutter needs to use and compile the C uh the C ffi plugin to load into inside your app so here we have the example and we need c the
15:45 · important thing about this is you know we need c on the machine to install but here’s a typical setup that most people are usually familiar with we have a flutter app or a flutter plugin with a example subdirectory so with idx it’s actually really easy to support this use case um
16:02 · what we do is we have this dev. next which is the default one you get with the template and we come down to the previews um one of the cool things about the preview section is you can comment out things that don’t make sense so for the ffi plugin since it’s only running on uh only supports native platforms we can common out um the web one and then
16:22 · the other thing we want to do is we actually want to run the subdirectory as opposed to parents so we can do is change working directory here we can do example and once we hit save we have this option to rebuild our environment this is what uh allows idx and Nyx to
16:42 · rebuild our OS declaratively and to be able to roll back if there’s any changes uh what’s really cool is it’s kind of almost like get uh if you ever use NYX you can literally roll back to snapshot so you’re always guaranteed to be in a working state or get back to one so here because we have uh the Android One open we noticed that it didn’t launch the web which is fine it is exactly what we want and um now it’s just compiling and running our application so it should just take a
17:14 · second and let me open up the examples well raise a hand if you’ve used the ffi plug-in template yet and flutter awesome should just be a second I also have a video demo just in
17:55 · case if it literally doesn’t start in the next 30 seconds oh the drys of live
18:27 · demos oh all right let me go forward but anyways what it does is it launches the uh flutter application on the example subdirectory and I’m just going to reload it just one more time just to make
18:53 · sure there we go awesome so this is uh when the app boots up we actually installing and running the application but this required compiling the package which then compiled the native C tool train so uh super exciting but it’s kind of showing that you can use native dependencies already out of the box but also be able to support uh your flutter
19:22 · package let me show the tab again okay cool um so with idx we can
19:39 · also add an open and idx button directly on your read me which will open up your idx workspace the important thing here is that you as a library author can set up the de development environment because you know what Native tooling is needed to get the set up we can also use this online configurator which makes it super easy to build an add the button into your docs to find this you can go to the idx documentation on developers.google.com idxg openin idx uh this will also work
20:09 · in both light mode and dark mode so uh uh I I use it all the time to to make these quickly next I want to talk about Native tools and flutter when you’re building production applications sometimes you need native tool chains that exist beyond what flutter and dart provide this could be rust plugins or even build ffi plugins with C so I have one last demo and I think that this will also be a cool one to show uh let me pull this over
20:43 · here who you has used a SQL light before or even Vector databases awesome Okay cool so uh this next demo is uh if anybody’s heard of sqlite V
21:00 · um yes cool uh sqlite VC is a a really cool way how you can uh do Vector embeddings directly in sqlite and what I have here is not only uh sqlite working in flutter but it’s sqlite working in flutter through an ffi plugin built in C
21:18 · which is then compiled from a rust host so you have a rust project compiling a c project compiling all the way down to ffi plugin but what’s cool is this is fully extensible so here we have a really uh large amount of dependencies that we need to bring in but NYX makes it super uh Compact and easy to include these we even can specify custom subdirectories We Can Vendor and have all of our hooks so this is just I wanted to show kind of like a more complete example of uh idx and Native
21:49 · tool chains but what’s awesome is like this is something I actually needed to use because I ran into trying to get rust installed also working with SQL light on my local machine while working with Homebrew and I’m like on a Mac but I needed an environment that compiled this with Linux because the library author is using Linux to build the application so what was cool is I was able to basically specify all the L uh
22:13 · Linux dependencies and then now I can be building and testing it running it right in the browser so uh all that to say is uh there are so many really cool things that you can do uh when you have one file to configure
22:35 · everything stop this and show here so that’s um pretty much everything I wanted to uh cover today if you um didn’t see it already make sure you go to ID ex. google.com new flutter and I I’m also happy to answer a couple questions about idx but uh thanks so much for having me I can’t wait to uh talk more about
23:07 · it all right any questions yeah because last time with short with chrome short and that you mean opening up idx but sshing into another workspace yeah just like
23:33 · yeah I would love to explore that option I don’t think the de team is explore sshing from another machine with that but yeah I think that’s it should be possible now with a lot of the things we got it with the host layer so yeah comp with shortcuts yeah that they’ve also been improving the shortcuts a lot yeah any other questions yeah how well paid or not well paid we develop really want my locals code I also find super
24:05 · cool yeah so uh one of the cool things about the dev. NX is you just check it into GitHub so there’s a world in which you have your project checked out both locally and in in idx you can commit and pull changes all right like with GitHub so uh it’s actually what I use for a lot of my flow is I’ll I’ll like to test my app like in a Linux environment make sure it’s building and then that also helps with GitHub access and other stuff too and then I have my local environment for a snapshot or branches that I’m working on yeah other questions follow
24:37 · to that so do you have a giup plugin sorry is it a giup sorry G plugin in the idx directly yeah you can just yeah we we support GitHub bitbucket and um gitlab yeah you can also do any public get repo but those are the ones that support authentication and committing back yeah it is just an kind of opinion on how what do you think this with workflow for cross platform and being B in use
25:09 · IX same thing with the B code and you have to go back to the X code but if you want to build on an iOS you have to use xcode anyway what do you think is the best best workflow would be to use idx and again use
25:24 · x yeah I think if you’re um if you’re building any kind of a solution that need needs to use like you know Mac OS and iOS um then you’re probably going to want be wanting to use a native tool chain right now um otherwise you can always do things like xcode Cloud build if you want to deploy it uh remotely and there’s like code magic too any other questions cool uh well definitely come find me after if you have any other questions that weren’t covered but uh yeah thank you so much