Situation
I have been working on a project lately where the UI development seems to be way too time consuming. In this case, the "Business Rules" on the server-side are much more complicated than the presentation aspects as far as a Computer Science or complexity perspective.
I've found myself scratching/banging my head against the wall with problems with behaviour that differs from the intuitive approach all the way to being a black hole of time waste and poor documentation, where I might be trying to get a simple UI element to line up correctly.
I'm not complaining; I understand there are complexities and a wide audience to support with web development, but I am perplexed by how long it takes to do what seems should be the easy part compared to how long it takes to write the code with complex logic, math, science, etc.
Question
What are you thoughts and personal experience to go from concept to reality with web development and to do this rapidly, or at least in a way that you can have a sense of how long it might take? I have purposefully not mentioned any frameworks or languages, because I would really like to here what web development stacks you use, what tools or best practices help you get things done faster, and how you end up with code that doesn't feel totally brittle and full of hacks.
Hyperbole, language preferences, and all thoughts welcome, I would at least like to get a sense of what is being used for web development that has a high success rate, even if it isn't the latest and greatest thing around.
I personally have found breaking everything up into small tasks helps.
The way I like to design web pages:
Draw out the design, or photoshop it.
Create the HTML - no CSS, no styling at all
Now add in your style - basic style, like positioning, save making the menu perfect for later
Connect to database if needed / server side code
Now add in any javascript, ajax needed
Tweak it to perfection
If you have all this broken into small tasks, when you get done with each, you feel more motivated to continue working.
Like I said, this is how I do it, and it seems to go quickly, especially since I only get about 1 to 2 hours a night to work.
The answer to this question depends on if you are working alone or leading a group.
If you are leading a group you will want to break apart responsibilities as the following:
Designers - These people should own the creation of graphical mockups and the creation/maintenance of CSS. They should own CSS as a responsibility so that they know not to create outrageous graphical mockups that cannot be created as a webpage without considerable code bloat.
Markup - These people should own the authoring of HTML, accessibility, semantics, RDFa requirements, and any other aspect associated with front end data structure.
UIT - These people should own JavaScript, efficiency requirements, content-management requirements, internal process and front-end tool/process governance, and generally own best practices for all client visible code.
Applications - These people should own server-side application code development, content management system creation/maintenance, and database access requirements. These people are application and services programmers and provide the interface to database and services personnel.
QA - These people test all business requirements of the final product in a certification environment. If errors are seen the bug/ticket should be updated and reassigned. The work is not finished until QA signs off as valid.
Business Owner - The business owner is the person/team responsible for writing the initial project requirements and making a final approving decision about the deployment of the project. This person should have no interface to the technology process outside the drafting of business requirements.
Project Manager - This person ensures that a project is continually moving forward and that milestones are completed in accordance with any deadlines. It is this person and not the business owner that is to interfere with the technology process to ensure things are getting done. This person must act independently of the business owner and must not serve as a tool to the business. The project manager must not own or recommend changes to the requirements to the technology personnel. If changes to the requirements must be made this is a one way process from technology through the project manager to the business owner.
The flow of development should be the following:
1) Designers create the graphic mockup and then reassign the bug/project ticket to the project business owner.
2) Upon business approval the ticket should be reassigned to Markup staff or rejected back to design with specific change requests.
3) Markup writes the HTML and content. Any application or database requirements should be specified by business before the project begins and the Markup team should write code for all possible scenarios. The structure of content should reflect the organization of content on the visual markup completely without regard for presentation. The ticket should be reassigned back to Design for CSS creation.
4) Design writes the CSS to add presentation in compliance with the graphical mockup they created. The design team must have access to the HTML markup to add class attributes as necessary, but should not be allowed to make any other changes. The ticket should be reassigned to Applications to complete all server side requirements.
5) Applications should create all necessary requirements for database access. Ticket should be reassigned to UIT if the prior requirements are satisfactory or reassigned back to Markup for changes/additions.
6) UIT should be the final step to write the JavaScript interactions necessary for user-interface and AJAX requirements. UIT also should proof the prior completed markup for standards conformance, efficiency, and best practices. UIT should quickly reject the project if the work is less the acceptable. If additional Applications work is required reassign to Applications otherwise reassign ticket to QA.
7) QA is the final technology stop. These people test the business and functional requirements of the final product. The project cannot be released to production without QA sign off. If a business requirement fails QA must not sign off. Upon QA sign off the ticket should be reassigned to the business owner.
8) The business owner reviews the project and determines if all requirements are achieved. If changes/additions are required they can be submitted at this time. Changes/additions MUST NOT be submitted earlier, because frequent changes delays all projects. It is the responsibility of the business owner to ensure their initial requirements are complete and specific. If the requirements are not reviewed for fullness it is the fault of the business owner and changes can be submitted at this point. It is because of this responsibility, and other associated business responsibilities, that the business owner deserves to get paid more for being less involved.
That is the most efficient manner to get the job done. Separation of duties is extremely important and adherence to the process is extremely important. If those two things fail the entire process fails and business incurs significantly increased development costs.
If you are acting on your own and not part of a team I would still follow a similar process and push the role business owner onto the client. If the client wants to make changes/additions premature to the project completion then they can pay more money by amending a change addendum to the original requirements contract. You do not loose pay from increased labor because a client cannot make up their damn mind. If that is upsetting then the client can pay even more money for a contract cancellation. This is not mean it is business. If your time is not a valued commodity then you should not be in business as on your own.
I've been using the .NET stack for about 5 years, the ASP.NET MVC stack for about 3 months, and old ASP for 4 about years.
The key to dealing with complexity is mitigating it. In your code, always abstract away complexity to a reasonable level. For example, say there are 10 steps to placing an order. In that case, at a higher level, you would have a method 'SubmitOrder'; under it might be 10 method calls for inserting appropriate records, dealing with inventory and so on. In each of those 'business' layers, you can just deal with these business problem, and even below those layers, you would deal with data and mechanical details. The benefit to all of these layers is that you make each layer deal with a chunk of the work, and as you go up closer to the UI, you have an 'interface' that makes sense to the UI and the way the application needs to flow.
I think you're a little mistaken about UI development. UI development is difficult and usually underestimated in its importance.
There's a need to know the basics - before you jump to HAML, know your HTML so you know what you're abstracting away. Before you jump into jQuery take the time to learn JavaScript basics - you don't need to be a pro, but when you need to add some numbers together you should not go looking for a plugin. Have a good understanding about how to style things with CSS. There's a lot to topics and technologies to learn to be a competent web UI dev.
That said, for greenfield development Rails is pretty sweet. Pick jQuery. And don't choose a platform that hides how the web really works.
I use UI designers. They are excellent for that sort of thing.
I craft my application requirements around what is practical and sometimes easy in terms of front-end work.
My companies does mostly .NET development and we have been successfully using the 'net-tiers' templates for data access layer. The templates are loaded into CodeSmith code generator and pointed against a database. The end result is anything you could possibly think of. It'll generate your DAL, webservice, winforms UI library, web UI library, a sample website and administration tool and more. A great tool to save some development time. Check it out.
As far as actually working on UI, i think it may benefit to actually hire a professional. We have a professional designer who does some contract work with us. All that we do is wire up the UI to our UI components and code.
To speed up getting an HTML page that looks like you want:
First, decide on a design and draw what you want it to look like using a graphics program (if you've got a UI designer they do this step). Then, write static HTML and CSS that matches what you've drawn. Once that's done, write code that outputs HTML that matches the format that you've decided on.
I did this for a pretty complex set of states for a web app, and found that first writing HTML and CSS by hand, without having to wrestle with your server program, makes it go much faster.
The common mistake web developers do most often is that they start writing markup without thinking what they are making and How it will look like. Later when they stuck in any problem then they have to restructure the markup several times which also affect the design too and not an efficient way.
Good developers have habit to design first then develop. What I mean to is it is better to design your website in Photoshop first the start coding. This help them a lot because they knew what they are making and what they can do later as well.
After planning let's talk something about the coding environment. Of we have a nice setup for web development then it will increase our productivity. The major part is Text Editor .It is very important to have a nice Text Editor because we do most of our work on Text Editor. Text Editor plays an important role in increasing our productivity. Well,You can't use notepad or notepad++ in 2019 . They are outdated. The best Editor in 2019 is VSCODE and Sublime Text.
Personally I use sublime Text with some plugins.
Another important part of web development is version control. You can use git for this purpose. There are many online free cloud storages too like github , bitbucket etc. on which we can save our code and access it from any part of the world. Now these days many people are remote workers and to share their work they use git. It is not only helpful in web development but it is also helpful in every software industry. This also allow you to try different styles by simply making branches without messing up with the code.
The least famous but most important part of any software developer or web developer is to use comments while coding because on small project it is very easy to find a particular piece of code but when you are working on large projects or work with a team then comments are necessary because the other developer might not be familiar with your naming conventions. If we use comments then you know what this particular code do.
In last one more thing I would like to suggest for web development is to use browser's developers tool. They are truly awesome and very helpful in finding an error. Developers tools contain console, live code preview, responsive website preview with various mobile devices options and much more.
Some useful plugins for web development are:
Emmet
Prettify
Color Picker
File Icon
Git gutter
Integrated Terminal
Hope you get the answer of your question
Developers are extremely prolific individuals. They are continually improving their tools in order to increase their production and produce better outcomes faster.
For over a decade, I've been doing full-stack web development. One of the most difficult hurdles I'm having right now is that I need to focus on a range of tasks in a short amount of time, from designing user interfaces to deploying web applications.
To speed up my output, I use a number of technologies and frameworks. For UI, I usually use Bootstrap 4 and Bulma for most of my projects when it comes to building responsive web apps.
As I continue to focus on developing a variety of Web applications, I've seen that there are certain similar themes that I've noticed when doing so:
Consider the following example:
User Interface for Login/Signup/Forget Password
Layouts like a dashboard
Layouts for User Profiles
Form of Configuration
The list could go on and on.
I believe that most full-stack developers have come across the same UI pattern when developing their Web Apps UI.
So, to make the above procedure go faster, we created a simple tool that allows you to drag and drop — pre-made Bootstrap 4 components like Signup Form with Cover Image, Login Form, Dashboard Layout, and so on...
But wait, there are already a number of comparable Bootstrap builders out there, so why do I need to create another one?
The majority of Bootstrap Builders are focused on creating websites, however we choose to create this specifically for Creating Faster Web Apps UI.
Other aspects have also been taken into account.
Because drag and drop is sometimes a limiting choice for developers to modify the layout, we created an in-built full-featured Code Editor that allows you to generate numerous HTML, CSS, and JS files to extend the UI of your Web Apps.
In conclusion, you may make use of the following advantages.
Drag & Drop — Pre-Made Bootstrap Blocks — Dashboard Layouts, Signup
Forms, *Login Forms, E-Commerce Order Layouts, and more
Drag and Drop — Default Bootstrap Components to improve the layout
even more, such as Buttons, Cards, and so on...
Create/Edit UI enhancements using HTML, CSS, and JS.
Use the entire project for production or future development by
downloading it.
Publish to Netlify to show off your work to potential clients.
I hope, you enjoy using this tool for creating responsive Web Apps UI faster.
Related
I have taught myself HTML/CSS and some JavaScript as a hobby, and have reached the point where I am comfortable building a clean simple website. The company I work for (we do nothing related to coding) has a website that is quite outdated so naturally I saw this as an opportunity for my first live site. I approached my Managers at work to take a look at my first mock up and they loved it and want me to revamp our current site.
The one concern they have with me being a rookie is the issue of web security. Essentially they want to make sure that the website I build leaves no vulnerability for someone to hack through our server, start editing our website, etc.
There are no interactive components to the current website. I plan to build this website with only HTML and CSS, and perhaps add some JavaScript later down the road once I progress in my learning a bit more. There are no account logins or areas to enter personal information anywhere on the site.
My question comes down to this -- what can I do to ensure that the website I build is not leaving our company vulnerable? I have done a lot of searching around Stack Overflow and other websites but I am not confident I am finding the correct information.
Details that might make a difference:
Our company website is hosted through godaddy.com
Our website is currently on Wordpress, but I will probably not use Wordpress for the new website
I greatly appreciate all of your help!
since there should be no direct interacting with the server ex PHP and AJAX only HTML CSS and js there should be no security issue, as js and HTML can't edit/delete/read server files, only server-side programming can. eventually you may want to invest in PHP almost no website is complete without PHP or AJAX. take me for example, I used to use just HTML, CSS, and js. then I wanted to do more.. log form answers to a file, show different pages based on the query string. these things are virtually impossible in a HTML, CSS, and js only environment. I would also recommend atleast getting free protection from cloud flare.. they give free shared hosting wildcard SSL, and free DDOS protection, granted for a business you might want to invest a little more than free but free would be a good starting point
also you could pay someone to test the vulnerability of your company, take for example OurMine. a legal hacking group.. you pay them to test your security and they do just that. (they claim they don't log anything that they get) otherwise there might be vulnerabilities you may not be aware of
When you are concerning about just AJAX call, I would help you out for following suggestion regarding "Function access rule from AJAX".
By adding "_" as a prefix for Function name, we can prevent function to be called from The Web publicly. This is the best practice when we need some specific function to be accessed via AJAX only.
Kindly, refer my answer given in other question.
[Website Security: How to learn?
I am curious how actual professional UX/QA testers test websites out. The reason why I ask is I have been assigned to stress-test and "break" our website for our school project, but really don't know if there's methodical ways of going about so. I've created an windows form app in the past, and when we tested it I basically just clicked on everything we created or input strings or integers into fields to try and break our algorithm, but I feel like perhaps it's different this time with our website. As an analogy, it's almost as if I'm trying to create UML-related flowcharts and diagrams, but not adhering to the UML flowchart and diagram rules, processes and the definitions of each shape.
So aside from manually going into our website and just clicking on stuff, adding values into our prompts or input fields and what not, are there actual software programs I can run that automate these sort of things? I stopped and browsed several related existing threads pertaining to the same topic, but they mention more about fundamental ways about testing. I'm looking for more specific things and possibly software I can use to help stress test our website. Thank you!
There are many different types of testing that can occur for a website. Usually, QA testers run very different types of tests than those who are testing the user experience in some way.
QA testers usually engage in both black box testing and white box testing. This is a pretty good overview of the difference between black box and white box testing. In terms of applications, Selenium is an excellent one; you might find other test frameworks more of use to you, depending on what technologies your website is using.
User experience testers consider what real-world users will do with the website. I wouldn't consider it a part of stress testing. I'm including it in my answer because it's part of the title of your question. In a standard usability test, you ask real users (or people who are representative of your intended real users) to complete a small handful of tasks while you observe what they do. The goal is not to find functional errors in the website (although you might find some during the course of your usability test), but rather to determine whether your users are able to complete their goals using your site.
I think you are looking for e2e (end to end) testing: there are different libraries that use softwares like Selenium to run automated tasks on the browser. You can have a look to Protractor or Nightwatch.
There is also another interesting kind of tests, perceptual testing, that we (my company) are implementing recently: you can create some accepted screenshots of your web application and an automated task checks if every pixel is in the right place and, if not, it gives you a png with all the differences.
I'm not a Web Developer, and I don't know a lot about the web application frameworks out there.
Recently, however, I got into Wt. It's a web framework written in C++ (that's why I got into it), but what impressed me the most is the idea it's based on.
Its API is different from any web framework I ever heard of (CppCMS, Yii, Django, Pylons, Zope, Drupals, Java Servlets, Struts ...): a new Application object gets created for any user session, and it stays alive until the session expires (only at this point the Application object gets destroied). This Application object works like a desktop window: you put Widgets in it (widgets like forms, links, labels ...); when the user clicks on a link (when the HTTP server receives a new GET/POST request) a function gets called on the object tight to the user session (in a nice Signal/Slot way), which can remove/add/change the widgets, thus changing the page the user will see.
As I said, I'm not very skilled with web frameworks, I develop almost only desktop applications; maybe for this reason I think this paradigm behind Wt is great.
I'd like to know what are the pros and cons of this framework API in respect to the other ones, and if there are other frameworks (also in other languages) based on the same concepts.
Wt is a great framework for its intended range of applications.
Wt is great for :
web apps tightly coupled to a session, i.e.
made to be accessed only by users that are logged in (except the landing page)
display a lot of user-dependent content (so not for a wiki)
relying heavily on state
web apps that need to have a lot of controls/buttons and user input.
For exemple, I plan to write a browser MMORPG. Pages will all be having a state tied to a user, and there will be a lot of buttons. Wt is perfect for that. I used to be a Ruby on Rails developper, and switching to Wt for this kind of app was a great moment. It's increadibly cumbersome to design forms with traditional frameworks that try to enforce pure REST.
Wt would also be perfect for a control interface on some process. For example, an interface allowing your customers to configure their adword campain, etc.
Of course, using Wt is not perfect regarding control and separation, but it allows extremely fast development when you need only the "classic" features (buttons, editors, etc.)
So as a rule of thumb, if you are trying to put a desktop application on the web (which is a great idea, removing the need to deploy and update on your customers' machines), Wt is a good candidate.
Also, if you are interfacing with an existing C++ codebase, Wt has an advantage.
I think this is generally bad idea.
Web application is very different from GUI one and there are many reasons:
99% of the web is about the content rather then about iteration.
You go to web to get or share content rather then to do some real time interaction
like drawing a picture, working with spreadsheet or anything else.
Web is content driven rather then "event driven" interactive application.
This has strong impact on how do you create most of web - you bring information
to user rather then interact with him.
The server and client programming is very different
There are some web GUI applications like e-Mail, Chats clients but to perform well
they require very good separation between the client side written
in high quality Java Script and the high quality server side backend that is used
over AJAX for content retrieval.
Hiding this separation like Wt does or (other known frameworks) lead to crappy
software and generally brings more problems then solutions in long run.
Because it should be very clear separation between server side and client side jobs
as some require real time response and some don't.
When you try to solve all this in one wait for problems. Note, there are client-server
solutions for GUI (see X-Server as example) but unlike web they designed for this
and rather work more like IPC rather then client-server solitions.
The web is stateless most of the time.
Or to be more correct the state usually keeps quite small amount of data.
Creation of instant session object is nice idea until you need to...
Scale up save state in long terms then this model becomes not so good, of course
this not "forced" model by Wt but it is general concept that fits certain concept
and some does not.
Bottom Line
If you want to design good GUI like web application. Start learning JavaScript and use good GUI JavaScript frameworks that fit well to GUI even driven design. Then combine them with some server side API using some interaction RPC model like Json-RPC, XML-RPC and other
AJAX tools.
This is the way to do things right for highly interactive applications.
If your application is more content oriented then most of server side web
frameworks do great job - concentrate on server side with its great tools suitable
for the job.
All in one solution? It just does not work...
Disclosure: I'm developer of CppCMS and I think Wt just goes in wrong way.
ASP.NET is similar; it has the same goal to make web development look like desktop application development.
Quick background: i'm the portal admin for our medium sized company. Currently, our intranet policy is to try to integrate everything into our intranet portal, (which we use mostly as a CMS, with a handful of applications integrated as well). This means that all of our software appears to the end user to come from one site, which is good. But it also means that we have to modify just about every piece of software that we want to incorporate into the website to fit into the portal. The disadvantage of this is that each component of our portal (the cms, the blogging, forums, etc) are not best-of-breed, and to be quite honest, they are pretty bad compared to their free and open source counterparts (wordpress, phpbb, mediawiki, are examples that come to mind). Because the users are forced to use these subpar tools, they aren't happy.
We are currently looking at the other end of the spectrum, where each piece of software in our intranet isn't integrated, but we are able to use best-of-breed free software. We would be able to much more rapidly roll out new services to our company, but the down side is that the services wouldn't be integrated. A users profile in wordpress (movable type, in our case) is not connected to their profile in the other applications, for example. The software overlaps, finding information is more difficult, users aren't happy either.
How does your company balance the ability to rapidly integrate new tools with the desire to have a single coherent interface presented to the user? Do you pick one enterprise platform and force yourselves to stay wtihin its boundries or do you attempt to provide cohesion between many disparate tools?
Unfortunately every tool needs separate analysing and very often difficulty depends on many different factors (technology, frameworks, design). But the most important is integration level and integration points (Identity, interface).
Edit:
btw, good idea would be to spend some time on some prototyping and evaluation of potential solutions.
This question is for web developers and architects.
How do you think is it a good or bad idea to have a website where you're able to edit all the templates (HTML, CSS, JS, images..) right from the admin panel?
In this case if you update website often, you don't need to search for a local version of your website on you development machine, search for a specific page, make modifications, commit it to source control server, make deployment.. Instead, all you need is just right click on the page or any element on this page, click Edit, update a piece of HTML and click SAVE - 30 seconds maximum - all from your browser ;)
You still can have version control system with this approach and rollback any template which was modified by mistake by 2 mouse clicks on a website.
I personally like this approach and need to know your opinion. So what do you think?
Note, we are talking about big websites which have to be updated often, multilingual ones etc.
Realworld web-applications which use this approach:
Wordpress
vBulletin
Personally, I think it would depend on the complexity of the website.
What you're talking about here is directly editing the structure (and potentially behaviour) of a live website. Sure, it may take longer to make the changes on your development server before rolling them out but if there's any chance of breaking either the appearance or functionality of the site then I'd think definitely think twice.
You shouldn't be allowed to modify the entire layout of your site through the site itself in my opinion. The reasons being the lack of version control and the inability to preview what you are doing, which translate into the inability to come back to an older version. Plus if you modify it locally, you are allowed to make errors that break everything, a luxury you can't always afford if you're doing it directly through the website.
Being able to add/remove content through the website is great though, it would be very painful to update a blog by modifying your HTML each time!
I once created a site that did exactly that. (Well, without any option for source control - had to learn that one the hard way...) Looking back at what I did there, a few things come to mind:
It was a traditional website with information about my sports club, that only changed occasionally, not a web app in the modern sense.
I wanted to be able to apply fixes even though I had no access to my dev machine (because it was a private project, I was at work, and ftp connections were not allowed by the comapny proxy).
For those specific reasons, the approach was a good solution. Today I would use one of the many good frameworks for this purpose (Joomla, Drupal etc) instead of coding it myself.
On important item: I was able to edit the pages that were used to generate the main site, but not the generation program or my admin pages. For those, I had to use my dev machine and upload file changes by ftp.
I think it is a good approach, if done correctly (my implementation certainly wasn't)
Editing HTML/CSS/JS files through your web browser can make things easier, as long as the editing implementation is neat, organized, idiot-proof, and keeps track of revisions.
A major issue to consider is security. The inability to modify actual files from the content management system in most software packages is a security precaution.
Learn to use a version control system effectively and efficiently. Tools like git or bzr can take care of a lot of the tedious stuff automatically, like package building, uploading, etc.
I hate it. Web development, much like the web servers themselves, shouldn't be "comfortable". Web development should be a mother gentle caressing scary experience. It should sound, look, even taste dangerous.
Neophyte web developers should be put through their paces learning the subtler aspects of their chosen text editor before they are even allowed to open a web browser; and not be allowed near a graphical web browser before 6 months of working only using lynx for debugging.
Laziness is our bane. No more, I say.
Edit: This is, perhaps, a bit tangential to the issue at hand. It should also be mentioned that visual identity that is too simple to change will change too often, leading to confused and frustrated users.