A quick tutorial showing you how to build a PWA with Polymer CLI and using Vaadin Elements. Source: github.com/vaa... Get started with Polymer: www.polymer-pr... Vaadin Elements: vaadin.com/ele...
Пікірлер: 54
@tonykempson43318 жыл бұрын
Great tutorial. Thank you! Please publish more if you have the time.
@smatthews19997 жыл бұрын
Hey Marcus. I just wanted to say thanks for this tutorial. Polymer seems like an awesome library. Unfortunately the people at google seems to be too busy (holding summits, and evangelizing) to come up with some simple straightforward instruction based on the recent toolset (like you did).... so thanks. I hope you do more. I would specifically like to see how to fill out the data in this app from a backend api, but then populate from cache once the network is shut off. I started on something using 'iron-ajax' and 'app-storage', but got lost. Docs are kind of sparse.
@marcushellberg137 жыл бұрын
Thanks, Sam. Good points, I'll add your ideas to my backlog! (which is unfortunately pretty long at the moment).
@smatthews19997 жыл бұрын
Since I wrote that I have, using your tutorial as a starting point, learned how to use service workers to cache the data coming from my api. Really enjoying the library.
@marcushellberg137 жыл бұрын
Cool. Did you run into any problems that you think might be worthwhile for me to make videos/tutorials about to help clarify for others?
@smatthews19997 жыл бұрын
Not really. I removed the localstorage stuff and added a call to my backend using iron-ajax... then I added a caching property to my sw-precache-config.js runtimeCaching: [{ urlPattern: /^http:\/\/localhost:12489\/api/, handler: 'fastest' }] What I wanted to do (but couldn't figure out) is how to update my UI with the results of the network api call, after the cache update. For example, using "fastest" as a cache option, typically the cache returns first and populates the UI. Then the network returns with any updated results and updates the cache. What I would like to hook into the network return and update the UI with any new results. Any ideas? I know I could use 'networkFirst' but I don't want to wait for the network to fail.
@NattapongPUN8 жыл бұрын
Very great tutorial, Please kind to do more VDO for education. Thanks :-)
@mr_thunderspank7 жыл бұрын
Marcus! You are the MAN! Great Tutorial, Can't wait to see more! What packages did you install on your atom for multi line copy and pasting and the 2 cursor inline typing . btw, would it screw anything up to use the firebase init code after the polymer init or vice versa? Id like to host with and store data with firebase.
@greggsworld44537 жыл бұрын
Help: When I click the Add Todo button it clears the form but doesnt add the items to the grid? Resolved: I realized I wasn't using the same grid version, i looked at the grid documentation, copied over the new html for it and it worked.
@jemma26078 жыл бұрын
Awesome, great tutorial! Develop a progressive web app means that we use things like push notifications, offline, local storage, right? I'm no clear about that. (Please excuse me if my english is that bad, I just make a effort)
@DirkBarchmann8 жыл бұрын
Nice tutorial. Thanks
@slym18757 жыл бұрын
Awesome tut! May I know what plugin you were using for autocompletion of link rel statements? Thanks!
@AZHARKHAN-fw5mv6 жыл бұрын
sir please make whole tutorial of polymer .
@jjyusuf8 жыл бұрын
Having trouble even getting npm to show that terminal on my mac its in my computer but I'm stuck
@samritijamwal4927 жыл бұрын
I am getting these 2 errors " Uncaught TypeError: Cannot read property 'forEach' of undefined " in vaadin-grid-table.html at line 496......" vaadin-grid-table.html:455 Uncaught TypeError: Cannot read property 'forEach' of null " could you plzz help me into this.thanks
@zlatkoiliev89277 жыл бұрын
Thanks Marcus, good tutorial, but what if I also want to add a remove button on each row, so when I click it I will be able to remove the completed task. Or maybe a check box that will mark the task as complete when checked?!?
@marcushellberg137 жыл бұрын
Basically what you need to do is add a renderer for that column, see cdn.vaadin.com/vaadin-core-elements/master/vaadin-grid/demo/formatting.html. Instead of creating a progress bar, you would just create a button. We are working on a 2.0 version of our grid that has a much easier declarative way of defining columns, if you want to play around with it check out cdn.vaadin.com/vaadin-core-elements/preview/vaadin-grid/demo/
@LangChainAI7 жыл бұрын
Hej, What editor are you using? Looks very cool, an :)
@marcushellberg137 жыл бұрын
Andrey Mark - Atom. Although I've since switched over to using VS Code
@LangChainAI7 жыл бұрын
Alright! A friend of me is using Atom and me VS :)
@caboclobao7 жыл бұрын
Hi Marcus, Your tutorial is very good! Congratulations. Do you develop custom applications? I need to develop an application and I'm not taking time to study. Thank you.
@marcushellberg137 жыл бұрын
Indeed we do, check out vaadin.com/consulting and get in touch!
@elhadiahmed37 жыл бұрын
Thank you for the tutorial, do you know what would be the best option to tackle form validation with polymer ?
@marcushellberg137 жыл бұрын
I think that token based authentication schemes make most sense for PWA. You could look into elements.polymer-project.org/elements/google-signin or something like Stormpath, Auth0 or rolling your own with JWT.
@karankochar43587 жыл бұрын
marcus thankyou for this tutorial ! i am running into a problem with vaadin-grid it is just displaying a blank box ,col names are also not showing up,i cross checked my imports ,they are write
@marcushellberg137 жыл бұрын
Hey. Sorry, I need to record a new video to use vaadin-grid 2 API. Please check the documentation and examples for the new API here meanwhile vaadin.com/elements/-/element/vaadin-grid#demos.
@mr_thunderspank7 жыл бұрын
github.com/vaadin/vaadin-grid/releases/tag/1.2.0-alpha1 because I am lazy.
@charlesd45727 жыл бұрын
Blimey could you not get the microphone further from the keys.
@StijnHommes2 жыл бұрын
And how do you build a real app instead of a fancy website?
@marcorosa96437 жыл бұрын
Great tutorial! what plugin are you using for code completion for the script??
can you do a tut using Polymer Starterkit and FIREBASE please
@mr_thunderspank7 жыл бұрын
www.polymer-project.org/1.0/start/toolbox/deploy
@trondnilsson44577 жыл бұрын
Fantastisk bra
@marcushellberg137 жыл бұрын
Tack!
@julianpedrodaga-ang30588 жыл бұрын
After polymer serve --open, it redirected me to an empty page. What do we think is the issue here?
@marcushellberg138 жыл бұрын
Check that the URL is correct (localhost:8080). Then check if you are getting any errors in the console. Sounds like you may have forgot to run bower install.
@tushant048 жыл бұрын
I am in the same boat. Refresh it and you will serve with the page, assuming there is no error.
@DrRobrez8 жыл бұрын
Have you found any tooling - atom or cli - that format custom-elements to your liking? eg indentation, etc
@marcushellberg138 жыл бұрын
I'm using Atom and atom-beautify (atom.io/packages/atom-beautify) mostly. I've also used IntelliJ/WebStorm, but it felt slower.
@DrRobrez8 жыл бұрын
thanks. yeah atom-beautify is the best I could find.. but it tends to do some things I'm not too keen on in certain scenarios (jsbeautify)
@marcushellberg138 жыл бұрын
Yeah. I did spend some time trying to adjust the settings before I got it working (nearly) as I wanted.
@satanas10087 жыл бұрын
Hi Marcus, thanks for the tutorial. I have a quick question: How the hell can I close the server once it's running? xD I've noticed the "^C" command but I can't realize how to make it works. Thanks in advance!
@marcushellberg137 жыл бұрын
That's Ctrl-C :)
@satanas10087 жыл бұрын
+Marcus Hellberg great! thanks dude!
@CarlMosca8 жыл бұрын
What about the code-completion in atom? atom polymer plugin?
@marcushellberg138 жыл бұрын
I'm using both polymer-snippets (github.com/robdodson/Atom-PolymerSnippets) and vaadin-elements-snippets (github.com/tehapo/atom-vaadin-elements-snippets).
@CarlMosca8 жыл бұрын
Thank you Marcus. Nice job!!
@AbinavSeelan7 жыл бұрын
What Atom theme are you using? =)
@8Trails507 жыл бұрын
He's using Atom Material theme, dark variant. atom.io/themes/atom-material-ui and atom.io/packages/atom-material-syntax-dark
@CarlMosca8 жыл бұрын
Do you have this code posted anywhere? It appears that there are some issues with the vaadin-grid component and the items not populating. github.com/vaadin/vaadin-grid/issues/349
@marcushellberg138 жыл бұрын
Added source to GitHub, it's in the description. I'm guessing you are not using vaadin-grid 1.1 - with 1.0 you had to notify the grid manually when you added items. Check the bower.json file
@CarlMosca8 жыл бұрын
Right you are, thanks again!!
@samritijamwal4927 жыл бұрын
I am getting these 2 errors " Uncaught TypeError: Cannot read property 'forEach' of undefined " in vaadin-grid-table.html at line 496......" vaadin-grid-table.html:455 Uncaught TypeError: Cannot read property 'forEach' of null " could you plzz help me into this.thanks