i'm starting to develop an app using Laravel, Vuejs, and blade for template engine.
Firstly, i'm new in Vuejs's world, and maybe is a simple task, but i didn't find an answer in any discussion.
The core idea is to use .blade page, and, when i need vuejs components, add them in the page passing server's data with props array. Everything's working fine, but after playing around for a bit, i've noticed one probably furure problem.
In the laravel's documentation, we register the component, or whatever Vue setting in app.js: then, using laravel mix, we boundle in a single file all the code(e.g imports, requires, different js pages...), and finally we load "app.[hash].js" in our page with a script tag. I've noticed that even only using a few vue components, app.js growing very fast(of course, we import every components in one file), even dinamically importing components and not setting them globally.
My question is: is normal to boundle all js code in a single file(having a large file), or is there a way to import vue component only when they are added in the .blade files, maybe with some sort of webpack(laravel mix) setting?
Thanks in advance for any support.
Found the solution after post the question:
Marcin and GoogleMac's answer might be both right, but i found an interesting topic about that, and i 'd want to share for anyone could have my problem. I suggest to check out this link https://alexjoverm.github.io/2017/07/16/Lazy-load-in-Vue-using-Webpack-s-code-splitting/, where they talk about code splitting.
I think this could be the best approach, mostly because even in vue's documentation talks about(detail here https://v2.vuejs.org/v2/guide/components.html#Async-Components).
My bad for haven't checked in detail documentations.
It's good to bundle js code in a single file because it's going to be downloaded only one time by the browser and cached.
JavaScript code is not that that big so don't bother yourself with it.
I agree with Marcin's answer, but if you are wanting a workaround, comment out Laravel's built in Vue registration in app.js and just use a cdn in your blade files.
You may add multiple app.js (including multiple router, vuex if needed).
Entry them separately on webpack.mix.js.
And then include suitable app.js file as needed in the blade file.
It's much easier I think if you don't want share some .js code with any user who will not use those component ever.
NB: Of course lazy loading is a solution, but that this is more convenient solution to me as I'll not deliver any component to the user who don't need it.
Related
I have a working NUXT application with various pages and components in universal mode. Now I need to render one of the components on another static html site.
I can easily export a regular Vue application's component just adding a bundle script and div element to which the components renders.
But how can I do it with NUXT?
Nuxt is not really meant for a quick plug (with a script tag) but for an SSR usage (with some NodeJS build), so I highly doubt that you can make this. Or at least, I don't really see the point if you only use it as an SPA component.
If somebody knows a solution to make it work, I'm all yours on your opinion on this.
Understanding Laravel Mix
I am currently in the process of migrating one of my websites to Laravel in order to make it a little more maintainable in future... I have plenty of experience building API's with Laravel but I have very limited experience building websites with Laravel and resultantly I am in need of a little bit of guidance from another pro.
In short, I would very much appreciate answers to the following very simple questions if anyone can spare me a couple of mins...
File based JS & CSS instead of App based
I like to write my JS and CSS files in a particular way where each page has their own specific files relevant to the page. For example, about.php might have the following dependencies:
JS:
jquery.js
any_other_third_party_library.js
app.js (global functions)
about.js (page specific functions)
CSS:
some_third_party_library.css
app.css (global styles)
about.css (page specific styles)
On my own framework, the above would be combined and minified into one file for JS and one file for CSS. From what I understand, Laravel Mix does exactly this...
However, as far as I can see, the way to do this would be as follows:
webpack.mix.js:
// About
mix.scripts([
'resources/assets/js/app.js',
'resources/assets/js/about/about.js'
], 'public/js/about/about.js');
Very simply, what I would like to know; is the above the correct way to go about this? Is there a better, more efficient, way to automate this for each page?
What are the bootstrap.js and app.js files?
From what I can see, these files just load dependencies but this is a little confusing as some dependencies might be page specific... Please can someone explain in a little further detail what these files are for? Or at least, what the difference is between them...
Getting rid of Vue
I have no interest in using Vue in my project so I have deleted the following files:
/components/Example.vue
and the Vue code in app.js
Does this matter in any way?
You'll bundle up all your styles and scripts a single file each and serve them to the client minified.
For front end assets, call mix.sass('resources/assets/sass/app.scss'). In that entry point to your styles you will be able to import your other stylesheets as you need using Sass's #import 'about'; syntax. (Rename your other CSS files to end in .scss too).
For your back end assets, call mix.js('resources/assets/js/app.js'). Then, similarly you can import other JavaScript modules using import './about.js';. You may want to look up ES2015 modules so you can learn how to write modular JavaScript.
Read through the bootstrap.js file to see how Laravel hooks up jQuery and Vue by default. You don't need any of this, so remove whatever you don't want or delete the entire file if you don't need any of it.
Vue comes out of the box with Laravel but it's just a suggestion, you can replace it with your own front end framework of choice or rip it out and replace it with nothing. Up to you.
Edit: Long story short; use mix.sass and mix.js, read up on using Sass and ES2015 modules to write awesome code.
I am very new to Firebase (just learning the ropes). It seems to be very simple to pick up, but I have only one question that I know can be answered here.
In all of the basic tutorials, that is, where their web app is only one page, they have only one file (app.js) to reference for information.
My question is this: Does every single page within a web project reference this one JavaScript file? As in does index.html call app.js as well as page1.html, page2.html, and so on?
It seems like this file could be heavily loaded with tasks if it is apart of any complex application. Is there a better way to do this? Thanks!
If you are using Angular, tutorials such as the one below suggest that you would have a .js file for each view.
Read more here: https://code.tutsplus.com/tutorials/creating-a-web-app-from-scratch-using-angularjs-and-firebase--cms-22391
What I found is that there is no real answer for this question. It varies based on the complexity of the project. For my particular case, I decided to keep larger functions and operations within the app.js file, and simply call them from smaller .js files. This allowed me to keep everything organized and efficient.
I am not new to React philosophy, and have been reading and paying attention to the community for quite some time now, but would still consider myself a beginner when it comes to actually building something. Therefore, I have decided as a little hobby project I need to actually just start building something instead of reading countless articles on how it's done.
I have no clue what the actual application is going to do yet, but what I have built now is good enough to ask my pressing questions on how to structure it with best current practices in mind.
Current app structure
Right now, this is the current layout structure of my application.
As of right now, I downloaded a starter template that already had a webpack config written for me, so for now, I would ignore the assets folder within the "src" folder, since I am not even using it to serve my css and images. Those are being served from the dist folder, which I know is not the right way to do it, but hey I can only do so much at once.
The Important Stuff
What I need most help with from you guys is the actual structuring of my components. I have been reading that CSS Modules is a good way to go, so I was looking to do something like that.
How The App Currently Works
Index.js contains the routing information. I am using React Router.
App.js is the main component for the application.
As you can see, my navbar component sits alongside the App.js file, as I plan to add a footer component there as well. Those two components are global across the entire app, and will always be in the same place in the browser. (Not sure if that's good practice.)
Inside of App.js, I render the navbar component, and include {this.props.children} which just renders content from React Router.
From there, I basically have created two other folders within the components folder, titled "landing" & "login". Those folders contain a main component, and then render other child components within them. I was thinking that each folder should get its own css file.
As I continue to build out app features and components, is this a good format to follow? Logistically speaking, I have no clue how to configure the css files to be served for each of these modules yet, but was hoping my theory of how it works is correct.
Wrap Up
Just to make sure I am being crystal clear, say for example I decide I want to build a dashboard component now. From what I just explained, my thought process would be to create a subfolder within the main components folder titled "dashboard", create a parent component for it, and then create several other child components. Then I would plop a .css file in there as well.
Here is a link to the github repo so you can see exactly how it's layed out.
Github Repo
Working version of the app
Apologize for the lengthy question, but I wanted to ensure I covered all of my concerns properly. Any other suggestions are very welcome.
There is no right or wrong answer or this one. You'll have to adapt to your project needs and notice what works best and what not.
In practice, some structures have proven to be quite useful:
Splitting by subject:
This generally means to have a folder for each 'type' or subject in your app. For example: components, utils, media and so on.
The components folder could contain other folders to group components together with their .css files, tests and other complementary code.
This structure especially fits a state handling framework like redux where you would probably want a folder for actions and action creators, a folder for reducers, a folder for store configuration and creating and so on..
Splitting by app-part
This means that you split your code in respect to logical parts of your app. Say you have a login form with a splash screen animation, all of those would be in a 'login' folder. If you have a user profile page with some dashboards then all of those and the components that they use will go into a 'user_profile' folder.
Do not torture yourself too much about are you doing this in the perfect way, because there is no perfect way. Just choose a reasonable structure the fits your project needs and go with it.
The important thing is to watch for the cases when your structure is breaking down. For example if you see that you are making changes in your application and you see that your current structure is making it difficult to refactor or to add features, or maybe it became too messy, then consider making changes to the way you structure your project.
How to organize Vue-JS project [files and directory]: Non Javascript way?
Coming from a non-javascript background, I found Vue.js very intuitive and easy to use. My earlier experience in Javascript is with JQuery and vanilla javascript on the browser.
I created an application using Vue , Vue-components and vue router. Everything works fine.
My problem is, I have ended up writing a lot of code in a single index.html file of my project. This file contains over 10 templates that I have created and attached to different component in my app. I want to know that is there a non-javascript way to organize these templates in seperate files.
I see that there are options using webpack and browserify to modularize the project. But coming from non javascript background, I don't find them intuitive. I don't want to go node - npm way because that has its own learning curve and moreover it downloads a dozen of files and dependencies in my project which I don't understand. I am old school and more comfortable downloading the files and including them in the webpages.
So probably, you understand where I am going to. I need a solution where I could put my templates as separate files and read those files in the different components.
What I have tried :
Declaring the templates inside my components. But writing all that html inside the component is not that clean. It also, makes my JS file too huge. I am better in putting all data in the index.html instead.
Storing template as smaller chunk "homepage.html","about.html" and in my components, using $.get / $.load to read different components in ready function of the component. This works but I still have to fire an additional ajax call for each component which is not efficient.
Please refrain from suggesting the obvious node-npm [webpack and browserify] way. I know thats what is supported by Vue but this needs a learning curve and complete setup. Answer to this question would actually help other developers who hesitate going the node-npm way.
Please shout back if you need more clarifications to the question.
The options you've mentioned are your only real ones... the HTML of the template needs to be available when it's needed, so you either have to have it within your html file off the bat, or load it using AJAX or an in-browser loader like RequireJS (and this extension that allows it to load HTML https://github.com/requirejs/text).
In-file templates make sense for very small projects. As your project grows, you'll need to start using the tools that are built for this. NPM rocks and every JS package that you'll ever need can be included in your project in seconds.
I highly encourage you to try the Vue CLI
It does use node, npm, webpack and downloads dozens of files. Which you've you've explicitly asked for not to use, so let me clarify:
The Vue CLI takes care of the complexity and configures webpack for you.
You don't even have to know it's using webpack.
It's very developer friendly (it even has a built-in gui) and lowers the barrier to entry compared configuring a webpack config.
I hope you'll also find it "intuitive and easy to use".