What are the options available to export Sketch for Mac UX designs to ReactJS components to be used by the coding team.
From those options, what are the recommended ones, pros and cons of each?
We need something that can automate the coding work of ReactJs components, supports flex and offer support for web applications as well as react-native code.
Our scenario is a SaaS application where we do everything coding (html, css and js) and we want to better develop the UX using Sketch and then generate base code for our UX components to be worked by our coding team.
We have developed the web and app for years and also have the same question.
We have sketch design and it indeed takes much time to code design into web and app.
Currently, the best tool to mitigate the pain is handoff tools which improve productivity and communication overhead.
There're few tools such as Anima, it's good for the prototyping but not easy to adopt for code modification and integration. Finally, we find out the key to the quality code is the right structure of the group and layouts which is not easy to represent in the Sketch design file. So our solution leaves the key decisions for users to decide their group structure for responsive behaviors and we provide an intuitive and fast way to create react components. In our early experiments, it would much faster than manual coding without sacrificing the code quality.
You can checkout the export code via github
https://github.com/px2code/pxCode-Sketch-to-React-Example1
or directly check the codesandbox to preview and edit the code via
https://codesandbox.io/s/pxcode-example-s9sxx?file=/src/components/Card.js
This is more like a 2 step process. First you need to import the sketch file, which you can do so with Desech Studio. This will create an html structure where elements are positioned with css grids, not position absolute. But you will still need to make some changes to the margins and sizes to match your design.
Then you can install and enable the react plugin into your project and then export the code as react code. Check the github repo for more details.
But this is only for web react, not react-native. Maybe you can make your own plugin, based on the existing react web one, but I haven't tried it though.
So pros, and cons. The pros are that it automates and speeds up things. The cons are that the automation requires some work from you.
Related
We are migrating big and ugly MVC based Java EE application to React. The application in question is a browser based UI with hundreds of views featuring complex forms, listings and links. It's intended for officer desktop use, so responsiveness is not a concern.
I have built some small admin dashboards with React without using component library, which was hard enough by it's own right. Considering the huge size of this project and amount of developers working on it, I'm considering utilizing a component library for a solid base. I'm seeking for a framework containing the UI components, layout utilities, error handling, validation support etc. Of course the look and feel should be customizable.
Is the Material-UI library a good choice in this case? Do you recommend some additional libraries with it to streamline the development?
Yes, material-ui is a fine choice. It is widely used and very customizable. In my company we are using it for all our frontend projects.
As #Margon already mentioned React is only a library and you probably want to add some additional libraries. The most important are in my opinion react-router for routing and you will want some kind of state management. The most popular are redux and mobx.
So I started working this year after finished studying last year. I have been exposed to so many things in the working environment. Suck as Maven, GWT and Hibernate.
Now I got this side project in which I just need to create a simple website which would bassically just display some information and contacting details.
So I was wondering if HTML5 CSS and JavaScript is still the way to go and if there are not powerfull frameworks in which could you help me do animations and graphics much easier.
Also if you know GWT and GXT would it be a bad idea to create a visually apealing website using these frameworks.
Thank you so much for reading
Have a nice day
Objective: Create a simple website which would basically just display some information and contacting details.
GXT:
GXT is built on GWT.
Go for GXT when you are in need of rich set of widgets (it is a very large set of collection) out of the box. Have a look on the following link where GXT has showcased the different widgets
http://examples.sencha.com/gxt/4.0.0/
GWT:
GWT will be having minimal set of widgets when compared to GXT. Have a look on the different widgets which are provided out of the box. http://samples.gwtproject.org/samples/Showcase/Showcase.html
Javascript Animation framework:
There are bunch of javascript libraries/frameworks for animation, choose one which is most appropriate to your work. Have a look on the following link.
https://www.javascripting.com/animation/
Conclusion:
Consider the following before finalizing on a framework
Framework which is having more out of the box components which matches the requirement.
Framework which is more stable
Framework which is having more support on the internet, such as forums, blogs.
Happy Coding!!
This question already has an answer here:
Does Adobe Flex have the ability to compile into HTML/JavaScript?
(1 answer)
Closed 6 years ago.
To give a brief background I am a C++ programmer who has worked mainly on back-end systems, but now has to develop a front-end gui (mainly an interactive dashboard with lots of charts and comparisons and so on) as well along with a back-end financial system.
Few years back I had worked on a similar project and used Flex to develop a dashboard. But searching the net, it seems that Flex is not well supported anymore (nobody pouring money on it) and will go out of fashion soon (Am I right???). So I continued searching and the names that popped up are ExtJS (which was prevalent few year back) and AngularJS (heard it for the first time now). Spent some time searching both and both seems fine. So can you dashboard developers please help answer the following questions (as well as provide important input that I may be overlooking right now):
Cross-Compatibility: Need to develop desktop and mobile apps along with web page.
Prevalence: I will need to learn the technologies. Would prefer it they are popular and widely used
Dashboard features: Stuff like ability to go into bar graph and pie charts and stuff.
Ease of programming: Quality of Editors/IDE available, speed of programming etc.
Anything important that I am missing
In my opinion, I would go with Flex, because:
You already know it
Flex is a "compact" solution to your problem. Web frameworks imply you to learn a lot of new things. AngularJS is certainly cool but every web tek require you to master JS, CSS (I hate it), HTML, FireBug, PhoneGap, .... Web teks are a mess (IMHO !!!)
Coming from C++, working with Flex is more comfortable than web tek. Dependency injection is cool but it's a new vision of the world. JS is really powerfull but is (also) a functional language and you will need to get a "lambda mind".
Two year ago I decided to try ExtJS to make a dashboard for an hospital. I gave up after some days when happened that finding and solving a simple bug in my simple app took me a full day! [I forgot a parenthesis. The page didn't open saying nothing at all).
I'm now trying to learn Flex because I need to produce a simple app for smartphone (I'm a newbie in that) that should be ready in a month and with Flex I think it's easier for me to succeed than with any web tech framework. I know that Flex future is obscure but I think it's too good to be killed even if Google's pressure is strong ;)
No-one seems to be keen to answer this question - I guess because it's a definitely going to be an opinon based answer. I'll give it a go...
To answer your first question - Flex is if not on the way out, at least on a low simmer. Adobe Flash Builder 4.7 (the main Flex tooling IDE) has not been updated for well over a year now and I can't see any updates on the horizon.
Apache, who now own the codebase are doing a nice job with updates, but progress is slow.
One possible bright area is FlexJS, a compiler that outputs Javascript and HTML. It's still alpha at the moment, but it could be an option.
I've never developed in ExtJS, but it seems it's time has come and gone - it's still used, but it's definitely been superseded by Angular and other frameworks such as Knockout.
Cross-Compatibility - AngularJS works is almost all browsers from IE8 up and that includes most modern mobile browsers. People often use JQuery Mobile in combo with Angular and Bootstrap to get the functionality they need. Bootstrap is responsive, so if you lay out your UI correctly, it should work for all devices.
Flex is also cross compatible in the form of Adobe Air, but it's less easy to get it onto people's devices - they need to download the Air framework.
AngularJS is the number one framework by a huge margin at the moment - and it's still growing. Check out this graph from google trends. The combination of technologies includes Javascript, CSS, Grunt, Bower, Node.js and concepts such as dependency injection, MVC and responsive layout - all this stuff is useful for other projects. Once you master Angularjs, you'll be ready for a lot of other stuff.
Learning Flex seems to be a bit of a dead end at the moment - you'll notice the absence of any recent Flex blog posts. It's not cool right now, and it's just too uncertain if it's going to survive.
Using Angularjs and D3 for example is reasonably straightforward - a web search will show lots of examples here. Plus you can do basic drawing using svg elements directly in your HTML code. Here's a nice article on the subject.
Since Angular is a Javascript framework, there are many many options here - you could use SublimeText, Atom, PhpStorm or one of many other choices. As I said earlier, your choices are much more limited if you choose Flex.
Finally, don't forget that this is all just my opinion, but Angularjs is just really fun to develop in - binding is just so cool. So are directives. Dependency injection just rocks. I think you'll like it!
Sorry for the bias here, but I can't help it!!
Hopefully this writeup helps you a little. Good luck.
AngularJS is a good choice for complex web application (both desktop and mobile).
There is a project that implements Dashboard/Widgets functionality with AngularJS.
GitHub source code https://github.com/DataTorrent/malhar-angular-dashboard
live demo http://datatorrent.github.io/malhar-angular-dashboard/#/
more advanced demo (charts, etc.) http://datatorrent.github.io/malhar-dashboard-webapp/#/
It targets desktop browsers so far but has a lot of features:
Adding/removing widgets
Widgets are instantiated dynamically (from corresponding directive or template)
Widgets drag and drop (with jQuery UI Sortable)
Horizontal and vertical widgets resize
Fluid layout (widgets can have percentage-based width, or have width set in any other unit)
Any directive or template can be a widget
Connecting widgets to real-time data (WebSocket, REST, etc.)
Changing widget data source dynamically (from widget options)
Saving widgets state to local storage
Multiple Dashboard Layouts
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 3 years ago.
Improve this question
I'm building a large scale web application. It will grow in the future so I need a good back-end and front-end architecture for my application. at the back of the site, I use Zend Framework so the architecture is OK for me. But at the front, working with javascript and ajax without having a good architecture makes later changes hard and confusing.
For now, I'm using my own architecture. I have a big object for the whole application say BigObject. I extend it when modules are added to the site. say I have an upload module. I use this:
BigObject.upload={
//initialization
init:function(){
},
//I tried to use what I named semi-MVC architecture!!!
controllers:{
//index is a controller
someController:{
init:function(){
//initialization
},
someAction:function(){
//Code goes here
//call a model if necessary
//call view script
BigObject.upload.views.someController.someAction();
}
}
},
models:{
//models required for this module like loading contents with ajax.
loadContent:function(part,callback){
}
}
views:{
init:function(){
//initialize view
},
someController:{
someAction:function(){
}
}
}
}
What do you think? Is there any better solution to this problem? anyone thought about a good structure for front-end part of web applications ( like what we have at back-end,good file structure and object-oriented methods )?
The most up to date answer to this question in 2020, would be to use React + GraphQL + Styled-Components. The best place to start with React is the official Create React App tool. Their are a few different implementations of GraphQL; on the client side the clear leader is Apollo. On the server you have a lot more choice and it is reasonably easy to even roll your own server implementation, so go with what work best with your current backend. Styled-Components gives you CSS in JS, in the same way that React gives you HTML in JS.
For a more complete and opinionated experience, take a look at Gatsby, which brings all of the above into a single framework.
Over the last couple of years a more functional style to writing JavaScript has become popular. If your not used to functional programming then it can be a bit of a steep learning curve to start with, but start by leaning about a library called Ramda.
Here are few links to get you started on functional JS
An introduction to functional programming in JavaScript
Thinking in Ramda
Indentation is the enemy: Writing less complex JavaScript
Mostly Adéquate guide to functional programming
When it comes to testing, then Jest combined with Enzyme is by far the best current option.
Finally for a much deeper answer, checkout this talk from Cheng Lou on the Spectrum of Abstraction.
Most of the answers are proposing stuff like jQuery, React, Angular, Vue.js... which are not frameworks, neither architectures. All of these libraries are layers on top of JavaScript. I just remind you that JavaScript is already a high level language!
Since the question is about a good client-side architecture and structure for large scale web applications, I would say that none of the previous answer solve the problem, and there is a reason for that :
There is currently no emerging or commonly accepted architecture for front-end JavaScript source code organization.
I already read dozen of blog posts, Stackoverflow questions, Youtube videos... I never found someone who detailed a generic, general and scalable architecture. The main reasons are:
front-end JS code is quite small regarding back-end source code, most of the developers do not need a scalable architecture.
execution is ephemeral, lifetime of JS is the same as web pages lifetime.
the problem for many developers is more about manipulating the DOM than structuring large JS code. This is why people answers are about libraries rather than frameworks.
I really expect that some day, someone will propose the first real JS architecture (like MVC for example). But in my opinion, this architecture will be more about event-callback than MVC. Before concluding, I'll suggest you the following ressources:
Imperative or procedural programming.
Functionnal programming (probably the best lead with modules)
Awesome videos of Fun Fun Function
JavaScript modules
To conclude, I'll strongly recommend to consider JS modules that have a great underestimated potential. This is not exactly an architecture, but:
JS modules organise your code
JS modules are scalable
maintanability is easy
JS module are reusable
Previous list isn't the main reasons why you need to organize your code?
Word to the wise!
A lot of people push for either Dojo or YUI for large applications. They are honest frameworks where most everything else you'll find is a library.
Personally, I tend to stick with jQuery. I create jQuery plugins or jQueryUI Widgets as needed. I've managed to push jQueryUI pretty far.
Everything falls in either $.fn.myPlugin or $.ui.myWidget. To me, this has the added benefit of pushing you to keep code very modular and portable (assuming you abide by jQuery/jQueryUI conventions).
$(element).myWidget({
color:'eggplant',
someValue:42
});
$.upload(args);
I was actually struggling with the same question for sometime.. after doing few large-scale projects, I thought of sharing my learnings as a reference architecture incase someone else finds it useful.
Have a look at http://boilerplatejs.org. It is not a library, but a framework that integrates some industry leading libraries with architectural patterns for large scale javascript development.
According to my understanding on the frontend i will ask you to use web-components that uses only HTML,CSS and JS.
No need to spend much time on understanding the other languages. If you take the latest UI frameworks or libraries like Angular, React they have built on web components.
You can customize your own components and use cases which you want to use in your project.When you are using frameworks it will take some time to load and follow up for few libs that are using.
JS you can use it any way you want. You can re-use these components in any number of projects once you have created.
Just look into webcomponents https://www.webcomponents.org/introduction you will get a clear idea. I hope this helps.
With the experience of scaling some of my content for million viewers in my application. But then I had to close the application for less profit and more stress in managing it (not the cost though, but the profit was not high enough to keep up motivation)
My architecture was:
Mithril.js.org library - Checkout mithril here for front-end
Twitter bootstrap front-end framework
Backend with "Laravel and started migrating some of the heavy write data to nodejs"
Redis as in-memory storage.
I was almost in a situation to move my storage to s3 before I shut down the app.
No jQuery - I kept my app jQuery-free ( I heard and read somewhere big app avoid jQuery, so without further investigation myself, I planned to remain jQuery-free as well, though I have no solid or bullet proof reason to avoid jquery)
I found mithril more interesting then react or angular, it was so easy to start and I was building while I was learning, it was damn easy and they claim, they are better than react, vue and angular in terms of size and performance.
My response would be to ask why you need this? I've worked on plenty of applications which make use of javascript, but one thing that I've learnt is that the best thing to do is to minimise javascript and most especially object orientated javascript to an absolute minimum. Web pages with large and complicated javascript tend to be slow, memory hungry and a pain to debug with all the browser variations.
I am going to start a new application which mainly consist NavigationPane, Grid, Toolbar. Layout should look like this demo page http://www.gwt-ext.com/demo/
I am quite confused which one to use in terms of writing less code, more performant, etc..
Could someone tell the pros and cons of all these technologies.
All the while I coded in javascript, so that way ExtJs seems to be the easy one for me to code. But I am curios to try GWT Ext, Is it true that it could do a lot just by writing few lines of java code.
For eg: To achieve the layout ( given in above gwt ext demo url), which one should I opt ExtJs or GWT Ext.
I read SmartGWT is relatively slower than GwtEXT. Does it have any advantage over GWT EXT. I am also looking for hibernate based data modules ( as my application is going to have many database calls). Anyone of SmartGWT or GWTExt has support for such modules. I came to know that smartgwt doesn't offer all of smartclient enterprise version functionalities, that we are allowed only a few of smartclient features. Will it be an issue?
Your response is highly appreciated.
The GWT-Ext main page now says
"GWT-Ext is no longer under active development and has been superseded by Smart GWT. Assistance will be provided to existing users of GWT-Ext looking to migrate to Smart GWT."
so why would anyone use it?
To write the least code, use SmartGWT Pro. It provides a wizard that allows you to just pick from a list of Hibernate entities you've created, and instantly you have the ability to perform all CRUD operations on that entity, no code required. Then you can add business logic.
The wizard:
http://www.smartclient.com/smartgwtee/showcase/#tools_hibernate_wizard
The link about is just screenshots, but there are several Hibernate samples in the showcase. See especially the Master-Detail Batch Load and Save sample.
As far as performance, real-world performance of most enterprise apps is dictated by how often the application has to contact the server. In this area SmartGWT has a large lead because of features like Adaptive Filtering (see the Featured area in the SmartGWT showcase).
Almost all reports we receive of SmartGWT being "slow" are due to having Firebug enabled. Disable Firebug and performance is fine, so normal end users will never perceive slowness.
About 6 months ago, we studied whether we would use ExtJS or GWT-Ext for an internal application. We wanted the back-end to be J2EE standard frameworks (struts, spring, hibernate for persistence, etc.). We ended up choosing ExtJS because it seemed to us that GWT was not stable enough (too many changes in the API that is still recent), and Ext-GWT was always lagging behind in development.
application which mainly consist NavigationPane, Grid, Toolbar.
Well, this tells us a lot about your app, doesn't it :)
I think it comes down to how good you are at either Java or JavaScript. They are quite a different languages you know :) But if you are well-versed at both but only used Ext JS, then picking up Ext GWT (or GWT Ext, if you meant that), shouldn't be such a great deal. And if that application you are planning is going to be as simple and small as your description of it, then it's probably a perfect opportunity to try out something new.
I use GWT-Ext and it is quite good especially if you don't mind tweaking things with JSNI to customize the already existing Ext widgets it is incredibly powerful. Unfortunately development is stagnant, so my future projects will probably be either in SmartGWT or Ext-GWT. SmartGWT is written by Sanjiv Jivan (same guy who wrote GWT-Ext) and it has most of the widgets we need. I must say most of the skins are quite dated except the Enterprise skin which looks good, but you can always roll your own skin.