[Discussion] Begginers project guide

[a47ae]

In the last time, I often read questions asking for a more comprehensive guide on how to start working with Quasar and/or some example code which goes beyond the basic template.

Although lots of this are more issues with Webpack / Vue Router and Vue.js itself, I thought it might be a good Idea to collect some ideas on developing an example project that describes in detail how to start a project with Quasar, how to develop certain often requested features, and finally how to build your app.

So this is why I created this topic to gather input on what you would like to see in this guide.
Please keep in mind, that even if this guide should describe the making of a specific app it should be as generic as possible or at least use only very common third party libraries / APIs. For example, for authentication, we shouldn’t describe how to do authentication with a Laravel / Django / Rails project, but instead either use Stubs to fake authentication calls or use some Service like Firebase or Auth0, which is easy to comprehend and do not distract from other stuff.

Let me know your ideas, opinions on that and maybe together we can build an awesome guide to encourage more developers to give Quasar a try!

[donpuerto]

Tutorial from scratch to deployment? using Firebase as backend

[a47ae]

@donpuerto Yeah, the point is what includes “from scratch to deployment” for you?
I mean you could just run quasar init default my-project and you have a running project.
So it would be interesting with which things people struggle, for example using QLayout, adding authentication customizing the app, building you own components and so on.

[moringaman]

I have come from web to mobile app development without any real knowledge of cordova, nativescript or mobile deployment workflows as I would imagine have most people who are using quasar for mobile app development using Vuejs.

I might be wrong but I do not envisage that many people from an ionic, react native or even swift background would use quasar and it’s for this reason that I think most would be coming from a similar discipline to that which I came from.

That said these are the things that I have ben struggling with thus far, after circa 2 weeks.

• Prerequisite knowledge

• Remote debugging for devices iOS

• “Development” certificate and a matching “Development” mobile provisioning file (what is this and how do you create one?)

• Xcode? what role if, any does this play in development/pre-deployment

• Deploying your app using Phonegap Build (https://build.phonegap.com) How to?

This is all knowledge that as a non mobile developer I do not possess and I am sure that there are more things that I need to know but just don’t know yet. I am pretty sure this is all outside the scope of the Quasar Framework project, but it would i think we useful to be able to have a guide as to how you take Quasar from the initial cli init and cordova wrap through to build and deployment to the iOS/Google play store.

[a47ae]

@moringaman thank you for your feedback!
I agree that the iOS side of deployment could be more documented, but maybe that should belong in a different guide because Quasar is not only a Cordova framework but more a cross platform (web) framework. If we would write a beginner project guide, it would be hard to document all that for both iOS and Android. So I would suggest that your points should be added to the existing Cordova guide and the beginner project guide should focus more on showcasing the unique features of Quasar, what do you think of this?

[a47ae]

@anna-quynh Hey, I am sorry, but I think you send this to the wrong person, @moringaman asked about deployment, I asked about potential stuff that could belong in a beginners guide.

Edit: Okay, from the site and the times posted I guess that’s just a spam account?

[danielo515]

Hello.
Something that I think it will take advantage of a more detailed guide is customization. It is only outlined in the docs and a more practical and detailed approach will be very useful.

Also showing beginners to think our of the box or how to go beyond the basic examples may be very beneficial. For example, reading the documentation/guide one may think that only q-lists are allowed inside sidebar, when you can actually put whatever you want. Another example is the vue-router view, it is not mandatory to place it on the main section, you can place it whenever makes sense .

More detailed layout-ing is also required. Yes, layout and slots are described , but how do you structure things inside each section/slot ? Are cards the only way ? Should I create my own components?

Some Do’s and Don’t s will be also a good thing. For example, when Vue router is an overkill where you may be fine with just a couple of tabs ?

As an extra (last and small section) I would like to see some how to about how to integrate stuff from other Vue libraries and maybe some other popular libraries (D3?)

Thanks and regards

[a47ae]

@danielo515 Thank you for your detailed answer!

These are exactly the points I am looking for. For custom components / customization I am already working on a separate guide which will soon be available in the official docs, but I guess parts of this (especially about the customization) could also go in this guide.

The “thinking outside the box / docs” part is a really good point. Quasar is really flexible, but to there is no way to describe all of the options in the docs. So we have to encourage people to try things and maybe even look in Quasars source code.

Do’s and don’ts will also go on my list, alltough I think this inne is a bit tricky, because Quasar should not be hardly opinionated (?) and if you apply best bractises prematurely it can go in the opposite direction.

Last point, do you have any idea for an example project, as I think this should be a real simple project instead of a collection of guides? Of course we could do a Todo list, but maybe there are mor interesting examples.

Again thank you for your input!

[guyulmaz]

An example project:
Golang or c# backend
gRPC and protobuf as service
oauth2 authentication
TLS security

[a47ae]

@guyulmaz These are all very specific backend things. This guide should be about Quasar and as generic for its backend as possible because I don’t expect that the majority of Quasar users uses Golang with protobufs as their backend.

@anna-quynh Then I have to apologize to you. It was just a bit strange because you posted the same thing three times and it was a bit out of context. If this is your platform you want to promote please post it in Show & Tell

[danielo515]

Hello again @a47ae
Glad you liked my feedback. About what kin of project we can start with, I have a suggestion: a notetaking app.
While it may look very similar to a todo-list it has several challenges that make it more suitable for showcasing:

• Toolbars: Any good note-taking app will take advantage of toolbars, specially on desktop environments
• Routing: Each note can have it’s own route. This leads to possible dynamic routes
• Sub-routing: Each note should have a view mode and an edit mode. Using different routes for each will make sense
• Local Storage While a todo-list may require this too it makes much more sense in this kind of app
• Real differentiation between desktop and mobile: A todo-app could look exactly the same on mobile and on desktop (despite margins) and nobody will see a problem. However, in a note-taking app on desktop you want to take advantage of the extra screen size, so this will force us to take in account the different layouts
• Third party integration: It will be cool to have codemirror or monaco editor integrated in such app. The provided editors by quasar are not very suitable for the task, so integrating a third party one makes sense, and will help newcomers see that it’s possible (and makes sense) to integrate third party apps.
• Nested route views: When you open a note for editing you may have a preview of it on a nested route-view so we can re-use the same component for both the view only route and the edit with preview
• Vuex integration: Using vuex on a todo app may look overkill, in this kind of app it makes A LOT of sense
• Connect with backends: people will want to take their notes to different devices, a backend service will be required
• Offline first required: Who may expect a note-taking app to require internet connection ? Implementing offline first will be a very good exercise that should be easy with the new PWA template
• electron wrapper: If the tool is good enough to look like a native windows or mac app, why not wrap it and ship it? This kind of app makes sense as a desktop app

Hope my reasoning makes sense.

About showing how to think out of the box, integrating third party editors is one example. Another thing may be how to use layout components out of it’s tipical container, like QITem, QCards on sidebars and that kind of stuff.

Something that is in the line of what I’m talking about can be seen here:
http://danielorodriguez.com/JSONTools/#/help
It’s a collection of tools for operating JSON arrays (usual on the NOSQL world)

Regards

[a47ae]

Wow, I really appreciate your post!
These are some good points and ideas and would make a good example of a Quasar project.

I talked to Razvan earlier and he had the idea of building an issue helper like the Vue.js one, because that is a rather simple project and also helpful for the Quasar team.

But I really like your ideas for a Quasar note taking app, so maybe we will build both, but the note taking app will be the advanced project guide, because with things like Vuex and advanced routing some beginners may be overwhelmed.

[krean]

@a47ae How is the project going? Could you give us some update maybe?