I really want to get going learning and using Angular2, but in its current state its quite bloated, which I find quite off-putting.
Is it possible to use Angular2 in a modular way? Instead of using the whole framework can I just pick modules like components and directives while leaving out other things such as http, routing, etc?
Yes, sure!
For this, you don't need to import corresponding JS files:
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script> <--- Don't use this one
<script src="node_modules/angular2/bundles/http.dev.js"></script> <--- Don't use this one
Related
I built a Vuejs App for House Plan. I've already use some optimisation way but I have two node modules whose size are far up to 20kb and I get a bad score on performance test with lighthouse on google. Here the following module :
dist\js\npm.bootstrap-vue.9bf0056f.js 228.65 KiB
dist\js\npm.vue-tel-input.4440bc34.js 181.81 KiB
Please is there a way to split this?
I initially started writing this answer as a "use async components" but I see that you have a problem with libraries that are huge (bootstrap-vue and vue-tel-input respectively), not eg. Vue Router views
Are you sure that you're importing eg. Bootstrap Vue components in an efficient way? Maybe you can avoid importing the enteriety of BootstrapVue and just use certain parts you need? https://bootstrap-vue.org/docs#tree-shaking-with-module-bundlers
See
https://github.com/bootstrap-vue/bootstrap-vue/issues/5439
As for vue-tel-input, are you using version 5? Looks like it's lighter. So hopefully it'll help you, since you can't really split someone else's library unless you fork it
https://github.com/iamstevendao/vue-tel-input/issues/213#issuecomment-764416297
How does one access the filters defined on a Vue component (globally or locally) from within the render function? Neither the documentation nor a dump of this offer much help. The first trivial answer is to put the filter functions in an export, but that defeats the purpose of the Vue filter functionality. The second trivial answer is to import Vue, but that defeats the purpose of asking this in the first place.
The code in question is in a Nuxt context. I defined the filters in a file ~/plugin/filters.js, and updated the plugins configuration point in nuxt.config.js to run ~/plugin/filters.
this.$options does not have a filters property (although its prototype does).
I'm assuming functional must be false, but an answer that works for functional components is acceptable.
I've been digging into vue.js for the last 3 days, working with a vue cli 3 testproject.
I've some experience in object oriented programming, but not much.
Still, the "generic" approach of vue seemed familiar to me, echoing practices I've already seen in OOP.
Still, there are a lot of things boggling my mind and one of them are props.
I've sifted through several tutorials, both video and written form. Here is one pretty short I've read recently which illustrates the situation as I see it pretty short and nicely: https://reactgo.com/vuejs-props-tutorial/
So, to my understanding, props are ESTABLISHED in what I would deem a PARENT if we were in OOP. In the tutorial above, the author created button.vue where the props are declared and then exported to post.vue.
This, in my opinion, makes button.vue the parent of post.vue because post.vue inherits from button.vue. However, in generic programming or at least in vue, its vice versa Oo
ALL tutorials now (would) call post.vue the parent, because it specifies the data for the props for example through the html.
Post.vue
<template>
<div>
<h1>My first post</h1>
<p>This a big post helps us to learn vue props</p>
<my-button name="Share"></my-button>
<my-button name="Like"></my-button>
<my-button name="Comment"></my-button>
</div>
</template>
<script>
import Button from './Button.vue'
export default{
components:{
'my-button':Button
}
}
</script>
This really blows my mind when it comes to more complex components, where a view (using the terms a project using routing) consists of a component which was manufactured through a chain of multiple components building on each other.
Something like this:
MyView->listBuilder->listData1
I'm really struggling to understand how the technical side of vue works here.
I might as well take it as a given, but I'm pretty sure it won't be long before I run into problems because components building on components building on components (and so on) try to resolve properties which simply are not there yet, because the sequence in which the components inherit from each other was all juggled up.
It probably isn't a very good idea to build long chains of components building on each other, but the need might arise to do so at some point and then I'd like to have a good understanding of the ways vue handles this.
Furthermore, I'd really like to know the upsides of this approach in vue/generic programming.
It reminds me of interfaces in OOP, because I can specify in childcomponents what the parentcomponents MUST work with.
Like artoju already mentioned, don`t strictly apply OOP mindset.
In your example i dont see any data definition or prop definition.
Your View Component "post.vue" is the Root/Parent, inside there you are importing your Button component therefor it`s a child of "post.vue". Nothing to overthink.
Maybe this link can help you a bit more: https://forum.vuejs.org/t/how-can-i-make-oop-user-interfaces/10512/7
I am dying here on lazily loading modules into angular-meteor 1.5.
So the Meteor Version is 1.4.2.3, meaning with ES2015, import, ui-router etc.
So far I've tried ocLazyLoad, angularAMD has a completely different syntax (with define(function()...) which I don't know how to "merge" with the Boilerplate App of Urigo's angular-meteor.
So in ocLazyLoad, I went by this https://github.com/alo/oclazyload-uirouter-component-routing-tests github example, since it is the only one I've found that has the ng 1.5 components and submodules instead of just lazily adding controllers to the main apps module.
When I try to implement this, ocLazyLoad logs that the js-file is loaded, but in the Sources-tab instead of the actual file, the js-file contains the whole meteor app.
Any idea on why that is or whether angularAMD works with angular-meteor or in general, how to make lazyLoading modules work?
It's not as natural as it should be because meteor doesn't support lazy loading yet. But here is a working solution:
If your are trying to use lazy loading on routes like this:
{ path: "myPath", loadChildren: "app/myModule/myModule.module#MyModule"}
You should use instead a callback to get the module using ES5 callbacks.
{path: "myPath", loadChildren: ()=> require('./myModule/myModule.module')["MyModule"] }
Hopefully will work for you as well. :)
Question answered on my post
I was introduced to wsf today and now I have to write some code in it as well.
I get the concept of "job" and appreciate the flexibility of "script".
What I am confused about is that if I want to use an external JavaScript file in more than one job then I have to include it in each job.
Is there a way to do this globally for the whole file?
I am looking into WCF as well, but it seems that even if I build the component I still have to include it in each job individually.
Any help or workaround would be appreciated.
<job id="CreateLogFile">
<script language="JScript" src="IncludeFile.js"/>
...
</job>
Are you looking for something like this?