{"id":12195,"date":"2017-06-23T09:24:00","date_gmt":"2017-06-23T09:24:00","guid":{"rendered":"https:\/\/viewmyprojects.com\/winwirewp\/?p=12195"},"modified":"2023-11-30T06:18:55","modified_gmt":"2023-11-30T06:18:55","slug":"sharepoint-framework-tools","status":"publish","type":"post","link":"https:\/\/viewmyprojects.com\/winwirewp\/blog\/sharepoint-framework-tools\/","title":{"rendered":"Understanding SharePoint Framework (SPFx) Tools"},"content":{"rendered":"\n

As technologies have evolved, the usage of JavaScript has increased drastically. We can go back to distributed computing and build rich, fast, interactive user experiences for the client.<\/p>\n\n\n\n

If we see, last year has delivered significant updates to the SharePoint user experiences, such as modern team sites, document libraries, and pages. These modern experiences feature simple and powerful web parts that are responsive, easy to use as well as mobile-ready. By customizing web parts on a page, team members can seamlessly build tailored sites that feature the most relevant content and tools for their team.<\/p>\n\n\n\n

In addition to the rich set of web parts available within SharePoint, developers can also create completely new web parts.<\/p>\n\n\n\n

To make life easier, Microsoft has modernized its developer surface while keeping pace with rapidly changing techniques and technologies used in the broader industry.<\/p>\n\n\n\n

Let me put this in simple words, SharePoint Framework allows developers take advantage of up-to-date practices, tools, and libraries to help them build more engaging, mobile-ready web parts at a rapid pace.<\/p>\n\n\n\n

SharePoint Framework \u2013 An open and connected platform
<\/strong>
SharePoint Framework (SPFx) is an open and connected platform. SPFx is a page and part model that enables client- side development with support to open source tooling.<\/p>\n\n\n\n

Earlier SharePoint\u2019s page and web part model were largely implemented in.NET for content and collaboration systems. SPFx helps us to build a better experience with support to mobile views of SP Online sites.<\/p>\n\n\n\n

SPFx has been built leveraging the latest frameworks of JavaScript like Angular and React. SPFx provides an approach to development with less dependency on.NET. One of the core components of SPFx is the modern SharePoint page experience, where pages can be technology independent and can be built using client-side JavaScript and templating framework.<\/p>\n\n\n\n

This page structure will allow developers to leverage the capabilities of SharePoint in a more efficient manner, providing better reliability, being mobile ready and responsive from day one.<\/p>\n\n\n\n

Tooling up for SharePoint Framework (SPFx)<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

SPFx is a new model for developing SharePoint customizations using tools like Node.js, npm, Yeoman and Gulp. Most of the SharePoint pages today are built using the client-side code with the content editor or script editor web parts.<\/p>\n\n\n\n

Tools required
<\/strong>
1. Node.js:<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

\u2022 Node.js is an open source JavaScript runtime.
\u2022 It uses an event-driven and non-blocking I\/O model that makes it lightweight and efficient.
\u2022 SPFx supports latest LTS version<\/p>\n\n\n\n

2. npm:<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

\u2022 \u2018npm\u2019 stands for node package manager.
\u2022 Required as a centralized package registry for SPFx.
\u2022 Installs modules and dependencies.
\u2022 Packages can be installed globally or locally. Locally installed packages go in the node_modules subfolder.
\u2022 Note: Node.js and npm are the foundation for the local SharePoint Framework development. Other tools in the SPFx framework toolchain run on Node.js
\u2022 Example commands:
npm install windows-build-tools
npm install jquery<\/p>\n\n\n\n

3. Yeoman:<\/strong><\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n


<\/strong>
\u2022 Yeoman is used as SharePoint web part generator.
\u2022 Yeoman builds out the project structure required.
\u2022 Yeoman relies on npm and Gulp.
\u2022 \u2018yo\u2019 is the Yeoman command line utility allowing creation of projects
\u2022 Example commands:
npm install -g @microsoft\/generator-SharePoint
yo @microsoft\/SharePoint<\/p>\n\n\n\n

4. Visual Studio code:<\/strong><\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n


<\/strong>
\u2022 Visual Studio code can be used for working with client-side web part projects.
\u2022 This is an extremely fast and lightweight tool, which shows the file and folder structure of the project
\u2022 Visual Studio code is not same as Visual Studio IDE
\u2022 It is available on Linux and Mac OS<\/p>\n\n\n\n

5. TypeScript:<\/strong><\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n


<\/strong>
\u2022 TypeScript is a strongly typed language, which can catch and resolve syntax errors before run time. (TypeScript adds compile-time syntax and type checking to Javascript)
\u2022 It also supports writing classes and interfaces as required.<\/p>\n\n\n\n

6. Gulp<\/strong><\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n


<\/strong>
\u2022 Gulp is used to automate SPFx development and deployment tasks. Gulp can be used to automate repetitive build processes
\u2022 It is used as the task runner to handle build process tasks.
\u2022 Ability to compile, bundle and copy files to deployment directories.
\u2022 Example commands:
gulp trust-dev-cert
gulp serve<\/p>\n\n\n\n

SharePoint workbench<\/strong><\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n


<\/strong>
\u2022 SharePoint workbench is a developer design interface (kind of HTML page with new modern experience), and enables us the preview and test the client side web parts without deploying them to SharePoint.
\u2022 Workbench works with the current page context.
\u2022 It can be served locally in the browser or from the SP Online site.
\u2022 Local Workbench reloads when the changes in code occur, which helps us to view and update the web part in real time
\u2022 Workbench provides the capability to test SharePoint customizations locally<\/p>\n\n\n\n

In Conclusion
<\/strong>
Microsoft has presented SharePoint<\/a> Developer Framework as the \u2018Future of SharePoint\u2019. The new SharePoint framework can be expected with many more innovative features in the coming days. This opens opportunities for a better developer as well as end-user experience, both with on-premises and SP online environment as it provides more options for the developer with increased efficiency and stable applications for both web and mobile.<\/p>\n","protected":false},"excerpt":{"rendered":"

As technologies have evolved, the usage of JavaScript has increased drastically. We can go back to distributed computing and build rich, fast, interactive user experiences for the client. If we see, last year has delivered significant updates to the SharePoint user experiences, such as modern team sites, document libraries, and pages. These modern experiences feature… Continue reading Understanding SharePoint Framework (SPFx) Tools<\/span><\/a><\/p>\n","protected":false},"author":41,"featured_media":16654,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","_uag_custom_page_level_css":"","footnotes":""},"categories":[1,67,59],"tags":[],"class_list":["post-12195","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","category-digital-collaboration-blogs","category-blogs","entry"],"acf":[],"featured_image_src":"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Understanding-SharePoint-Framework-SPFx-Tools.webp","author_info":{"display_name":"Sanjeev","author_link":"https:\/\/viewmyprojects.com\/winwirewp\/author\/sanjeev\/"},"views":3867,"uagb_featured_image_src":{"full":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Understanding-SharePoint-Framework-SPFx-Tools.webp",800,440,false],"thumbnail":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Understanding-SharePoint-Framework-SPFx-Tools-150x150.webp",150,150,true],"medium":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Understanding-SharePoint-Framework-SPFx-Tools-300x165.webp",300,165,true],"medium_large":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Understanding-SharePoint-Framework-SPFx-Tools-768x422.webp",750,412,true],"large":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Understanding-SharePoint-Framework-SPFx-Tools.webp",750,413,false],"1536x1536":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Understanding-SharePoint-Framework-SPFx-Tools.webp",800,440,false],"2048x2048":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Understanding-SharePoint-Framework-SPFx-Tools.webp",800,440,false],"post-thumbnail":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Understanding-SharePoint-Framework-SPFx-Tools.webp",800,440,false]},"uagb_author_info":{"display_name":"Sanjeev","author_link":"https:\/\/viewmyprojects.com\/winwirewp\/author\/sanjeev\/"},"uagb_comment_info":0,"uagb_excerpt":"As technologies have evolved, the usage of JavaScript has increased drastically. We can go back to distributed computing and build rich, fast, interactive user experiences for the client. If we see, last year has delivered significant updates to the SharePoint user experiences, such as modern team sites, document libraries, and pages. These modern experiences feature……","_links":{"self":[{"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/posts\/12195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/comments?post=12195"}],"version-history":[{"count":2,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/posts\/12195\/revisions"}],"predecessor-version":[{"id":18677,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/posts\/12195\/revisions\/18677"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/media\/16654"}],"wp:attachment":[{"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/media?parent=12195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/categories?post=12195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/tags?post=12195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}