I want to use Durandal.js to make single page responsive webapp. Can I use any version of Durandal.js or should I use some specific version?
Durandal is a SPA (or a large website that's dynamic in nature). Sites build using Durandal are responsive in their speed but not directly responsive to different browsers, resolutions and devices. This is handled by our friends at Bootstrap.
If you are making just one page advert for your company, use Bootstrap. If you're making a large application with many forms, questions and layouts, use Aurelia. Aurelia is a new shift on Durnadal that's using the latest design practices.
https://aurelia.io/home
https://en.wikipedia.org/wiki/Responsive_web_design
https://getbootstrap.com/docs/4.3/getting-started/introduction/
Related
Hello Gurus / AEM Experts.
I have a situation here and need your advise as to will it add value in performing responsive testing for AEM components.
Currently Our AEM application dev team uses AEM 6.2 for there component development. What I understand from them is they are using Bootstrap and developing the custom components. It could be a Tile , Button , Image , Hero component.
I belong to the testing team and do you see is it necessary to test the responsive design of the components ( using tools like Galen Galen Framework | Automated testing of responsive design )
My understanding is that the out-of- box components created in AEM are already comply to responsive design. Will that imply to the custom components.
Looking for your valuable inputs based upon which We could devise the next steps.
Thanks
Will that imply to the custom components.
Short answer: no, unless the devs have made those custom components responsive.
It depends on project requirement. In my current project custom components are responsive and we are doing responsive testing. We have used Galen for the automated testing of look and feel for responsive design.
I've been reading about Durandal and Aurelia every time I read something new on Javascript. I hear developers asking to upgrade from Durandal to Aurelia, or similar, on so many blogs. Although I do have an idea, I am confused about what the two really are and how they are related, or if at all they even are related.
Here's how I see it. Durandal is a lightweight SPA framework that allows you to leverage the best of other JS libraries and utilities to build an app. So it's not really a whole package in itself (unlike Angular), but can use different external JS libs - such as Knockout for binding, jQuery for DOM, Sammy for routing, etc.
Aurelia, on the other hand, is where the confusion comes in. Is it also an SPA framework? Or is it limited to being a client-side (front end) framework only? To add to my confusion there is a Durandal blog that talks only about Aurelia. I know from the internet that Rob Eisenberg worked on Durandal before he started working on Aurelia. So is Aurelia an upgrade of Durandal, or something completely unrelated?
I still have some questions but I'm guessing the structure of my question so far will be only asking for opinionated answers. So before this question is closed, any description, links and references in regard will be amazing. I'll be sure to update and add useful links here too.
According to Rob Eisenberg:
"Aurelia is just a vNext of Durandal. On occasion we've even called it Durandal Aurelia. Much like XBox 360 vs. XBox One. The web is significantly evolving, so we're evolving Durandal into Aurelia to match."
Aurelia, on the other hand, is where the confusion comes in. Is it
also an SPA framework? Or is it limited to being a client-side (front
end) framework only?
Yes, it is a SPA framework. Actually, it is a framework for building Javascript clients, it means you can develop apps for Browser, Desktop and Mobile. Take a look at this video https://channel9.msdn.com/Events/Seth-on-the-Road/DevIntersection-2015/Rob-Eisenberg-on-Aurelia
Different from Durandal, Aurelia comes with the full package, everything you need is there. However, it is perfectly pluggable and extensible, and you can combine any other technologies if necessary.
Here is description provided by the official site www.aurelia.io
What is Aurelia?
Well, it's actually simple. Aurelia is just JavaScript. However, it's not yesterday's JavaScript, but the JavaScript of tomorrow. By using modern tooling we've been able to write Aurelia from the ground up in ECMAScript 2016. This means we have native modules, classes, decorators and more at our disposal...and you have them too.
Not only is Aurelia written in modern and future JavaScript, but it also takes a modern approach to architecture. In the past, frameworks have been monolithic beasts. Not Aurelia though. It's built as a series of collaborating libraries. Taken together, they form a powerful and robust framework for building Single Page Apps (SPAs). However, Aurelia's libraries can often be used individually, in traditional web sites or even on the server-side through technologies like NodeJS."
Some of the greatest advantages of Aurelia (in my opinion) are:
Powerful Data-binding. Different from others frameworks like Angular, Aurelia uses new features of Javascript. So, all data-binding stuffs are usually faster in Aurelia (source http://blog.durandal.io/2015/12/04/aurelia-repaint-performance-rules/)
Simple Conventions and Simple Syntax. It is really easy to develop in Aurelia. There are a lot of features ready to use. If you want to overwrite some convention, usually 1 line of code is enough. (see http://aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.0.3/doc/article/getting-started)
Hope it helps!
I am a newbie to extjs and kind of new to javascript world also. I have developed applications in jsp/servlet, JSF etc.
We are planning to use extjs along with Sencha Architect to develop UIs for our application.
Being new I have several questions for which I am searching answers
Q1. How should we use Sencha Architect in multi developer environment in terms of versioning. Shall we checkin the Architect project into svn and ask each developer to work on same project.
Q2. What should be the structure of Sencha Architect project (Basically how to make sure each developer is working on his/her individual module without affecting others component).
Is there any best practice for this.
Q3. What is the best practice for developing an application which contains several pages along with navigation. Should we create a single html file (with lot of javascript to modify the body) or should we have multiple html?
yes, it should certainly be in source control. you will want developer-specific settings to not be in source control however.
the best way is to create an application "shell" with menu bars, and load in modules/plugins and have them register with the application, adding their own menus etc.
definitely a single page application. security remains on the server though (for example in your REST API). security is irrelevant on the client as they have control over source code. you should just hide functionality that a user should not use.
How to load different views into viewport?
I have 3 css files with me:
skeleton.css
base.css
layout.css
What I want to do is make my web site responsive.
For this, this css files are going to be used in order to make my site responsive.
I have gone through all of the 3 css and it contains media queries and many more.
I want to now that how to use or embed existing style.css with media queries?
how to apply media queries ?
and where to aply media queries?
Skeleton is a responsive CSS framework that works really well. Your best bet is to review the code on Dave's website at http://www.getskeleton.com/ - the code he has posted is very helpful and will give you a great start. I started with Skeleton (http://72t.net) and later moved to Bootstrap.
With all that said, depending on how the code was originally written, it may be a real task trying to convert an existing website to a responsive design. I have now done (or am doing) 4 responsive sites - in each case I found it easier to start from scratch - the original sites were done in Asp.Net with its appropriate bloat. the new sites are html5, CSS, JQuery and Ajax.
I've been looking over Sproutcore, Ember and Blossom and other competitive framework efforts (e.g. Sencha) to select for a HTML5 client side application project. The state, information, and documentation from these projects is a bit fragmented and in need of clarity, so I am presenting this to the community.
My project is to be a native-like HTML5 application with desktop level complexity in need of a complete application framework, that will work well on desktops and run with good speed on mobile devices with touch awareness. The widgets should be native-like (not web-like), but customizable so to be unique to the application.
Questions/framework Requirement:
Native vs. Web style Applications. Framework should make it easy to
build native-like user experiences with the ability to make a custom
native feel (not just wholly imitating mac/win/iOS). Some of the text
surrounding Ember indicates it is really meant for web-style apps - which given no
UI layer maybe goes without saying. Frameworks like Sencha, can it easily accommodate custom widgets?
Mobile Appropreatness. Framework should be appropreate for mobile devices and have facilities for touch input and
gestures.Several notes I've seen in my research indicate that Sproutcore and
Blossom aren't very appropreate for mobile, and that Ember is better
geared towards mobile (size?). It isn't clear whether the
touch/mobile libraries are very developed in Sproutcore/Blossom and if they will be supported it the
current state going forward. (and blossom compile to native is not acceptable). On the otherhand, Frameworks like Sencha, do they have the facility to work well on desktop as well as mobile?
Framework Completeness. The framework should be a fairly complete application framework, with desktop-like OO expectations and management for automatically and efficiently syncing, managing, and serializing the data model with the server. Not sure if there is much difference between Ember and Sproutcore, how do other efforts like Sencha stack up?
Your question covers a lot of ground. I will pick some quotes and answer them directly.
My project is to be a native-like HTML5 application with desktop level
complexity in need of a complete application framework
Ember.js specifically bills itself as a "web-style" framework, not a an RIA framework. That said, you can build anything you want, but you would be trailblazing.
Sproutcore bills itself as an RIA framework. You have complete control over the DOM, so if you can do it in the browser, you can do it in Sproutcore.
Ext-Js is also a good application framework for desktops (Sencha Touch is for Mobile). If you like the way its examples look, then its a good choice. You can of course customize the dom and write your own widgets.
Blossom is basically Sproutcore with a canvas based view layer. It just went into beta, so you would definitely be trailblazing if you went with it.
So, you can basically use any of the frameworks you mentioned for the RIA part of your enterprise. I would eliminate Ember.js simply because the framework itself purposes itself for web-style (e.g. twitter) as opposed to RIA (e.g. iCloud) apps, which is not what you want.
The widgets should be native-like (not web-like), but customizable so
to be unique to the application.
All three of your remaining options can do this. If you like Senchas widgets, its a good choice. I don't know if they are native enough for you. That said, with any of the remaining frameworks you can customize the DOM to your heart's content.
Mobile Appropreatness. Framework should be appropreate for mobile devices
This is a tough one. Sencha Touch (which is separate but similar to Ext-Js) is very popular and gets the job done. It is performant too; a non-trivial app ran fine on my original Droid (which surprised me).
Sproutcore is very heavy weight. It has mobile support (i.e. for touch events) but you need to very careful about the dom you create, so as not to overwhelm the browser. I wouldn't choose Sproutcore for mobile, although you could if you are very careful.
and blossom compile to native is not acceptable
That does not seem reasonable to me. To be clear, NONE of these frameworks run natively on mobile devices; they ALL run in the browser. Blossom comes closes as the canvas API is mapped directly to the native API, giving you a truly native app. The only way you could get closer would be to use objective-c/java for iOs and Android.
So basically, at this point your left with Sencha(Ext-Js) and Blossom. Blossom is still in Beta, you would be trailblazing if you tried it. Sencha is established, has great support (Blossom support is good on irc), and a large developer base.
So Sencha is the choice, unless you really want to be cutting edge, and take a little risk.
Troy. Indeed, ember can run with another view layer framework such as jQuery Mobile which can provide a "app-like" look and feel.There is a github project: https://github.com/LuisSala/emberjs-jqm. In my view, if you need very cool animation you can use blossom.If you want to build a app, SC or ember should be OK. I'll choose ember because it 's loosely coupled.