Microsoft Fluent Design for Web (CSS framework) [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
As Microsoft recently released a design system called "Fluent Design", is it appropriate to apply it on web design?
Most of my searching has been for all Microsoft platforms, C# app, F# etc..
I have never seen anything regarding in web design.

April 2020 Update primary destination for Fluent Design is Microsoft's Fluent Design System website.
For official web frameworks go to github repos:
Fluent UI - A set of React components for building Microsoft web experiences. Good support and big following.
Office UI Fabric with only includes grid, typography, icons and utilities. No component and no dependency on React. Not very well maintained.
Some tutorials are available here.

Take a look at Microsoft Web Framework for details on the components, HTML structure and CSS that you would use to meet Microsoft's web design principles.

just copy-paste from the bottom of the MWF homepage.
This site is restricted to use by Microsoft employees and authorized vendors. No materials or code from this site may be used on non-Microsoft websites. By entering this site, you confirm that you are a Microsoft employee or an authorized vendor working on behalf of Microsoft. You further agree that the materials and code constitute Microsoft’s intellectual property, are limited for use on Microsoft-operated websites, and are subject to the applicable agreements governing your employment or vendor relationship with Microsoft.

You can use this library for Reveal Effect in Fluent Design System.
And you need to wait for the backdrop-filter CSS supported for background blur effect.
https://github.com/d2phap/fluent-reveal-effect

I'm just quoting Microsoft here.
It is perfectly relevant to the web design. Since these are just principles and not specific to any platform. So if you are a web developer and like the Microsoft way of thinking. it is perfectly fine to build a Web UI framework around these principles.
Please check out this video in which your question has been discussed in the Q&A session (22:00).

Check out the Fluent Kit framework.
It is a Fluent Design extension to the current Bootstrap version, using jQuery, so should be an easy starting point for anybody, really. Also, it is very well documented and the "work in progress", so you can expect further functionalities as the design itself develops.
Important update: Fluent Kit, as well as the whole Nespero project is closed.

Update: Fluent design now supports web, Android and IOS. https://www.microsoft.com/design/fluent/#/
Update: a high quality 3rd party react component framework called react-uwp can be found here
Update: new website is at https://fluentweb.com/
Update: link is now dead, and https://getmwf.com doesn't mention fluent design anymore.
Microsoft has a web framework for its own employees and vendors.
Looks like they are introducing fluent design components to this framework.
https://fluent.getmwf.com/

Related

Should I use a native or a hybrid app for an an app based Online-Shop [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
I want to make an app were users can buy different products. I don't want that the app runs in the browser. That's why I would user a native or a hybrid app. The Shop has a lot of products with a lot of images and I want that the images were load from a web storage in the app.
Is this possible with an native app or should I use a hybrid? Or it is even possible?
Which programming language do I need for a hybrid app?
Native vs Hybrid App debate is a one which varies its outcome based on your priorities. You should always go for whatever best suits your needs. Some points to consider while choosing to go with Native or Hybrid are,
Development Time -
The foremost pointer to consider while Native vs Hybrid comparison is that the code is written individually for both Android and iOS platforms due to their technical variations in the former approach.
Whereas in case of Hybrid, a single code is written for both the platforms by the same developers which means you can build Hybrid apps for Android and iOS using the same codes.
Mobile App Cost -
As per the top mobile app development companies, app development with Hybrid approach can reduce the cost by 30%-35% when compared to that of Native app development for the same app project.
UI/UX Experience/Performance -
Even though Hybrid apps have caught up with their Native counter parts in terms of performance, Native apps still deliver a much better experience and also provide a good long term stability.
API and Third Party Library Support -
When it comes to API accessibility, the Native app development frameworks can use all the types of APIs directly. Whereas, the same is not possible in the case of Hybrid technology.
Now answering your specific queries, Image caching is available in both Native as well as Hybrid Apps and shouldn't be something you need to worry about too much.
You can go with either React Native or Flutter for building Hybrid Apps. React Native uses good old Javascript for development and Flutter uses a new language called Dart. Even though both are quite popular development frameworks, which one to choose is another debate in itself as both have their pros and cons.
Personally speaking, If I was building an eCommerce App, I would probably go with React Native.

What are the downfalls of creating a traditional webapp in meteor? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I have little experience with meteor, so for others who have some...
What are some concrete downfalls, if any, of building what would normally be a multi-page app (e.g. blog) in meteor? I can't think of any reason not to go with meteor for my project other than fear of the unknown.
See the "What Meteor lacks" section in Why Meteor:
Native reactive "joins" for MongoDB (which doesn't have joins). There are, however, community packages for this.
A widget library. Meteor can be used with many client libraries (Bootstrap, Famo.us etc.), but aside from OAuth login, it doesn't have its own set of widgets. Integrating 3rd party widgets ranges from trivial to complex and leads to a paradox of choice when considering the multitude of more-or-less integrated widgets available on Atmosphere, Meteor's packages repository. UPDATE: keep an eye on my Meteor + Webix integration.
A native mechanism to load templates dynamically. The feature is on the roadmap as "incremental loading". In the meantime, have a look at numtel:publicsources and numtel:privatesources, which let you create bundles for lazy loading resources, with or without authentication.
Two-way data binding as in Angular. This is by design. The Flux team at Facebook criticized how two-way data binding creates a major challenge for scaling applications because views can trigger changes in data, and data changes can trigger cascading changes in views, which makes it very difficult to predict the behavior of the app as a whole. The solution is to use an MVVM pattern, such as the viewmodel package.
Native server-side rendering (useful for SEO). There is however a server-side rendering package developed by Meteor guru Arunoda Susiripala, and native server-side rendering support is also on the roadmap.
Production-read support for Windows. This is in preview stage as of February 2015 and works for the vast majority of use cases. UPDATE: Restarting the Meteor server when changing files takes has been optimized to take the same amount of time as on Linux.
Yeah... so not much really.
A downfall is that all code (templates, core, ...) are downloaded upon first page load. An upside is that navigating after the first page load is (almost) instant.

TypeScript XAML framework [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
As a .NET/XAML developer I am wondering if anybody has started to write a framework which will replace Silverlight and Flex using technologies like TypeScript and XAML to produce HTML5, JavaScript and CSS cross platform desktop apps or RIA's.
If not, wouldn't it be great to have a framework which understands XAML (or just XML) to define the user interface and JavaScript or better TypeScript to code the view controller?
I know, Sencha has done a great job building a JavaScript framework called EXT JS to build rich internet- or desktop applications, but from a .NET developer perspective EXT JS sucks.
A .NET developer likes to design the UI's using tools like Blend or Visual Studio with the ability to hack code in XAML and not in JSON.
There is also a good approach called Zebra which renders completely inside an html-canvas, but it isn't XAML based and there is no ability to use themes at all.
Also jQuery UI and jQuery Mobile are great frameworks from an HTML developer perspective, but I am looking for a XAML based framework, because you have to code less in XAML than in HTML. There is also the ability to use Blend to design the UI.
I have asked myself this question months ago when Adobe gave away Flex and Microsoft didn't admit to extend Silverlight 5 and I answered it with:
Microsoft or Adobe should do this for us.
But today I think now it is up to us.
Depending on your feedback I would like to start such a framework as an open source project, but I hope that there is still one on the way^^
You don't really need XAML to write an HTML application as XAML is really just another kind of mark-up.
From your WPF/Silverlight experience, you will find that the following concepts were actually borrowed from HTML anyway:
XAML is mark-up for content, which is what HTML is
Resources are styles and behaviours, which is what CSS is
Some parts actually don't map directly, some of the triggers in your WPF program may be either CSS or JavaScript in a web application, for example. Also, in HTML attributes are used less than I have seen them used in WPF - normally all sizes and layouts are placed in CSS, not attributes in the mark-up.
You may not directly have a substitute for every available WPF control, but you will find that most things are possible.
Although there will be a learning curve involved in picking up HTML, CSS and JavaScript if you haven't used them extensively, they are useful tools in your tool-belt.
Correct me if I am wrong, but I believe you are looking for http://fayde.wsick.com. I am in the midst of rebuilding the framework in Typescript. Check out my blog at http://faydeproject.blogspot.com/.
there is also rAppid:Js http://www.rappidjs.com which is XAML based, but it's not made to work with Visual Studio or Expression blend.
A XAML framework for HTML/JS is a fantastic idea, XAML files could be converted in HTML5 or perhaps in JavaScript directly by having an InitializeComponents() method where all objects are instantiated (like in WinForms).
If you decide to start a such project, consider using a C# to JavaScript compiler like Saltarelle or Script#.
Search the Web for
"M&P H5J is Silverlight in HTML5"
it implements an XAML processor in TypeScript.

Freeware Ui designer for alternatives-to-extjs frameworks [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
I have read this two posts:
What are alternatives to ExtJS?
free and open source alternative to extjs
Is there any freeware Ui designer for any of there frameworks?
I want to build a web file-browser
In general, you might check out this post:
HTML/JavaScript UI widgets GUI builder
Consider while looking at different tools that some might require special server back-ends. qooxdoo as a toolkit is all client-side.
The rest of this post concerns only qooxdoo and I don't think there are any mature ones available for qooxdoo right now. At least, there are none that are on par with the likes of the experience of developing in Visual Studio and with WinForms (as simply a comparison.) There are some early immature tool attempts at doing similar things, but they still will require a good understanding of qooxdoo and form placement. This is not a complete list:
qooxit: This is a project by Derrell Lipman who is very active as part of the qooxdoo development, but I'm not sure what has become of the future of this project. http://qooxdoo-contrib.svn.sourceforge.net/viewvc/qooxdoo-contrib/trunk/qooxdoo-contrib/qooxit/
jsqt: Uses Qt's .ui files and translates them. I have not used this and my guess is it has many limitations. http://qooxdoo.org/contrib/project#jsqt
Qooxdoo.Net: Uses Visual Studio to design the UI, but the project looks dead. http://sourceforge.net/projects/qooxdoonet/
I think there were also some attempts to put a WYSIWYG designer in front of the XML to qooxdoo tool called QxTransformer, http://qxtransformer.org/ but I may be confusing my projects.
Note that the qooxdoo license is dual licensed to LGPL/EPL. If you are working in a commercial environment some corporations are skittish of anything that isn't MIT or BSD licensed. I mention this in regard to your reference to the "free and open source" alternatives. While I firmly believe the intention of the application of LGPL/EPL is to allow us developers to do whatever we want with our creation as long as we contribute back to any enhancements to the qooxdoo libraries, corporate lawyers are afraid of nothing specific in writing. If you are doing this for commercial organization do your homework first. I had wanted to use qooxdoo for a project, but was prevented because of the license and my companies leaning toward MIT/BSD only open source licenses.
As a library goes, I think qooxdoo is the most feature complete and best structured. It is well documented though it does come with a learning curve. However, examples abound and the forum is very responsive. If there is any criticism about qooxdoo it might be that it is a heavier weight (size) library so that the final compiled javascript is often large (500-700k). For complex applications it can be a bit too intensive for smart phones and first generation iPads. However, nowadays this becomes less and less an issue and the mobile side of qooxdoo is evolving rapidly to provide a lighter weight solution. Basically, it keeps getting better and better.
Finally, here is a link to a discussion amongst qooxdoo developers about creating an IDE.
http://qooxdoo.678.n2.nabble.com/qooxdoo-quot-IDE-quot-Request-for-Comments-td3782909.html
From experience I think manual (text editing) form design is tedious and error prone and a tool to make it easier would be a godsend. qooxdoo's structure and "extends" capability would make it a prime candidate for a IDE implementation like Visual Studio uses with WinForms and .NET.
Before switching to Ext, we used the Yahoo libraries. We were using the old version YUI2, but version 3 is apparently also very good. It has many similar components such as grids (datatables) , menus, calendar widgets, etc.
http://developer.yahoo.com/yui/2/
http://developer.yahoo.com/yui/
Sencha Architect is a very nice product.
The DHTMLX library comes with a free online UI designer tool.
The library itself is dual licensed: GPL and commercial. The commercial license includes the desktop version of the UI designer.
There is also file explorer demo built with the dhtmlx components.
(Disclaimer: I work for DHTMLX).

RIA application development on linux platform [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am building a web based RIA application using web technologies including Rails based server side code, and client side based on HTML,CSS,JQuery and plugins etc.
I am looking forward to creating a standalone cross platform application using the same code-base (I do not want to rewrite the application UI in Qt or some other language/library).
Also, I dont want that clients should have to set up a web server to view the content. The application is heavily ajax based and communicates with the restful backend. The desktop client should be able to have exactly the same functionality with additional provision of local storage and synchronization of data.
I wish to carry out the entire development process on linux. Now that Adobe has stopped supporting AIR on linux, I am not taking that as a viable candidate.
I have been looking into Mozilla prism, its almost what I am looking for, except for the fact that it does not seem to have any provision for local storage or interaction with local filesystem.
It would be preferable if the solution is open source. My entire codebase from bottom up is based on open source technologies and as far as possible I would like to keep it that way.
Also, I am comfortable hand-coding my application and features like, integration with existing IDEs, GUI development environment, powerful application builder wizards etc. are not necessary requirements.
I have been suggested that it is possible to have a webkit component embedded in a Qt application and carry out what I want, but I am unable to locate proper resources that can help me do that. I am familiar with Java and C plus plus, so writing additional wrapper code in some other language is not a major hurdle.
If somehow local storage facility can be added to prism, that would be a highly preferred solution.
Also creating a plugin for google-chrome/chromium is a possible alternative. How does it compare to above options.
Any help would be highly appreciated.
At the moment AppJS ( http://appjs.org ) seems to be the most robust contender designed exactly around these same principles.
Another alternative might be a GTK-webkit based solution ( http://webkitgtk.org ) .
[Update:Aug 2013]
Multiple other alternatives are available as well :
TideSDK
TideSDK is community based offshoot of the immensely popular Titanium SDK. While the project is very promising, last I checked there were major hiccups running the developer tools on linux.
Node-webkit
This interesting project provides seamless interoperability between Node.js and Webkit. The end result is that you can start developing an application just like you would write a web-page with the additional ability to call any built-in or third-party node-modules. CommonJS modules just work in the browser context. The project is intel sponsored and I have personally found it very simple to use and productive.

Categories

Resources