Svelte is one of the new approaches to build and test new frameworks. Traditional frameworks like React and Vue do their work in the browser while Svelte shifts that work into a compile step that happens when you build your app.
- Svelte writes code that surgically updates the DOM when the state of the app changes.
- Web apps are fast in rendering components, compared to native react apps.
- Directly interacts with HTML-CSS components.
- Inherits features like state,props in react.
- Any bugs in the code would not let the app crash down, but does not render the entire component.
- Prerequisite knowledge on ReactJs is needed for efficient app building.
Hugo is a static site generator. Unlike systems that dynamically build a page with each visitor request, Hugo builds pages when you create or update your content. Hugo takes a source directory of files and templates and uses these as input to create a complete website. Hugo is for people who want to hand code their own website without worrying about setting up complicated runtimes, dependencies and databases.
- Extremely fast build times
- Many themes are available online for free. So creating a site for a beginner will be easy.
- Content files and template files are stored separate. So if a person doesn’t want to get into designing the site, he can just change the content without going into html codes.
- Content to be displayed is written in markdown language. So even if the user doesn’t know HTML, CSS or JS, he can create a simple site using the themes.
- Content files can also support HTML code, so designing can even be done through it.
- Users can use shortcodes, which are simple snippets inside your content files calling built-in or custom templates. They are used to avoid writing raw html code in md files. Shortcodes are reusable and can make coding easier for beginners.
- Supports HTML,CSS and JS.
- Documentation is good.
- Need to study lots of variables in Hugo to create complex sites.
- By default, the same structure that works to organize your source content is used to organize the rendered site.
- Passing data between pages is difficult.
- Hugo is good only for static data.
|It is extremely fast
|Faster than native react apps.
|Prerequisite knowledge in ReactJS is required. Syntax is similar to Vuejs.
|It is easy for the user if only content manipulation is needed. To create templates and layouts, they need to study about Hugo variables and should understand the basic workflow.
|Not as friendly as beginners need to have an idea on ReactJS, but this is comparatively easier to use than React.
|Passing data between pages is difficult.
|Props can be used to pass data between components.
|Supports built in themes
|Lots of themes are available in Hugo.
|No built in theme support.Npm supports react styled components only.
|Best for creating simple static websites. Eg: blogs
|Websites are dynamic. Routing could be added via react router.
|Hugo has good development community support.
|Svelte is a relatively new framework. Hence community support is only developing.
|Installation and setup
|Easy and fast to install and setup.
|Easier to install via npm.
|Hugo doesn’t have plugin support.
|Svelte supports plugins via npm.
|It’s fairly non-standard and confusing for beginners.
|Hugo is great for content-driven websites.
|Less content driven support.
|Data files supported
|Doesn’t support XML as a data file type. However, YAML, JSON, and CSV are supported.
|JSON and CSV file support
|Content files supported
|Html and markdown
|Only html is supported
|Debugging is not easy
|Not easy in svelte. Errors are left undetected.
|Hugo is light
|Svelte app size is comparatively larger, since node modules are incorporated.(Developer’s perspective).
Dhruv Eldho Peter, 5th Semester student, Comp Science and Engineering, College of Engineering Trivandrum
Tapan Manu, 5th Semester student, Comp Science and Engineering, TKM College of Engineering Trivandrum