Recently I decided to check out VueJS 2.0. Since I still mostly work with various CMS systems (Wordpress, TYPO3, OctoberCMS, that kind of stuff) I wanted to try and implement a pjax like page loading. To my suprise, it is not as simple as I thought.
Is there a way to replace parts of the page and reinitialize the components in VueJS?
I should probably explain why I want to implement such a feature. In the last years I found that it is much easier and quicker to develop feature rich websites using a frontend framework. However, since most customers need a backend to manage their websites, using an already existing CMS is a no brainer.
In the past I used Angular to build the frontend. It worked suprisingly well, even with pjax, since it is possible to reinitialize parts of the page in Angular 1.0.
Angular 2.0 took a different approach and while I absolutely love what they have done with it, I do not think it is suitable for use in an enviroment, where most of the frontend is being rendered by the server. That's why I decided to check out VueJS.
I want to implement a pjax-like feature, because the HTML already gets rendered on the serverside and dynamically replacing parts of the page just looks cool :)
EDIT
Just to be clear, I am not talking about the jQuery pjax plugin, just about dynamically replacing parts of the page (which in the company I worked for before was simply referred to as "pjax" :P)
Yes, you can absolutely do that. You can structure your one page view with multiple components, and you can just reload the data of one component which will update only that component, or you can also have conditions with v-if, so that you can change which components will render dynamically.
Sample fiddle: http://jsfiddle.net/mimani/6dgbg2dL/
Sample fiddle simulating ajax with setTimeout: http://jsfiddle.net/6dgbg2dL/1/
You can use vuex to communication between multiple components, check one sample here.
Related
we like to build a new web application. The requiremts are to provide portlet like "windows" in the browser, where each window could show content from different backends like a CMS, Business Data,...
The web app should be a Sing Page Application.
Currently we plan to build the web application with multiple REST based backends and a Javascript frontend framework like Angularjs, Angular 2 or React..
So here my questions:
Do you think that's possible with these techniques? Or do you think we need some kind of PortalServer?
One goal would be, to deliver some kind of API to the developers, where different developers could simpley create new portlets, without editing in one big html file. (So the developers should deliver only a partial html file which is rendered into a portlet.)
Would that be posible?
If you think, this will be posible, could you provide me link to some sample apps, which do this? And which JS framework would you prefer to take?
Many thanks for your help, and if the questions are to unspecific, feel free to tell me, to give you more input!
Regards,
Markus
I think this could be done (without a portlet container), not easily though.
First of all the Javascript Framework choice is important.
I am not an expert in Angular 2, but I think this could be the perfect choice. Why? Because in Angular 2 you have modules, where you encapsulate all the logic/dependencies/view, so this might mapp perfectly to your "portlet/window" approach.
No need to edit any HTML file, you just add the Angular 2 component each time you want to add a new portlet.
You could also try Angular 1.x and implement each "portlet" as a directive, giving the template as a parameter, as well as the depencies, so the developer could customize each portlet.
You can get the windows user experiencie with Javascript, even with Jquery
http://jqueryui.com/sortable/#portlets
so this is manageable.
Good luck
I read on the FAQs of Angular that "Angular can use jQuery if it's present in your app when the application is being bootstrapped".
My question is, is it a good practice or would there be any conflict or performance issue if a site contains jquery and angularjs scripts?
I plan to build a site that would contain both jquery and angularjs.
The reason for this is that I plan to use jquery mostly for plugins like carousel, slideshow, lightbox, calendar, form validation, etc. and angularjs will be mostly used for data binding. (mostly ajax request then bind it a table using ng-repeat, etc)
Do you think this is a good approach or should I just stick with only one (jquery or angular) to do all the process?
This is because I'm not sure how much plugins like carousel, slideshow, lightbox, etc. are available in angular and if I would be able to find such plugins that may be present in jquery but not in angular.
Thanks a lot!
From a technical point of view it is no problem to use AngularJS along with jQuery. In fact Angular itself contains a light version of jQuery: jqLite. So you never really use it completely without jQuery. For example basic selectors are always available. However, this is not sufficient for running your jQuery plugins.
From an architectural point of view, mixing jQuery and Angular can be confusing. Certain things can be done the "jQuery way" or the "Angular way" -- such as attaching a click handler to an element. If you include jQuery, you should be consistent with regard to these issues. I suggest you do it the Angular way (e.g. use ng-click in your templates instead of $(selector).on('click',...) in your directive's link function -- or even worse in services or elsewhere).
In your case it is justified to use both together. There are tons of great jQuery plugins and there isn't an Angular version for all of them yet. I would include jQuery only for those plugins and discipline myself not to use jQuery features apart from that.
So obviously, you'll get a hit from initial loading of your site, because not only will you be getting Angular scripts you'll also be calling for jQuery scripts.
There is no problem with you doing this, it is something you'll have to weigh up, pros and cons.
As for this:
The reason for this is that I plan to use jquery mostly for plugins
like carousel, slideshow, lightbox, calendar, form validation, etc.
and angularjs will be mostly used for data binding. (mostly ajax
request then bind it a table using ng-repeat, etc)
So with a bit of searching (ui bootstrap) you'll find that stuff like carousel, slideshow, lightbox, calendar can all be done with Angular Directives (Angular's way of interacting with the DOM). I created a massive widget drag and drop screen all with Angular - no jQuery. So what you can achieve is limitless* and is a lot easier to do with straight Angular because you're less likely to run into digest cycle issues.
Form validation what an interesting point, I believe this to be a pain point for most web developers for years. What is nice about Angular is this comes supported straight out of the box. And it is good (and symmantic). Take email validation for example:
<input type="email" ng-model="person.email" ng-required />
Angular will automatically regex this email to check it is valid. And it will also make sure there is a value. The power doesn't stop there. Like I said it is extensively supported out of the box.
The advice I can give you is, search google for Angular components, test them out before making your decision. But I can assure you that, I have done everything you're talking about purely in Angular.
But the joy of programming that it is entirely up to you!
* you imaginations the limit, angular will find ways to limit you..... etc. etc.
This is not recommended. BTW, jQlite is already included in Angular...
It is not a good practice to use jquery with an angular js.Angular consist of almost all the functionalities that you can get from jquery.
Although if you have some specific scenarios where you need the strongly type model binding of angular js and you want to use jquery for your other work then you can use both in a single project.
I used AJAX a lot.Its good not to reload a page ,just a part of page without even knowing to user.
I saw lots of sites using Angular JS and what i found common in them is :
1.All use AJAX stuff which is angular js based.
2.Most of the website didnt use reload method to open pages , it smoothly jumps from page 1 to 2.
My question is : Is Angular JS an alternative to traditional jQuery AJAX call & page navigation without reload ?
I didnt find this question answered anywhere.Thanks.
Its not really an alternative but a framework. Angular uses ajax like functionality and indeed contains a light jquery implementation within itself. It is a whole lot more though as its a MVC framework and amongst others some notable features are two way data binding, directives (adding features if you will to html) etc
No It is not. Actually, AngularJs is a framework suits for single page applications ans MVC design pattern and tries to include everything it needs in itself without using any other libraries. Along with AngularJs you can use other libraries such as jquery but in order to keep your codes clear and being maintained easily later, it's a good practice to work with angularjs functions.
I just wondering what is the technique of creating a single page website by using javascript without using framework like ember js / angular js.
For example in php like they can get
example.com?view=homepage
Can easily get the view and load/display homepage and load homepage's content.
What if in javascript if want to load another page/content?Any technique for building it?
I just building with a simple function like
$("#otherpage").hide();
$("#homepage").show();
I don't know is it the best way to develop a javascript single website page with this way?Or any technique that you all can suggest, cause I need learn from basic, need use javascript to explore and create a single app page without php.
Thanks lot
If it was that easy, do you really think Ember, Spine and Angular would be that widely used?
Snarky comment aside, building a page that refreshes like what you've done, while simple and rather easy to modify, falls very short on quite a few things:
For sites larger than a couple of pages, your HTML markup will become MASSIVE. Not just that, but you'll have to run every single piece of code on every page...per page. Say hi to insane overhead, both on bandwidth and on server-side processing, even with caching.
If you want to dynamically update part of a page, you'll need to use AJAX anyway. Why would it suck to write stuff using an MVC approach from the get-go, rendering data as you go along with AJAX, rather than brute-feeding the entire DOM?
What is the problem with Angular, anyway? Widely used, bug-free, unit-tested, built by reliable people, and if a bug does go through, you can be sure that the community will fix it quicker than you could
If the last comment didn't dissuade you from building your own to replace an already-existing platform, I would strongly recommend you build your JS to be fed data (JSON or otherwise) from your server and to dynamically update the page. You might not want the full-blown MVC approach, but at least the MV part of it. This will also allow modularity.
I have heard a lot about backbone.js and quite frankly I don't understand its concept. Does it require that all the elements should be in single page to work out with its animations and effects ? Or it can grab items from server and load it with transition or i mean different pages but make look like a single page. I didn't understand its concept well, so that's why i am asking. What i am looking for is to combine backbone or any other javascript framework to work with a rails project, that could give some ease transition across pages and can give native application look.
Backbone is also here to give you structure by being MVC, and it allows to communicate in a really simple way with the server. You'll be able to update / fetch / save your data (your rails models for example) on the server. So you'll need it if you want your user to work on an Ajax page without having to reload the page.
For example, you'll fetch all your data from the server when the page loads and then you'll have access to all attributes of your models and will be able to modify it and save it to the server.
Moreover, if you want your models to appear with transition, as Backbone is MVC, you'll be able to make that easily. As you have to choose when and where your views will appear on the DOM, you'll be able to put transition at that time.
By the way, Backbone works really great with Rails!
Backbone.js is all about data to be used in some way from your users, think about it as ActiveRecord plus Sinatra (or rails) on a browser, infact, the framework will give you a way to handle your data inside a browser instead of the server.
If you are looking for a simple way to add transitions to your existing app/website you could use a jquery plugin like Pagify (it rely on $.getHtml()) modifying it to get a fragment of the subpages like my (buggy) fork.